profile
viewpoint

Ask questionsuseQuery infinite loop re-rendering

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
    }
  }
`;
apollographql/react-apollo

Answer questions ostrebler

Having the same problem. The infinite loop keeps on going even when the component containing the useQuery is unmounted. I have a pollInterval on my query and the query is rerun at that rate.

useful!
source:https://uonfu.com/
Github User Rank List