Prevent a refetch from triggering while a mutation is running?

[VanTanev]

Given the following code:

export const createMutation: UseMutationOptions<
  Todo,
  unknown,
  { title: string; completed?: boolean },
  { optimisticTodo: Todo }
> = {
  mutationKey: 'todos',
  mutationFn: create,
  onMutate: async (todo) => {
    await queryClient.cancelQueries("todos");
    const optimisticTodo: Todo = {
      id: uuid(),
      title: todo.title,
      completed: todo.completed ?? false,
    };
    queryClient.setQueryData<Todo[]>("todos", (todos = []) => [
      ...todos,
      optimisticTodo,
    ]);
    return { optimisticTodo };
  },
  onSuccess: (newTodo, _, ctx) => {
    queryClient.setQueryData<Todo[]>("todos", (todos = []) => {
      return todos.map((todo) =>
        todo.id === ctx?.optimisticTodo.id ? newTodo : todo
      );
    });
  },
  onError: (error, _, context) => {
    queryClient.setQueryData<Todo[]>("todos", (todos = []) =>
      todos.filter((todo) => todo.id !== context?.optimisticTodo?.id)
    );
  },
  onSettled: () => {
    queryCache.invalidateQueries('todos')
  }
};

I end up with the following behavior:

https://swimlanes.io/u/atq5XoEmg

Is it possible to block any todos query from executing while a mutation is executing?

We can only say cancelQueries() at the start of the mutation, but that doesn't prevent another query from triggering while the mutation executes and overwriting the query cache with bad data.

[shamxeed]

Facing a similar issue...

[TkDodo]

I think the best way would be to disable your query if a mutation that could affect it is currently running. you can use the useIsMutating hook to find it, and then use the enabled option, something like:

const todosKey = ['todos']
const useTodos = () => {
  const isMutating = useIsMutating({ mutationKey: todosKey })
  return useQuery(todosKey, fetchTodos, { enabled: isMutating === 0 })
}

keys for useIsMutating are matched fuzzily, but you need to use a mutationKey for your mutations.

a more general but similar approach would be to disable queries globally if any mutation is running

[shamxeed]

Sorry guys... But @TkDodo your last answer seemed a bit confusing to me as I can't find lockQueries method on queryClient hook, please where am I going wrong?

[TkDodo]

It doesn’t exist. It was a proposal for the future :)

[shamxeed]

Okay thanks a lot yaarr!!!! 🙏🏻🙏🏻🙏🏻

[jzxchiang1]

Will this exist in v4?

[Steffen-Samseth]

I just tried this with react-query 3.39.3 and it doesn't seem to work. The original query is immediately invalidated and starts to refetch before the mutation starts, so useIsMutating returns 0. Is this something that has changed in later versions?

[jzxchiang1]

My solution based on this discussion was to add this to useMutation:

  onSettled: () => {
    // Only refetch if no other mutation is running
    if (queryClient.isMutating({mutationKey: todosKey}) === 1) {
      queryCache.invalidateQueries('todos')
    }
  }

[TkDodo]

Will this exist in v4?

no, it won't. I don't think it would solve the underlying problem, which is:

• one mutation starts, locks queries
• a second mutations starts
• first mutation finishes, unlocks and refetches

unless the second mutations double-locks, we would still invalidate.

basically, we have been doing this in user-land lately:

export const useTrackParallelMutations = () => {
    const mutationNumber = React.useRef(0)

    return {
        startOne: () => {
            mutationNumber.current += 1
        },
        endOne: () => {
            if (mutationNumber.current > 0) {
                mutationNumber.current -= 1
            }
        },
        allEnded: () => mutationNumber.current === 0,
    }
}

with that, we can do:

const mutationTracker = useTrackParallelMutations()

useMutation(fn, {
  onMutate: () => mutationTracker.startOne()
  onSettled: () => {
    mutationTracker.endOne()
    if (mutationTracker.allEnded()) {
      queryClient.invalidateQueries(...)
    }
  }
})

My solution based on this discussion was to add this to useMutation:

  onSettled: () => {
    // Only refetch if no other mutation is running
    if (queryClient.isMutating({mutationKey: todosKey}) === 1) {
      queryCache.invalidateQueries('todos')
    }
  }

this one also works, but you'd have to assign keys to all mutations. The useTrackParallelMutations hook only works for when the same custom hook is invoked many times (because it uses the same ref). If you trigger the same mutation from multiple places, checking queryClient.isMutating seems better 👍

[VanTanev]

This is a very good solution; Back in my use case, related mutations were in a single state machine, and I ended up tracking in-flight mutations in the state machine to achieve the same thing. It's great to have a React-native solution as well!