When making a mutation request, isn't it possible to cache the state value I want to send? (useCachedMutation)

[brgndyy]

I was wondering if it's possible to prevent a mutation from occurring if the state value has not changed, especially in situations where pressing a button that holds a state value causes hundreds of data changes on the server.

So, I created a utility function called compareDeepEqual for deep comparison and a custom hook called useCachedMutate using useState.

import { useState, useCallback } from 'react';
import {
  MutateOptions,
  useMutation,
  UseMutationOptions,
  UseMutationResult,
} from '@tanstack/react-query';
import compareDeepEqual from '@/_utils/compareDeepEqual';

interface CachedMutationOptions<TVariables, TData, TError>
  extends UseMutationOptions<TData, TError, TVariables> {
  initialValue: TVariables;
  equalityFn?: (a: TVariables, b: TVariables) => boolean;
}

export const useCachedMutation = <TData, TError, TVariables>(
  mutationFn: (variables: TVariables) => Promise<TData>,
  options: CachedMutationOptions<TVariables, TData, TError>,
): UseMutationResult<TData, TError, TVariables> => {
  const { initialValue, equalityFn = compareDeepEqual, ...mutationOptions } = options;
  const [previousVariables, setPreviousVariables] = useState<TVariables>(initialValue);

  const mutation = useMutation<TData, TError, TVariables>({
    mutationFn,
    ...mutationOptions,
  });

  const cachedMutate = useCallback(
    (variables: TVariables, options?: MutateOptions<TData, TError, TVariables>) => {
      if (equalityFn(previousVariables, variables)) {
        console.error('no change');
        if (mutationOptions.onSettled) {
          mutationOptions.onSettled(undefined, null, variables, undefined);
        }
        return;
      }
      setPreviousVariables(variables);
      mutation.mutate(variables, options);
    },
    [previousVariables, equalityFn, mutation, mutationOptions],
  );

  return {
    ...mutation,
    mutate: cachedMutate,
  };
};

- compareDeepEqaul

const isObject = (obj: any): boolean => obj !== null && typeof obj === 'object';

const compareDeepEqual = (obj1: any, obj2: any, seen = new WeakMap()): boolean => {
  if (obj1 === obj2) {
    return true;
  }

  if (!isObject(obj1) || !isObject(obj2)) {
    return false;
  }

  if (seen.has(obj1)) {
    return seen.get(obj1) === obj2;
  }

  seen.set(obj1, obj2);

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (const key of keys1) {
    if (!keys2.includes(key)) {
      return false;
    }

    if (!compareDeepEqual(obj1[key], obj2[key], seen)) {
      return false;
    }
  }

  if (obj1 instanceof Date && obj2 instanceof Date) {
    return obj1.getTime() === obj2.getTime();
  }

  if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
    return obj1.toString() === obj2.toString();
  }

  if (obj1 instanceof Map && obj2 instanceof Map) {
    if (obj1.size !== obj2.size) {
      return false;
    }
    for (const [key, value] of obj1.entries()) {
      if (!obj2.has(key) || !compareDeepEqual(value, obj2.get(key), seen)) {
        return false;
      }
    }
  }

  if (obj1 instanceof Set && obj2 instanceof Set) {
    if (obj1.size !== obj2.size) {
      return false;
    }
    for (const value of obj1.values()) {
      if (!obj2.has(value)) {
        return false;
      }
    }
  }

  return true;
};

export default compareDeepEqual;

- How to use

  const { mutate: changeChordSettingMutation, isPending } = useCachedMutation(
    changeUserChordSetting, // mutateFn
    {
      initialValue: { value1, value2},
      onError: () => {
        //
      },
      onSuccess: () => {
       //
      },
      onSettled: () => {
        //
      },
    },
  );

I believe that by not executing the mutation at all when the state value is the same as before, it can save a lot of resources.

This is what I have created as an experiment. Does Tanstack Query have such a built-in feature?

Or is there a better way to achieve this?

If not, I think it would be beneficial to have such a mutation hook. Thank you.

[TkDodo]

Does Tanstack Query have such a built-in feature?

no. For mutations, the mindset is: If you don't want it to execute, don't invoke .mutate

[brgndyy]

While it's true that if I don't want a mutation to execute, I simply shouldn't call .mutate, there are scenarios where a "cache mutation" feature could be beneficial. For example, if a user action, like clicking a button, triggers a mutation, it might be redundant to send the same data if nothing has changed. Implementing a check to avoid unnecessary mutations can improve performance and prevent redundant API calls, especially in cases where user interaction is mandatory.