如何将 UseQuery 与 useEffect 一起使用？

Posted 2023-02-21

【中文标题】如何将 UseQuery 与 useEffect 一起使用？

【英文标题】：How to use UseQuery with useEffect?

【发布时间】：2022-01-14 22:20:14

【问题描述】：

如何在 React.UseEffect 中使用 UseQuery？这是我的简单查询

  const allrecord = useQuery(ME, 
    onCompleted: ( meTeacher) => 
      setUser(meIAM);
      getRecords(
        variables: 
          orgId: meIAM.organization.id,
          pagingArg: ,
        ,
      ).then(( data ) => displayRecord(data.record));
    ,
  );
  useEffect(() => 
    console.log(allLocations)
  , []);

【问题讨论】：

能详细解释一下吗？为什么要在 useEffect 中使用它？您面临的问题是什么？

问题是我不知道什么是正确的用法以及如何使用useEffect和useQuery

其实你不需要把useQuery放在useEffect里面。你可以在外面使用它，它很好。

所以如果我想添加另一个，我只需.then(( data ) => displayRecord(data.record), studentRecord(data.record))

【参考方案1】：

Apollo Client useQuery 钩子在组件渲染时自动执行相应的查询。这使得它非常类似于在 useEffect 中执行没有依赖关系的查询。喜欢：

useEffect(() => 
  const data = executeQuery()
, [])

还有一个替代挂钩，useLazyQuery，可用于执行查询以响应某些事件，例如按下按钮。

【参考方案2】：

useQuery 是一个钩子，因此不能在分支下使用。

这意味着您必须在组件内部而不是在分支语句 (if/else/switch/useEffect) 下调用 useQuery。

如果您需要对 useQuery 的结果进行处理，只需使用依赖于该结果的 useEffect