Using @apollo/react-hooks, the react app crashes hard on refresh being expired

Question

When I am not logged in I receiving this error:

Unhandled Rejection (Error): GraphQL error: Refresh has expired

And it occurrs in this code block:

  const { loading, error, data } = useQuery(GET_BILLABLE_EVENTS, {
    fetchPolicy: 'no-cache',
    errorPolicy: 'ignore',
    onError: (err) => {
      console.log({ err });
    },
  });
  return <div>hello</div>;

I really want it to be handled gracefully, but it just crashes React and throws the error, despite the error policy and the onError being set in options.

It seems to get stuck in this error loop when create-react-app is restarted.

score 0 · Answer 1 · answered Jun 04 '20 at 02:43

Can't you just check if user isAuthenticated or not before reaching useQuery?

I think you should be able to handle it gracefully by wrapping your component around “error boundary”

From react documentation

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

<ErrorBoundary>
  <App />
</ErrorBoundary>

ErrorBoundary Example

Using @apollo/react-hooks, the react app crashes hard on refresh being expired

1 Answers1