import { queryOptions, useSuspenseQueries, notifyManager, defaultScheduler, useQueryClient, useMutation, } from '@tanstack/react-query'; import { useRef, useCallback } from 'react'; let numbers = 1; let letters = 96; const sleep = (ms: number) => new Promise((resolve) => { setTimeout(resolve, ms); }); const numbersQueryOptions = () => queryOptions({ queryKey: ['numbers'], queryFn: async () => { console.log('Numbers fetching'); numbers += 1; await sleep(500); console.log('Numbers done'); return numbers; }, }); const lettersQueryOptions = () => queryOptions({ queryKey: ['letters'], queryFn: async () => { console.log('Letters fetching'); letters += 1; await sleep(3000); console.log('Letters done'); return String.fromCharCode(letters); }, }); export const useUnsyncedMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: () => Promise.resolve(), onSuccess: async () => { await Promise.all([ queryClient.invalidateQueries({ queryKey: numbersQueryOptions().queryKey, }), queryClient.invalidateQueries({ queryKey: lettersQueryOptions().queryKey, }), ]); }, }); }; const useSyncedMutation = () => { const schedulerRef = useRef<'unlocked' | 'locked'>('unlocked'); const promiseSetRef = useRef(new Set()); const resolveSchedulerUnlockRef = useRef<(_: unknown) => void | null>(null); const rejectSchedulerLockRef = useRef<(_: unknown) => void | null>(null); const queryClient = useQueryClient(); const lock = () => { schedulerRef.current = 'locked'; let promise = new Promise((res, rej) => { resolveSchedulerUnlockRef.current = res; rejectSchedulerLockRef.current = rej; }); notifyManager.setScheduler(async (cb) => { await promise; cb(); schedulerRef.current = 'unlocked'; resolveSchedulerUnlockRef.current = null; rejectSchedulerLockRef.current = null; notifyManager.setScheduler(defaultScheduler); }); }; const synced = async (getPromise: () => Promise) => { if (schedulerRef.current === 'unlocked') { lock(); } const promiseId = Symbol('promise'); promiseSetRef.current.add(promiseId); try { await getPromise(); } catch (e) { (rejectSchedulerLockRef.current as (_: unknown) => void)(e); } finally { promiseSetRef.current.delete(promiseId); if (promiseSetRef.current.size === 0) { (resolveSchedulerUnlockRef.current as (_: unknown) => void)(undefined); } } }; return useMutation({ mutationFn: () => Promise.resolve(), onSuccess: async () => { await synced(async () => { return Promise.allSettled([ queryClient.invalidateQueries({ queryKey: numbersQueryOptions().queryKey, }), queryClient.invalidateQueries({ queryKey: lettersQueryOptions().queryKey, }), ]); }); }, }); }; export const App = () => { const [numbersQuery, lettersQuery] = useSuspenseQueries({ queries: [numbersQueryOptions(), lettersQueryOptions()], }); const { mutate: mutateUnsynced } = useUnsyncedMutation(); const { mutate: mutateSynced } = useSyncedMutation(); return (

Numbers query

          {JSON.stringify(
            {
              status: numbersQuery.status,
              data: numbersQuery.data,
            },
            null,
            2
          )}

Letters query

          {JSON.stringify(
            {
              status: lettersQuery.status,
              data: lettersQuery.data,
            },
            null,
            2
          )}

To reproduce the race condition : click the synced button after 600ms (before 3s)

); };