在 Apollo 中提交表单后，如何从 useQuery hook 获取数据？

Question

我在反应功能组件中有一个搜索状态。

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

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

Answer 1

如果您需要执行查询来响应用户操作（例如按下按钮），则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();
};