Reset store after logout with Apollo client - reactjs

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

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.

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

Answer 3

you can use useApolloClient to access apollo client.
import { useApolloClient } from "#apollo/client";
const client = useApolloClient();
client.clearStore();

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.