CODEWITHSUNDEEP
reactjsgraphql
Phil Lucks
Phil Lucks

Reputation: 3953

Check for existing instance of ApolloClient to clear cache?

We have a React/GraphQL app inside of a main "app". When the user logs out we want to clear the GQL cache. However, the logout functionality exists in the wrapper app, not the React app.

When we log back in the cache is not cleared, which needs to be solved. A couple of questions on how to solve this:

1) can we check for a cache when the React app tries to create a new instance? Is there a "version" flag we can add?

const client = new ApolloClient({
  link: authLink.concat(restLink),
  cache: () => {
    if (client.cache) {
      client.cache.reset()
    }
    return new InMemoryCache();
  }
});

2) or can we find the existing client App through any other window or global object? 3) should the react app set the client as part of local state and then compare client with useRef perhaps? If they don't match, then reset?

Open to suggestions...

Upvotes: 1

Views: 675

Answers (1)

Herku
Herku

Reputation: 7666

The official way to clear the cache is calling resetStore in the client instance. You can get the client instance inside of any component within the Apollo context by using e.g. the useApolloClient hook

function MyLogoutButton() {
  const client = useApolloClient();
  const onLogout = () => {
    backend.logout();
    client.resetStore();
  };
  return <button onClick={onLogout}>Logout</button>;
}

Maybe this is doing what you want to do. You seem to be trying to create a new instance of the client, but this is not needed. The resetStore method was build for exactly this use case.

Upvotes: 1

Related Questions