Global loading state when switching organization with cookie-based auth (React Query v5)

[matinsekhavat]

Hi everyone,
We have a multi-organization dashboard. Authentication is cookie-based and when the user switches organization we call this endpoint:
TypeScriptPOST /v1/auth/switch-organization
{ organization_id: "123", use_cookie: true }
This endpoint sets a new session cookie on the browser.
The problem:
All our data is fetched with React Query (useQuery) in many different pages/components.
When the user clicks "Switch organization":

I need to show loading (skeleton/spinner) immediately in the entire app (even on pages that are already open in background tabs).
I must cancel/invalidate all previous queries so they don’t refetch with the old cookie.
Queries must refetch only after the new cookie is fully set in the browser.
If I call resetQueries / invalidateQueries before the POST → queries refetch with old cookie → wrong 401 or wrong data.
If I call them after the POST → there is a 1–3 second delay where the UI is completely frozen/stale, then suddenly loading appears → very bad UX.

Current attempt (not perfect):
TypeScriptawait queryClient.cancelQueries(); // good, stops old requests
await axios.post('/switch-organization', ...) // sets new cookie
await new Promise(r => setTimeout(r, 2000)); // ugly delay
await queryClient.resetQueries({...}) // now refetches correctly
This works, but the 2-second blank screen feels terrible.
My goal (ideal behavior):

The very moment user clicks → entire app shows loading immediately (global isPending = true)
No request goes out with the old cookie
As soon as new cookie is set → all queries refetch together with the new cookie
Solution must be global → I have 50+ pages, I don’t want to add manual state to every component

I tried:

queryClient.cancelQueries() + resetQueries() → timing issue
Local isSwitching state → works but not global (background pages don’t show loading)
enabled: false on each query → too much boilerplate

Is there a clean, global way in React Query v5 to achieve:

Immediate global loading indicator on org switch
Guaranteed refetch only after new cookie
No per-page code

Thanks a lot!

[matinsekhavat]

i think we need sth like this

BASED ON DOCS:

[queryClient.invalidateQueries](https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientinvalidatequeries)
The invalidateQueries method can be used to invalidate and refetch single or multiple queries in the cache based on their query keys or any other functionally accessible property/state of the query. By default, all matching queries are immediately marked as invalid and active queries are refetched in the background.

If you do not want active queries to refetch, and simply be marked as invalid, you can use the refetchType: 'none' option.

inside the resetQueriesAlso

[matinsekhavat]

try {
await queryClient.resetQueries({
predicate: (query) =>
!query.queryKey.some((key) =>
key?.toString().toLowerCase().includes('organizations')
),
});

        const queries = queryClient.getQueryCache().findAll({
          predicate: (query) =>
            !query.queryKey.some((key) =>
              key?.toString().toLowerCase().includes('organizations')
            ),
        });

        for (const query of queries) {
          if (query.isActive()) {
            query.setState({
              ...query.state,
              data: undefined,
              dataUpdatedAt: 0,
              status: 'pending',
              fetchStatus: 'idle',
            });
          }
        }

        const { data } = await callAxios.post('/v1/auth/switch-organization', {
          organization_id: value,
          use_cookie: true,
        });

        if (!data) {
          toast.error('Error Fetching organization');

          return;
        }
        handleSession(data);
        await queryClient.invalidateQueries({
          predicate: (query) =>
            !query.queryKey.some((key) =>
              key?.toString().toLowerCase().includes('organizations')
            ),
        });
      } catch (error) {
        console.error('Error switching organization:', error);
        //TODO: Handle error properly and show in ui
        toast.error('Error switching organization');
      }
    }}


btw i find this solution is good or better tip?

[TkDodo]

you can show a global loading indicator with useMutationState to just check if your specific mutation is in progress

[mohamadgarmabi]

The cleanest fix is to make the active organization part of every query's identity, instead of fighting cache timing.

1. Put orgId in the query key. When the org changes, every useQuery subscribes to brand-new keys with no cached data, so the whole app goes isPending automatically, background pages included. Old-org entries become inactive, so they never refetch with the new cookie.

With 50+ pages, a small wrapper avoids touching each one:

export function useOrgQuery<T>(options: UseQueryOptions<T>) {
  const orgId = useActiveOrgId() // zustand / context
  return useQuery({ ...options, queryKey: ['org', orgId, ...options.queryKey] })
}

2. Only change orgId after the switch succeeds, so nothing for the new org is requested with the old cookie:

const switchOrg = useMutation({
  mutationKey: ['switch-org'],
  mutationFn: (id: string) =>
    axios.post('/v1/auth/switch-organization', { organization_id: id, use_cookie: true }),
  onMutate: () => queryClient.cancelQueries({ queryKey: ['org'] }),
  onSuccess: (_, id) => {
    const prev = getActiveOrgId()
    setActiveOrgId(id) // every useOrgQuery now points at fresh keys -> pending
    queryClient.removeQueries({ queryKey: ['org', prev] })
  },
})

3. Global indicator during the POST itself (what TkDodo suggested):

const isSwitching = useIsMutating({ mutationKey: ['switch-org'] }) > 0

About the setTimeout(2000): the browser applies Set-Cookie before the request promise resolves, so you shouldn't need a delay. If it looks necessary, something is probably refetching in between (e.g. refetchOnWindowFocus), or the cookie's domain/path doesn't match the API.