Preventing: Store reset while query was in flight (not completed in link chain)

Question

I get this randomly in my Apollo Client code. I'm using the anti-pattern of surrounding all setState with an isMounted flag to prevent attempts to set the state when a component is unmounted or a user is leaving a page. But I still get this

Store reset while query was in flight (not completed in link chain)

What gives?

Checkrein

Answer 1

Bit of a necro-post but this frequently occurs if you call client.resetStore(), which unfortunately is the first suggestion on the Apollo docs when searching for best practices on how to log out.

If you ran into this while trying to implement their solution, note that their docs mention further on that resetStore will cause all active queries to be refetched. If you then have a re-render that causes a second call to resetStore, you'll then reset the store while queries were in flight, causing this error.

What I did to resolve this was a few things:

1. Don't use resetStore. Use clearStore (their documentation suggests this if you don't intend to have the queries refetched)
2. Implement some kind of idempotency control on the logout mechanism. As a naive example

const AuthenticatedComponent = () => {
  const [isLoggingOut, setIsLoggingOut] = useState(false);
  const client = useApolloClient();
  
  const logout = () => {
    if (!isLoggingOut) {
      // or whatever business logic you use to invalidate session
      deleteSession(); 
      client.clearStore();
      setIsLoggingOut(true);
    }
  };
  return (<>
    { /* Whatever else */ }
    <button onClick={logout}> Log Out </button>
  </>)
}

Pebrook