时间戳

首页 > 解决方案 > 如何使用 React-Hooks 和 Apollo Client 在 React-GraphQL 中实现搜索功能？

reactjs - 如何使用 React-Hooks 和 Apollo Client 在 React-GraphQL 中实现搜索功能？

问题描述

我尝试使用 React-Hooks 和 GraphQL-Apollo 客户端在我的管理系统中实现搜索功能。虽然界面显示成功，但当我按下“搜索”按钮时，出现一个错误，名为：

无效的挂钩调用。钩子只能在函数组件的主体内部调用。

我很确定在useQuery函数内部调用了，所以我不明白是什么原因造成的。显示所有用户和添加新用户等其他功能运行良好。

我尝试了几种方法来实现搜索功能并在线搜索，但仍然无法解决。这也是我第一次遇到 React-Hooks。

这是我当前在searchUser组件中的代码

import React from 'react'
import {useQuery} from 'react-apollo-hooks';
import {searchUserQ} from '../queries/queries';

const SearchUserForm = () => {
    let name = '';
    let content;

return (
    <div id="edit-user">
        <div className="field">
            <label htmlFor="name">Search UserName</label>
            <input type="text" id="name" onChange={ (event) => {
                name = event.target.value }}/>
            <button onClick={(event) => {
                event.preventDefault();
                const { data, loading, error } = useQuery(searchUserQ, {
                    variables: { name: name },
                    suspend: false
                });

                if (loading) {
                    content = <p>Loading User...</p>
                }

                if (error){
                    console.log(`Error Occur: ${ error }`);
                    content = <p>Error Occur!</p>
                }

                content = data.users.map(user => (
                    <p key={user.id}>Username: {user.name}    ID: {user.id}</p>
                ));
            }}>
                Submit
            </button>
            <p>{ content }</p>
        </div>
    </div>
)
}

export default SearchUserForm;

有人能帮忙吗？

另一个问题是，我data似乎undefined每次执行查询时都会返回。我的查询有问题吗？这是查询：

const searchUserQ = gql`
query User($name: String!){
    user(name: $name){
        id
        name
        email
    }
 }
`;

感谢并感谢您的帮助！

标签： reactjsgraphqlreact-apolloapollo-clientreact-hooks

解决方案

根据钩子规则：

不要从常规 JavaScript 函数调用 Hooks。相反，您可以：

✅ 从 React 函数组件调用 Hooks。

✅ 从自定义 Hooks 调用 Hooks（我们将在下一页了解它们）。

如果您需要手动调用查询以手动响应事件，请直接使用 Apollo 客户端。您可以使用useApolloClient在组件中获取客户端实例：

const SearchUserForm = () => {
  const client = useApolloClient();
  ...
    return (
      ...
      <button onClick={async (event) => {
        try {
          const { data } = client.query({
            query: searchUserQ,
            variables: { name: event.target.value },
          });
          // Do something with data, like set state
        catch (e) {
          // Handle errors
        }
      }} />

您仍然可以使用useQuery，如下所示：

const SearchUserForm = () => {
  const [name, setName] = useState('')
  const { data, loading, error } = useQuery(searchUserQ, {
    variables: { name },       
  });
  ...
    return (
      ...
      <button onClick={async (event) => {
        setName(event.target.value)
        ...
      }} />

推荐阅读