Baike.dev
All toolsAI codingTrendingOpen sourceNewsSubmit
Log in
Back to tool/Back to issues
#3644·react-apollo

useQuery infinite loop re-rendering

Author: chanm003Created Oct 30, 2019Updated Jul 20, 2020

Intended outcome:

The useQuery hook fires. If the GQL results in error, I use a library to raise a toast notification inside of Apollo client's onError callback. This should not cause functional component to re-render.

Actual outcome:

The functional component re-renders. The useQuery hook issues another network request. Apollo client's onError callback runs, another toast fires. Resulting in infinite loop of network request, error, and toast.

This might be similar to the class-based components infinite loop problem that could occur when a component's render method invokes setState resulting in infinite loop of re-renders

How to reproduce the issue:

Following code example works: https://codesandbox.io/s/blissful-hypatia-9qsoy?fontsize=14

The below GQL is valid and works as I intend:

const GET_ITEMS = gql`
  {
    continents {
      name
    }
  }
`;

but if you were to alter the GQL to something invalid as shown below, the infinite loop issue occurs:

const GET_ITEMS = gql`
  {
    invalidGQL {
      name
    }
  }
`;

Source: apollographql/react-apollo

View original on GitHubView discussion on GitHub