javascript - 尝试使用 react-apollo-hooks 在函数中调用 useQuery

Question

我想在需要的时候调用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？

我可以随时调用它吗？

我找了几个网站，但找不到解决方案。

Answer 1

来自 Apollo 文档

When React mounts and renders a component that calls the useQuery hook, Apollo Client automatically executes the specified query. But what if you want to execute a query in response to a different event, such as a user clicking a button?

The useLazyQuery hook is perfect for executing queries in response to events other than component rendering

我建议 useLazyQuery .简单来说，useQuery将在您的组件呈现时运行，您可以使用 skip 选项跳过初始运行。并且有一些方法可以随时重新获取/获取更多数据。或者您可以坚持使用 useLazyQuery

例如，如果你想在只有用户点击按钮或滚动到底部时获取数据，那么你可以使用 useLazyQuery 钩子(Hook)。