在 Apollo 中提交表单后，如何从 useQuery 挂钩中获取数据？答案

【问题标题】：how can I fetch data from useQuery hook after a form submission in Apollo?在 Apollo 中提交表单后，如何从 useQuery 挂钩中获取数据？
【发布时间】：2020-07-10 15:01:21
【问题描述】：

我在 react 函数组件中有一个搜索状态。

  const [search, setSearch] = React.useState({
    orgName: "",
    repoName: ""
  });

所以，当用户提交表单时。我需要从搜索对象中获取数据。我所做的是：

const handleSearch = (e) => {
        e.preventDefault();
        const {loading, data, error} = useQuery(SEARCH_REPO, {
            variables : {orgName : search.orgName, repoName: search.repoName}
        });
  };

这违反了 react hooks first 规则。我得到的错误是hooks cannot be used in non react functional component。那么，我该如何使用它。是否可以将 useQuery 放在 useEffect 挂钩中，以便在搜索对象更新时重新获取数据？

【问题讨论】：

标签： reactjs react-apollo

【解决方案1】：

您已经正确识别了问题，因为钩子需要位于顶层。将 useQuery 放入 useEffect 会导致同样的问题。

使用您的事件处理程序，您可以执行一些操作，例如将 useQuery 放在顶层并在处理程序中调用 refetch（它从 useQuery 返回的第四件事）。如果您知道您的组件将根据事件进行更新，那么仅让 useQuery 在顶层（但不在 useEffect 中）获取数据也是有效的。

【讨论】：

你能给我举个例子吗？它也会对其他人有所帮助。文档是否也讨论过这个第四个参数？
是的，如果您查看 Apollo 的 useQuery 文档，您会看到他们讨论 refetch link 您可以从原始帖子中重新获取您试图在 useQuery 中传递的变量参数

【解决方案2】：

如果您需要执行查询以响应用户操作（例如按下按钮），则根本不应该使用 useQuery —— 这就是 useLazyQuery 的用途。 useLazyQuery 钩子将返回一个元组（就像useMutation），它由一个执行查询的函数和一个带有查询结果的对象组成。它的使用方式与您使用 useMutation 一样，只是它不返回 Promise。

const [search, {loading, data, error}] = useLazyQuery(SEARCH_REPO, {
  variables : {orgName : search.orgName, repoName: search.repoName}
});
const handleSearch = (e) => {
  e.preventDefault();
  search();
};

【讨论】：

哦，好吧。这实际上是我想要的。非常感谢。