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 passed by the 'onDisconnect' props).

To do that I've tried to follow this example : https://www.apollographql.com/docs/react/recipes/authentication.html

But in my case I want LayoutComponent as HOC (and it's without graphQL Query).

Here is my component :

import React, {Component} from 'react';
import { withApollo, graphql } from 'react-apollo';
import { ApolloClient } from 'apollo-client';

import AppBar from 'material-ui/AppBar';
import Sidebar from 'Sidebar/Sidebar';
import RightMenu from 'RightMenu/RightMenu';

class Layout extends Component {
constructor(props) {
    super(props);        
}

logout = () => {
    client.resetStore();
    alert("YOUHOU");
}

render() {
    return (
        <div>
            <AppBar title="myApp" iconElementRight={<RightMenu onDisconnect={ this.logout() } />} />
        </div>
    );
}
}

export default withApollo(Layout);

The issue here is that 'client' is not defined and I can't logout properly. Do you have any idea to help me to handle this situation or an example/best practices to logout from apollo client ?

Thanks by advance

Crispas

Finally it was just necessary to add this.props.client.resetStore to reset the store properly... – Crispas

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

You're right for the refetch of all active queries but it seems that the store is truly reset with this method, as I read in apollo graphql documentation : apollographql.com/docs/react/recipes/… – Crispas

Answer 1

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.

Obstipation

None of these work for me, the data still persists inside my client cache. – Fallonfallout

Answer 2

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

Kinney

Answer 3

you can use useApolloClient to access apollo client.

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

const client = useApolloClient();

client.clearStore();

Lasagne

Answer 4

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.

Shrewmouse

withApollo is deprecated. Use useApolloClient now. – Abacist