Как использовать несколько хуков запросов graphql в одном компоненте функции в реаги?

Question

Я вызываю несколько graphql query, используя useQuery. И это показывает ошибку как Too many re-renders. React limits the number of renders to prevent an infinite loop. Я знаю, почему это произошло, но я не знаю, как предотвратить эту ошибку. Это Functional components

мой код здесь

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

Извините, ребята, я нуб за реакцию.

Answer 1

Например, вы можете использовать вот так

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

}

вот так вы можете написать несколько запросов в одном компоненте.