Clarification on Handling Multiple Mutations with the Same Mutation Key in Offline-First App

[jahirfiquitiva]

We're creating an app that works offline-first.
We're defining default mutations for our app, each with a default mutation key.

Let's say we have tasks, and we have the create, update and delete mutations.

So, we would have 3 default mutations each one with one of the following mutation keys:

• ['tasks', 'create']
• ['tasks', 'update']
• ['tasks', 'delete']

Now, let's say our user is offline, and does this:

• Task 1 and 2 existed
• Task 3 was created
• Task 1 content is updated
• Task 2 content is updated
• Task 3 content is updated
• Task 2 content is updated again
• Task 1 is deleted

Question 1:
Is TanStack Query able to identify the 4 update mutations independently (separating one from the other), and resuming each when the user is back online, even though they all have the same mutationKey (['tasks', 'update'])?

Question 2: (If question 1 answer is no)
Would it be required, then, that we add the task id to the mutation key to help TanStack Query identify them?
Something like:

useMutation({
	mutationKey: ['tasks', 'update', taskId]
});

Is there a better approach to this?

Question 3:
Will the second update mutation on task 2 overwrite its first mutation, meaning the first mutation would not be executed when the user is back online?

---

I personally think that given this explanation for what the mutationKey is for, and since it's optional, we probably do not need to set a unique mutationKey for every mutation and that they would be resumed normally.

And also because when we use/do queryClient.getMutationCache(), even if we filter mutations with a given mutationKey (let's say ['tasks', 'update']) each mutation has a unique mutationId even if there's multiple mutations with the same mutationKey

---

Thanks in advance!

[TkDodo]

Is TanStack Query able to identify the 4 update mutations independently (separating one from the other), and resuming each when the user is back online, even though they all have the same mutationKey (['tasks', 'update'])?

yes. order of resuming is guaranteed to be the same as how they were executed, however, all mutations will run in parallel (as they also would when you are online). If you want them to run in serial, you need scoped mutations:

https://tanstack.com/query/latest/docs/framework/react/guides/mutations#mutation-scopes