reactjs - 在 Apollo 中提交表单后，如何从 useQuery 钩子(Hook)中获取数据？

Question

我在 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 钩子(Hook)第一规则。我得到的错误是 hooks cannot be used in non react functional component。那么，有什么替代方法我该如何使用它。将 useQuery 放在 useEffect 钩子(Hook)中是否可以，它会在搜索对象更新时重新获取数据？

Answer 1

如果您需要执行查询以响应用户操作，例如按下按钮，您根本不应该使用 useQuery -- 这就是 useLazyQuery是为了。 useLazyQuery Hook 将返回一个元组(就像 useMutation)，它包含一个执行查询的函数和一个包含查询结果的对象。它的使用就像您使用 useMutation 一样，只是它不返回 Promise。

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