apollo-cache-persist: client.clearStore() or client.resetStore() do nothing

The idea to improve that is to hook into InMemory cache clear method and perform persistor clear. It will be little bit hacky and it will work for InMemoryCache but it will provide more seamless behavior that developers will expect.

Please add +1 if you would like to have this in our Roadmap

@wtrocki Thanks!

So for now it looks like I need to manually call persistor.purge() after clearStore(). I need to do the purge deep inside my Logout component in React. The Logout.js example below seems to work but is there any downside?

src/index.js

const cache = new InMemoryCache();
const waitOnCache = persistCache({
  cache,
  storage: window.localStorage,
});
const client = new ApolloClient({
  cache,
});
waitOnCache.then(() => {
  ReactDOM.render(
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>,
    document.getElementById('root'),
  );
});

Logout.js

import React from 'react';
import { useApolloClient } from '@apollo/react-hooks';
import { CachePersistor } from 'apollo-cache-persist';

const Logout = () => {
  const client = useApolloClient();
  const persistor = new CachePersistor({
    cache: client.cache,
    storage: window.localStorage,
  });

  const handleClick = e => {
    e.preventDefault();
    client.clearStore().then(() => {
      persistor.purge().then(
        () => {
          // continue...
        }
      );
    });
  };

  return (
    <a href="/" onClick={handleClick}>
      Log out
    </a>
  );
};

export default Logout;

Even AsyncStorage.clear() did not clear the persistor cache somehow

It happens when clearStore is not awaited. Proper handler:

await client.clearStore()
await persistor.purge()

Can cause issues:

client.clearStore()
persistor.purge()

I think we simply need to hook to cache.clear method and call persistor.purge. This simple fix is going to resolve issue. Any contribution welcome as I would need to review it and approve it

@frederikhors I have done example app to show how this can be done: https://codesandbox.io/embed/basic-apollo-app-hiis7?codemirror=1

1. We need to clear actual cache
2. We need to call persistor after to clear storage

If we do not wait we going to get these nasty timing issues where persistence will be cleared but it can still get hot InMemCache object.

The Logout.js example below seems to work but is there any downside?

No problem with that. The fix that we talking about was to just wrap both into a single method so actual behavior should be the same.

Snippet for logout should look like this

await client.clearStore()
await persistor.purge()
history.push('/');

What will be your Apollo Client version? Apollo client changed a little for localstate stuff and the issue may be there. The version of cache-persist did not change for 2 years.

https://github.com/apollographql/apollo-client/blob/58cb6d5437c00e42487052b727eb30190e31fbad/packages/apollo-client/src/core/QueryManager.ts#L913