在 React + Apollo/GraphQL 中使用 useLazyQuery 时出现无限循环？

Question

我的代码目前看起来是这样的：

const { ID } = useParams();
const [getObjects, {loading, data}] = useLazyQuery(GET_OBJECTS_BY_ID);

const objectWithID = props.data.find(datum => datum._id == ID);
if (objectWithID.conditional) {
    getObjects({variables: {objectIds: objectWithID.subObjects}});
    //Do a bunch of other stuff including a separate render
}
else {...}

我实际上在做的是首先找到具有指定 ID 的对象，然后查询其子对象。我想在查询之前先找到 objectWithID 变量，然后根据它的一个参数，有条件地使用它的值，因此我认为 useLazyQuery 有助于实现这一点。但是，这会导致无限循环：由于某种原因，它被无限次调用，导致我的网页崩溃。我使用 useLazyQuery 不正确吗？我怎样才能防止这种无限循环？

Answer 1

在这种情况下，您在渲染方法中执行查询，这意味着它会一直触发。相反，请考虑使用 useEffect 挂钩：

const { ID } = useParams();
const [getObjects, { loading, data }] = useLazyQuery(GET_OBJECTS_BY_ID);

const objectWithID = useMemo(() => {
  return props.data.find((datum) => datum._id == ID);
}, [props.data, ID]);

useEffect(() => {
  if (objectWithID.conditional) {
    getObjects({ variables: { objectIds: objectWithID.subObjects } });
  }
}, [getObjects, objectWithID]);

return objectWithID.conditional ? (
  <>Render one thing</>
) : (
  <>Render the other thing</>
);

请注意，我还添加了一个 useMemo 挂钩来记住 objectWithID 值，因此它仅在 props.data 或 ID 更改时更改。

在 React + Apollo/GraphQL 中使用 useLazyQuery 时出现无限循环？

Infinite loop when using useLazyQuery in React + Apollo/GraphQL?

javascript

apollo

reactjs

react-hooks