How to mutate without re-rendering the same component in which mutation is used?

[dmahajan980]

Hello everyone, I'm creating a mutation which should behave like a fire and forget mutation. However, the mutation results in re-rendering the component when it completes. Is there any way to consume the mutation in such a way that it only fires and not re-renders the component?

Thanks

[TkDodo]

If you don't need the state tracking, just fire a fetch or axios call without react-query :)

[dmahajan980]

@TkDodo thanks for the answer! Unfortunately, the hook that I wanted to refactor was heavily dependent on the ergonomics of useMutation's onError and onMutate hence I created a custom hook for fire and forget mutations:

interface Args<TData, TError, TVariables, TContext> {
  mutationFn: (variables: TVariables) => TData | Promise<TData>;
  retries?: number;
  retryDelay?: number | ((attempt: number) => number);
  onMutate?: (variables: TVariables) => TContext | Promise<TContext>;
  onError?: (error: TError, variables: TVariables, context: TContext) => void;
}

const useFireAndForgetMutation = <TData, TError, TVariables, TContext>({
  mutationFn,
  onError,
  onMutate,
  retries = 3,
  retryDelay = (attempt) => attempt * 1000,
}: Args<TData, TError, TVariables, TContext>) => {
  /**
   * Recursively performs the mutation if the mutation fails. The maximum depth of
   * recursion is dependent on the value of `retryDelay` passed in the argument object.
   */
  const mutateTillEnd = async (
    attempt: number,
    variables: TVariables,
    context: TContext
  ): Promise<TData> => {
    try {
      // Delays the mutation according to the delay value if the attempt is subscequent.
      await new Promise((resolve) => {
        let delay = 0;
        if (attempt > 0) {
          delay =
            typeof retryDelay === 'number' ? retryDelay : retryDelay(attempt);
        }

        setTimeout(resolve, delay);
      });

      // Ideal Case: Perform the mutation without any failure and return result.
      const mutationResult = await mutationFn(variables);
      return mutationResult;
    } catch (error) {
      /**
       * Failure Case: Retry performing the mutation if further attempts are available.
       * Otherwise, return the failed result from the mutation.
       */
      if (attempt < retries - 1) {
        const mutationRetryResult = await mutateTillEnd(
          attempt + 1,
          variables,
          context
        );
        return mutationRetryResult;
      } else {
        // User provided error callback.
        onError(error, variables, context);
        throw error;
      }
    }
  };

  return {
    mutate: async (variables: TVariables) => {
      const context = await onMutate(variables);
      await mutateTillEnd(0, variables, context);
    },
  };
};

The TypeScript definition definitely needs some refactor work but this seems to be working fine for now.