Reactjs 如何在react中的单个函数组件中使用多个graphql查询挂钩？

我使用useQuery调用多个graphql查询。它显示了错误，比如 太多的重新渲染。React限制渲染的数量以防止无限循环。 我知道它为什么会来，但我不知道如何防止这个错误。这是功能组件

我的代码在这里

  const [categoryList, updateCategoryList] = useState([]);
  const [payeeList, updatePayeeList] = useState([]);

  if (data) {
    const categories = (data.categories as unknown) as Category[];
    if (
      !isEqual(categoryList, categories) ||
      categoryList.length !== categories.length
    ) {
      updateCategoryList([...categories]);
    }
  }

  if (isEmpty(payeeList)) {
    const { loading, data } = useQuery(payeesQuery);
    if (data) {
      const payees = (data.payees as unknown) as Payee[];
      if (!isEqual(payeeList, payees) || payeeList.length !== payees.length) {
        updateCategoryList([...payees]);
      }
    }
  }

---

对不起，伙计们，我没有反应

例如，你可以这样使用

const ExampleComponent = () => {
    const { loading:payeesLoading, data:payeesData } = useQuery(payeesQuery);
    const { loading:secondLoading, data:secondData } = useQuery(secondQuery);

    useEffect(() => { //effect hook for first query

    } ,[payeesData] )

    useEffect(() => { //effect hook for second query

    } ,[secondData] )

    return (<div>
    your contents
    </div>)

}

---

这样，您就可以在一个组件中编写多个查询。

不要在函数或条件中调用钩子，而是将其写在组件的顶部。const{loading，data}=useQueryPayesQuery；只有一个graphql查询。是吗？是的，我写的是组件的顶部，没有在函数中使用。。。。我的问题是如何在单个函数组件中使用多个graphql查询挂钩？在上面的代码中，useQuery是从if条件内部调用的