How about preventing duplicate calls (useSingleRequestMutation)

[brgndyy]

hello.

I am leaving this post because I wonder what it would be like if there was a mutation to prevent duplicate processing.

In the case of a currently existing mutation, you can prevent duplicate processing with the isPending status value.

However, since this is managed through setState in the React query internal code, a problem occurs in which duplicate processing is not performed properly.

Problems often arise when duplicate requests are made, such as payment buttons. What if there was a mutation that completely solved this problem?

I created a custom mutation that receives the requestId value and handles duplicate requests using it.

I’m telling you this because I wonder what it would be like if it were built into React Query.

- useSingleRequest.ts

const useSingleRequest = () => {
  const apiRequests = useRef<Set<string>>(new Set());

  const startRequest = (requestId: string): boolean => {
    if (apiRequests.current.has(requestId)) {
      console.warn(ERROR_MESSAGE.duplicate_request);
      return false;
    }
    apiRequests.current.add(requestId);
    return true;
  };

  const endRequest = (requestId: string): void => {
    apiRequests.current.delete(requestId);
  };

  return { startRequest, endRequest };
};

export default useSingleRequest;

- useSingleRequestMutation.ts

import { useMutation } from '@tanstack/react-query';
import type { UseMutationResult, UseMutationOptions } from '@tanstack/react-query';
import useSingleRequest from './useSingleRequest';
import { ERROR_MESSAGE } from '@/constants/messages';

interface SingleFlightMutationOptions<TData, TError, TVariables>
  extends UseMutationOptions<TData, TError, TVariables> {
  requestId?: string;
  queryFn: (variables: TVariables) => Promise<TData>;
}

const useSingleRequestMutation = <TData, TError, TVariables = void>(
  options: SingleFlightMutationOptions<TData, TError, TVariables>,
): UseMutationResult<TData, TError, TVariables> => {
  const { startRequest, endRequest } = useSingleRequest();
  const requestId = options?.requestId || 'defaultRequestId';

  return useMutation<TData, TError, TVariables>({
    ...options,
    mutationFn: options.queryFn,
    onMutate: async (variables: TVariables) => {
      const canProceed = startRequest(requestId);
      if (!canProceed) {
        throw new Error(ERROR_MESSAGE.duplicate_request);
      }
      if (options?.onMutate) {
        return await options.onMutate(variables);
      }
    },
    onSuccess: (data: TData, variables: TVariables, context: unknown) => {
      endRequest(requestId);
      if (options?.onSuccess) {
        options.onSuccess(data, variables, context as unknown);
      }
    },
    onError: (error: TError, variables: TVariables, context: unknown) => {
      endRequest(requestId);
      if (options?.onError) {
        options.onError(error, variables, context as unknown);
      }
    },
    onSettled: (
      data: TData | undefined,
      error: TError | null,
      variables: TVariables,
      context: unknown,
    ) => {
      endRequest(requestId);
      if (options?.onSettled) {
        options.onSettled(data, error, variables, context as unknown);
      }
    },
  });
};

export default useSingleRequestMutation;

- Component.tsx

  const { mutate: singleRequestMutation } = useSingleRequestMutation({
    queryFn: postRequest,
    onSuccess: onSuccessFn,
    onError: onErrorFn,
    requestId: "requestId",
  });