How do I stop a mutation from updating state

[nickgrealy]

Aside from the other mutation questions around cancelling inflight mutation updates...

I was wondering if mutations had the ability to not trigger a state update.

In my scenario, I have a frequent task (i.e. mouse hover action), and I only want to apply the mutation if the data has changed (e.g. hovering over a new element).

The problem is, the (parent) React Component state is updating every time the useDoFrequentThing.mutate({ ... }) hook is called.

I can move the logic to conditionally call .mutate() to outside of the mutation - which reduces the constant state updates.
However, I'd prefer to have the conditional logic inside the mutation, as it's called from numerous locations.

Is there a way to do this?

const useDoFrequentThing = () => {
  return useMutation({
    mutationFn: async (): Promise<void> => {
      // optionally apply the change - if no change is applied, then do not refresh the parent state
    },
  });
};

e.g.

/** hook to clear the last element seen  */
const useClearLastElement = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async ({ abort }): Promise<void> => {
      // conditionally apply change
      if ((queryClient.getQueryData(["lastElement"]) as any).id !== "none") {
        queryClient.setQueryData(["lastElement"], { id: "none" });
      } else {
        // else, no change applied. Can we abort the state update?
        abort()
      }
    },
  });
};

[TkDodo]

calling .mutate() is an imperative action that you can choose not to. So yes, the best way is to not call mutate if you don't want to.

[nickgrealy]

Thanks @TkDodo , obvious answer, but good to call out.

I'm specifically referring to the case, where we've already called the .mutate() function, we're within the control logic and we'd like to ignore applying the state change.

Some examples:

• server responds with a 304 Not Modified - there is no need to trigger a state change, because no change has been applied on the server.
• server responds with a payload that is the same as what exists in the cache - no need to update the cache

I was thinking of something along the lines of the abort signal, but rather than the control flowing from the top down (e.g. react-query instructing the http request to abort), it would be the other way around.

Saying that, it may not be possible, as the wrapper hook (e.g. useClearLastElement()) would still have state changes (SUCCESS -> FETCHING -> SUCCESS) which would trigger a state change, regardless of the payload changing.

I'll close this ticket, but will leave it as a placeholder in case anyone else desires this behaviour.