尝试使用 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 Hooks 或者暂时不使用它们(Stackoverflow 上 90% 的问题都是因为人们试图一次学习太多东西).Apollo 文档非常适合官方的 react-apollo 包，它使用了渲染道具.这同样有效，一旦您了解了 Apollo 客户端和 Hooks，您就可以进行一些重构.所以你的问题的答案:

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.

我可以随时调用它吗?

不，钩子只能在顶层调用.相反，数据在您的函数中从上层作用域(闭包)可用.

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屋！