Prevent infinite loop with useQuery

[chanm003]

I am using 'apollo-link-error' to centrally log errors to the console. But I wanted to also from that same location in the code, use 'react-toast-notifications' to render an error message to the end user. The issue is that this second library changes state higher up on the component tree, and forces re-renders down the component tree, resulting in toast notifications being sent in an infinite loop.

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 simulate a network or GQL error, to something invalid as shown below, my issue can be replicated:

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