Optimizing API Mutations with React Query and Hono API

hono-mutation.ts

import { toast } from "sonner";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { InferRequestType, InferResponseType } from "hono";
import { hono_api } from "@/providers/core/server/react";
import { useRouter } from "next/navigation";

type MutationOptions<TRoute extends keyof typeof hono_api> = {
  route: TRoute;
  method: keyof (typeof hono_api)[TRoute];
  successMessage?: string;
  errorMessage?: string;
  onSuccessCallback?: (data: any) => void;
  invalidateQueries?: string[];
};

export const useRpcMutation = <TRoute extends keyof typeof hono_api.api>({
  route,
  method,
  successMessage = "Operation successful",
  errorMessage = "Operation failed",
  onSuccessCallback,
  invalidateQueries = [],
}: MutationOptions<TRoute>) => {
  const queryClient = useQueryClient();
  const router = useRouter();

  type ResponseType = InferResponseType<(typeof hono_api.api)[TRoute][keyof (typeof hono_api.api)[TRoute]]>;
  type RequestType = InferRequestType<(typeof hono_api.api)[TRoute][keyof (typeof hono_api.api)[TRoute]]>;

  const mutation = useMutation<ResponseType, Error, { json: RequestType }>({
    mutationFn: async ({ json }) => {
      // @ts-ignore - Dynamic route and method handling
      const response = await hono_api.api[route][method]({ json }) ;

      if (!response.ok) {
        throw new Error(errorMessage);
      }

      return response.json();
    },
    onSuccess: (data) => {
      toast.success(successMessage);
      router.refresh();

      invalidateQueries.forEach(queryKey => {
        queryClient.invalidateQueries({ queryKey: [queryKey] });
      });

      onSuccessCallback?.(data);
    },
    onError: () => {
      toast.error(errorMessage);
    },
  });

  return mutation;
};