在 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的 object，然后查詢其子對象。 我想在查詢之前先找到objectWithID變量，然后根據它的一個參數，有條件地使用它的值，因此我認為useLazyQuery有助於實現這一點。 但是，這會導致無限循環：由於某種原因，它被無數次調用，導致我的網頁崩潰。 我是否錯誤地使用useLazyQuery ？ 我怎樣才能防止這個無限循環？

Answer 1

在這種情況下，您在 render 方法中執行查詢，這意味着它會一直觸發。 相反，請考慮使用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更改時才會更改。