Is subscribing to cache clearance an idiomatic way of handling user logout?

[audunolsen]

When calling queryClient.clear() nothing really happens in the UI until a re-render comes along. So to "notify" of a logout high up in my app's component tree using only React Query, i use queryCache.subscribe and trigger a re-render based on the correct conditions so that no stale user data is left around anywhere in the UI. However, this feels "smelly". Is it? What's recommended here?

const user = useUser();
const client = useQueryClient();
const [, rerender] = useReducer((prev) => prev + 1, 0);

useEffect(() => {
  const unsub = client.getQueryCache().subscribe((event) => {
    if (event.query.queryKey !== getUserQueryKey) return;
    if (event.type !== 'removed') return;

    rerender();
  });

  return () => unsub();
}, []);

/* … */

[TkDodo]

The way I would handle user logout is:

• logging the user out in the logout button’s click handler
• afterwards:
  • clearing the cache
  • redirect the user to the login page

redirecting should trigger a re-render of some sorts, so when the login page tries to render, it will see that the user is not logged in and will render the login form accordingly.

[audunolsen]

That of course sounds very reasonable, and my specifications may be odd. But we have user data that is referenced higher up in the component tree than the route-provider sits, so the the re-renders caused by navigation does not clear user data higher up the tree, hence the above code.

So maybe there is no "cleaner" solution in my particular case?

[TkDodo]

you can call queryClient.resetQueries(), which will re-set queries to their initial state, and it will immediately inform observers and trigger a re-render. However, this will likely result in queries running and triggering a re-fetch immediately, so I’m not sure that’s what you want either 🤷