在带有react-apollo-hooks的函数中尝试调用useQuery

Z时代
2024-01-10
分类：问答

我想在需要时调用useQuery，

但是useQuery不能在函数内部。

我尝试的代码是：

export const TestComponent = () => {
...
  const { data, loading, error } = useQuery(gql(GET_USER_LIST), {
    variables: {
      data: {
        page: changePage,
        pageSize: 10,
      },
    },
  })
  ...
  ...
  const onSaveInformation = async () => {
    try {
      await updateInformation({...})
      // I want to call useQuery once again.
    } catch (e) {
      return e
    }
}
...

如何多次调用useQuery？

我可以随时打电话吗？

我已经寻找了几个站点，但是找不到解决方案。

回答：

useQuery是一个声明式的React Hook。它不具有经典的接收数据功能。首先，请确保了解React

Hooks或暂时不使用它们（Stackoverflow上90％的问题发生是因为人们试图一次学习很多东西）。Apollo文档对于react-

apollo使用渲染道具的官方软件包非常有用。这也一样有效，一旦您了解了Apollo Client 和

Hooks，就可以进行一些重构。因此，您的问题的答案是：

如何多次调用useQuery？

您不会多次调用它。查询结果可用或更新时，组件将自动重新呈现。

我可以随时打电话吗？

不，只能在顶层调用钩子。而是从上部作用域（关闭）在您的函数中提供数据。

您updateInformation的突变可能会更新应用程序的缓存，这又触发了React组件的重新呈现，因为它已“订阅”到查询中。在大多数情况下，更新是全自动，因为阿波罗将通过组合标识的实体__typename和id。下面的一些伪代码说明了突变与突变如何协同工作：

const GET_USER_LIST = gql`
  query GetUserList {
    users {
      id
      name
    }
  }
`;
const UPDATE_USER = gql`
  mutation UpdateUser($id: ID!, $name: String!) {
    updateUser(id: $id, update: { name: $name }) {
      success
      user {
        id
        name
      }
    }
  }
`;
const UserListComponen = (props) => {
  const { data, loading, error } = useQuery(GET_USER_LIST);
  const [updateUser] = useMutation(UPDATE_USER);
  const onSaveInformation = (id, name) => updateUser({ variables: { id, name });
  return (
    // ... use data.users and onSaveInformation in your JSX
  );
}