TanStackT
TanStack•11mo ago•
57 replies
static-pink

Batching invalidation updates

Hey there !

Given the following code :

const mutation = useMutation({
  mutationFn: async () => {},
  onSuccess: async () => {
    await Promise.all([
      queryClient.invalidateQueries({
        // This query has hardcoded 1s execution time
        queryKey: letterQueryOption().queryKey,
      }),
      queryClient.invalidateQueries({
        // This query has hardcoded 2s execution time
        queryKey: numberQueryOption().queryKey,
      }),
    ]);
  },
});
`

The 1st revalidating query takes 1s to refetch, the 2nd takes 2 seconds

At the moment, when executing the mutation, The UI updates 2 times : after 1s, and after 2s.

Is there a way to "batch" the things wrapped in Promise.all to only render the UI after the longest invalidation is done ?

For some context : I recently migrated my Remix app to React Query, and "page stability" is the only thing that's missing from what I had with Remix 🙂

(Also, it's going to be one thing I'll be talking about at React Paris, so I'd like to make sure I'm not saying stupid things ahah!)
Was this page helpful?