Add artificial delay option for mutations

[lucasmotta]

Hey there,

So after watching this video of Sam Selikoff about artificial delay on mutations, I've been thinking that it would be a great addon for react-query's useMutation hook.

In some situations it would be beneficial for the UX to delay the mutation by a couple ms, so you don't end up in a state where you see a isLoading state blinking because the mutation happened too fast.

I know this can be achieved with mutateAsync, but that adds quite a bit of boilerplate on user land.

So my suggestion is to have an artificialDelay prop that would add this min request time for the mutation:

const mutation = useMutation(postTodo, { artificialDelay: 500 })
// or
mutation.mutate({ id: '1', title: 'Todo title' }, { artificialDelay: 500 })
// or even as a defaultConfig for the QueryClient

---

As pointed by @lukemorales, this can somehow be achieve with this pattern:

mutations: {
  onMutate: async () => waitMilliseconds(800),
},

But that's set globally and the user overrides the onMutate prop, they would have to manually set the waitMilliseconds again.

[TkDodo]

so you don't end up in a state where you see a isLoading state blinking because the mutation happened too fast.

This is definitely not something that I see handled by react-query out of the box:

1. it's a ui problem at best. You can also decide to show a "lazy loading spinner" that only renders itself after 500ms.
2. as you've said, you can do this in onMutate
3. you can also do this on the server. If you think your mutations are too fast, add a sleep(500) there before returning

all of these are imo better options than to increase the api surface to "make things slower". You're the first to complain about things being too fast 😅

[TkDodo]

I watched the video now, I think it's still mostly a ui problem. I would personally show a toast notification that says that things were save successfully (react-hot-toast is really good and can also do loading states). A loading spinner on a button doesn't necessarily give confidence that the save was successful - just that it took some time. What if it takes time and then fails 🤷