Reset store after logout with Apollo client

Question

I\'m trying to reset the store after logout in my react-apollo application.

So I\'ve created a method called \"logout\" which is called when I click on a button (and pas

Answer 1

you can use useApolloClient to access apollo client.

import { useApolloClient } from "@apollo/client";

const client = useApolloClient();

client.clearStore();

Answer 2

You were very close!

Instead of client.resetStore() it should have been this.props.client.resetStore()

withApollo() will create a new component which passes in an instance of ApolloClient as a client prop.

import { withApollo } from 'react-apollo';

class Layout extends Component {
  ...
  logout = () => {
    this.props.client.resetStore();
    alert("YOUHOU");
  }
  ...
}

export default withApollo(Layout);

For those unsure about the differences between resetStore and clearStore:

resetStore()

Resets your entire store by clearing out your cache and then re-executing all of your active queries. This makes it so that you may guarantee that there is no data left in your store from a time before you called this method.

clearStore()

Remove all data from the store. Unlike resetStore, clearStore will not refetch any active queries.

Answer 3

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.

Answer 4

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