检查现有的 ApolloClient 实例以清除缓存？

Question

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

Answer 1

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 eg 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.