How to use multiple graphql query hooks in single function component in react?

Question

I call multiple graphql query using useQuery. And it's shows error like Too many re-renders. React limits the number of renders to prevent an infinite loop. I know why it came but i don't know how to prevent from this error. This is Functional components

my code here

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

Sorry guys I noob for react.

Don't call hooks inside function or conditions reactjs.org/docs/hooks-overview.html#rules-of-hooks — Abidh
– Abidh, Commented Apr 22, 2020 at 7:39
write this at the top of the component. const { loading, data } = useQuery(payeesQuery); — Abidh
– Abidh, Commented Apr 22, 2020 at 7:41
yeah I write top of the component and didn't use inside a function.... my question is How to use multiple graphql query hooks in single function component? — Krrish
– Krrish, Commented Apr 22, 2020 at 9:17
in the above code the useQuery is called from inside of if condition — Abidh
– Abidh, Commented Apr 22, 2020 at 9:33

Abidh · Accepted Answer · 2020-04-22 09:31:23Z

1

for eg you can use like this

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

}

like this you can write multiple querys in a single component.

answered Apr 22, 2020 at 9:31

Abidh

4672 gold badges5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use multiple graphql query hooks in single function component in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related