apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.38k stars 2.66k forks source link

Skipped Query returns outdated data after cache clearing #11804

Closed MardanovaA closed 6 months ago

MardanovaA commented 7 months ago

I have query to get user data (roles, username)

   const token = getCookie(CookieNames.TOKEN);
   const { data, refetch, loading } = useUserGetCurrentQuery({
     skip: !token,
   });

Also I have storeClearing on logout

export const logout = async () => {
  const apolloClient = initializeApollo();

  removeCookie(CookieNames.TOKEN);
  localStorage.deleteItem('refreshToken');

  logoutEvent();

  await apolloClient.clearStore();
  await redirect({ route: routes.AUTH });
};

After cache clearing on auth page we call getUserData hook. As token is empty I expected, what query will skipped and data would be undefined. But it still returns old data, cache is clear though. It is make bug: when I logout, changing userData on database and login again - then I have outdated data.

Any help please, I blew my mind :exploding_head:

phryneas commented 7 months ago

If your hook was mounted all that time, that is possible.

Generally, cache updates are forwarded to the hooks, but skipping a hook also means skipping any updates from the cache - including a cache reset.

If the component with that hook would be unmounted and remounted, it would start with a blank state, but since it seems to stay mounted in your case, the moment you "un-skip", it will pick back up with the last state it had and wait for future cache updates.

MardanovaA commented 6 months ago

@phryneas Thank you very much! I spent 3 days searching for this information. Is there any possibility using Apollo to update this query so that it returns undefined? Or just remount?

phryneas commented 6 months ago

I think remounting is the safest bet you have - just put a key on a component very far up in your component tree and change that. That also ensures you don't have other stale local component state from the last user session.

MardanovaA commented 6 months ago

Thank you! I'll try this variant

phryneas commented 6 months ago

I think I can close this issue then - but please feel free to open a new issue in the future :)

github-actions[bot] commented 6 months ago

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

github-actions[bot] commented 5 months ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.