Reset store after logout with Apollo client

问题

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

回答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.

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

回答3:

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.

来源：https://stackoverflow.com/questions/48887480/reset-store-after-logout-with-apollo-client

标签

reactjs

apollo

react-apollo

apollo-client