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

Question

in React using graphql, There is this issue I face where I get prompted with

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

when I log out my user.

the code is

  const onSignout = async () => {
    removeToken();
    client.cache.reset();
    await client.resetStore();
    history.push('/');
  };

I followed the many issues on github like https://github.com/apollographql/apollo-client/issues/3766

and changed to

client.stop();
client.cache.reset();
client.resetStore();

but still happen

I checked the network, no query are pending when login out.

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

Answer 1

What I've found caused this is that the resetStore causes all queries to be refetched per the documentation, which if you then have a rerender that causes the resetStore call to be called again, you then have reset the store while the queries where in flight.

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>
  </>)
}