Atomic query invalidation / transaction

Hello everyone !

I am in the process of migrating my Remix app (loader / actions part) to react query and loving it so far. I think the only missing piece is what I call "atomic updates" (or transactions ?).

Currently, let's say I write this code :

useMutation({
  mutationFn: ...,
  onSuccess: () => {
    // Serial or Promise.all does not matter
    await invalidateQueries({ queryKey: ['posts'] })
    await invalidateQueries({ queryKey: ['campaigns'] })
  }
})

useMutation({
  mutationFn: ...,
  onSuccess: () => {
    // Serial or Promise.all does not matter
    await invalidateQueries({ queryKey: ['posts'] })
    await invalidateQueries({ queryKey: ['campaigns'] })
  }
})

useMutation({
  mutationFn: ...,
  onSuccess: () => {
    // Serial or Promise.all does not matter
    await invalidateQueries({ queryKey: ['posts'] })
    await invalidateQueries({ queryKey: ['campaigns'] })
  }
})

useMutation({
  mutationFn: ...,
  onSuccess: () => {
    // Serial or Promise.all does not matter
    await invalidateQueries({ queryKey: ['posts'] })
    await invalidateQueries({ queryKey: ['campaigns'] })
  }
})

The UI would be updated several times (mutation, then posts refreshed / campaigns refreshed).

In the previous version of the app, Remix would wait for all loaders to be refetched to render the current route, leading to a more "stable" experience (ie all changes are committed at once).

Is there some concept that I missed in the docs ? Or is it something that is currently not supported by react query ?

Basically, I would imagine something like this :

useMutation({
  mutationFn: ...,
  onSuccess: () => {
    await queryClient.transaction(() => {
      await invalidateQueries({ queryKey: ['posts'] })
      await invalidateQueries({ queryKey: ['campaigns'] })
    })
    // Now all subscribers are notified of the changes above
  }
})

useMutation({
  mutationFn: ...,
  onSuccess: () => {
    await queryClient.transaction(() => {
      await invalidateQueries({ queryKey: ['posts'] })
      await invalidateQueries({ queryKey: ['campaigns'] })
    })
    // Now all subscribers are notified of the changes above
  }
})

useMutation({
  mutationFn: ...,
  onSuccess: () => {
    await queryClient.transaction(() => {
      await invalidateQueries({ queryKey: ['posts'] })
      await invalidateQueries({ queryKey: ['campaigns'] })
    })
    // Now all subscribers are notified of the changes above
  }
})

useMutation({
  mutationFn: ...,
  onSuccess: () => {
    await queryClient.transaction(() => {
      await invalidateQueries({ queryKey: ['posts'] })
      await invalidateQueries({ queryKey: ['campaigns'] })
    })
    // Now all subscribers are notified of the changes above
  }
})

Hope my explanation is clear (English is not my mothertongue!)

Thanks you all,

Antoine

Atomic query invalidation / transaction

Similar Threads

Similar Threads

Similar Threads