Reset store after logout with Apollo client

If you need to clear your cache and don't want to fetch all active queries you can use:

client.cache.reset()

client being your Apollo client.

Keep in mind that this will NOT trigger the onResetStore event.

client.resetStore() doesn't actually reset the store. It refetches all active queries

Above statement is very correct.

I was also having the logout related problem. After using client.resetStore() It refetched all pending queries, so if you logout the user and remove session token after logout you will get authentication errors.

I used below approach to solve this problem -

<Mutation    mutation={LOGOUT_MUTATION}                 onCompleted={()=> {                  sessionStorage.clear()                  client.clearStore().then(() => {                    client.resetStore();                    history.push('/login')                  });                }}              >                {logout => (                  <button                    onClick={() => {                      logout();                    }}                  >                    Logout <span>{user.userName}</span>                  </button>                )}              </Mutation>

Important part is this function -

onCompleted={()=> {                  sessionStorage.clear(); // or localStorage                  client.clearStore().then(() => {                    client.resetStore();                    history.push('/login') . // redirect user to login page                  });                }}

you can use useApolloClient to access apollo client.

import { useApolloClient } from "@apollo/client";const client = useApolloClient();client.clearStore();