Shouldn't onMutate and the mutateFn in useMutation receive the same query data?

[nandcello]

Background

EDIT: I should probably mention I'm using react-beautiful-dnd for the UI. Not sure if relevant at all but 🤷‍♀️
I have a list of data, for example's sake let's say it's a list of todo items:

const todoItems = [
  {
    id: 1,
    label: "Do laundry"
  },
  {
    id: 2,
    label: "Fix bug"
  },
]

When a user reorders the list; I have a function that runs in onMutate:

const reorder = <T,>(list: T[], startIndex: number, endIndex: number) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result;
};

then calls setQueryData (for instant update / optimistic response) passing in the result from the reorder function.

Then, I have the (async) function that I pass in useMutation that basically reorders the list by only updating one item.

The thing is, in the async function that I pass in useMutation, I need to know the unreordered list of todos so I call

...
const previousTodos = queryClient.getQueryData<ITodo[]>("todos")
...

The problem is that since onMutate runs before the async function I passed in useMutation, I'm getting the reordered value from onMutate.

Shouldn't the functions in onMutate and the mutateFn (passed in useMutation) get the same data from getQueryData?

Whole pseudo code

  const reorderTodo = useMutation(
    async ({ source, destination }: IReorderData) => {
      const previousTodos = queryClient.getQueryData<ITodo[]>("todos"); // I'm getting the already reordered todos here when I really need the unreordered one
      try {
        /* workaround for now (see last section)
         queryClient.setQueryData(
           "todos",
           reorder(previousTodos, source, destination)
         );
        */
        // some logic here to update the single item that was reordered ...
        await updateDatabase(...)
      } catch (error) {
        throw error;
      }
    },
    {
      onMutate: ({ source, destination }: IReorderData) => {
        const previousTodos = queryClient.getQueryData<ITodo[]>("todos");
        queryClient.setQueryData(
          "todos",
          reorder(previousTodos, source, destination)
        ); // this sets the query data that is gotten by the previous function passed in useMutation 😢

        return { previousTodos };
      },
      onError: (_error, _, context) => {
        queryClient.setQueryData(
          "todos",
          context.previousTodos
        );
      },
    }
  );

Current workaround

What I'm doing now is instead of calling the synchronous reorder function in onMutate; I'm instead including it (and the call to setQueryData) inside the mutateFn that I'm passing in useMutation. Not sure if there are downsides to this performance wise? I hope I explained my predicament well enough that someone can help me 🙂

[TkDodo]

as you've already found out - onMutate runs before the mutateFn. Both functions are not "receiving" any data - you are reading them from the cache. so if the function that runs first writes data to the cache, I think it's okay that if the function that runs after that will get the latest value if it reads it from that cache.

[nandcello]

Hi @TkDodo thanks for taking the time to read this!

So is there any cons to just put the optimistic response (basically setting the cache data) inside the mutateFn just before the update to the database? Only thing I can think of is not being able to rollback via context in the onError callback.

[TkDodo]

exactly, that would be the drawback - you can't rollback.

The thing is, in the async function that I pass in useMutation, I need to know the unreordered list of todos

I would solve that problem via variables passed to the mutateFn. In the event that triggers the mutation, you can also read data from the cache and pass it, e.g. if it's a button click that triggers it:

<button onClick={() => {
  const currentData = queryClient.getQueryData("todos")
  reorderTodo.mutate({ source, destination, currentData })
}>Click</button>

then, you can optimistically update in the onMutate, but still have access to the old data in the mutateFn. Of course, abstracting this to a custom hook would even hide that from the component:

const useReorderTodos = () => {
  const queryClient = useQueryClient()
  const reorderTodo = useMutation(...)

  return {
    ...reorderTodo,
    mutate: (variables) => {
      const currentData = queryClient.getQueryData("todos")
      reorderTodo.mutate({ ...variables, currentData })
    }
}

[nandcello]

Hey thanks for the response! I figured my problem was a more architectural one than with the package. I was just caught off guard with the up to date queryData (coming from useStates and what not).

I do have this abstracted via hooks. I've implemented something similar to what you suggested as well and it's working well now :)

[TkDodo]

sounds good 👍