在带有react-apollo-hooks的函数中尝试调用useQuery [英] Trying call useQuery in function with react-apollo-hooks

问题描述

我想在需要时调用useQuery

I want to call useQuery whenever I need it,

但是useQuery不能在函数内部.

but useQuery can not inside the function.

我尝试的代码是:

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?

How do I call useQuery multiple times?

我可以随时叫它吗?

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

I have looked for several sites, but I could not find a solutions.

推荐答案

useQuery 是一个声明性的React Hook.从经典的意义上讲，它并不是用来接收数据的.首先，请确保了解React Hook或暂时不使用它们(Stackoverflow上的问题有90％是因为人们试图一次学习太多东西而发生的).Apollo文档对于使用渲染道具的官方 react-apollo 软件包非常有用.这也一样有效，一旦您了解了Apollo Client 和挂钩，就可以进行一些重构.因此，您的问题的答案是:

useQuery is a declarative React Hook. It is not meant to be called in the sense of a classic function to receive data. First, make sure to understand React Hooks or simply not use them for now (90% of questions on Stackoverflow happen because people try to learn too many things at once). The Apollo documentation is very good for the official react-apollo package, which uses render props. This works just as well and once you have understood Apollo Client and Hooks you can go for a little refactor. So the answers to your questions:

如何多次调用useQuery?

How do I call useQuery multiple times?

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

You don't call it multiple times. The component will automatically rerender when the query result is available or gets updated.

我可以随时叫它吗?

Can I call it whenever I want?

否，只能在顶层调用钩子.而是从上部作用域(关闭)在您的函数中提供数据.

No, hooks can only be called on the top level. Instead, the data is available in your function from the upper scope (closure).

您的 updateInformation 应该可能是一个更新应用程序缓存的突变，由于它已订阅"，因此再次触发了React组件的重新渲染.查询.在大多数情况下，更新是完全自动进行的，因为Apollo会通过 __ typename 和 id 的组合来标识实体.以下是一些伪代码，说明了突变如何与突变一起工作:

Your updateInformation should probably be a mutation that updates the application's cache, which again triggers a rerender of the React component because it is "subscribed" to the query. In most cases, the update happens fully automatically because Apollo will identify entities by a combination of __typename and id. Here's some pseudocode that illustrates how mutations work together with mutations:

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
  );
}

现在，如果用户名通过突变更改，则Apollo将自动更新缓存并触发组件的重新呈现.然后，该组件将自动显示新数据.欢迎使用GraphQL的强大功能！

Now if the name of a user changes via the mutation Apollo will automatically update the cache und trigger a rerender of the component. Then the component will automatically display the new data. Welcome to the power of GraphQL!

这篇关于在带有react-apollo-hooks的函数中尝试调用useQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！