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

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

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

Answer 1

您已经正确地确定了挂钩需要位于顶层的问题。将useQuery放在useEffect中也会导致同样的问题。

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

Answer 2

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

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

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

how can I fetch data from useQuery hook after a form submission in Apollo?

reactjs

react-apollo