React-query: typescript and abstract useMutations?

Question

I have a small app with several kinds of data similar with each other. For example data for labels and statuses. And so the apis are similar too.

Now with react-query, I'm writing many repetitive mutations. All the mutations (add, update, delete) have same structure:

export const useUpdateLabel = () => {
  const queryClient = useQueryClient();
  return useMutation(updateLabel, {
    onSuccess: () => {
      queryClient.invalidateQueries("labels");
      console.log(`Updated`);
    },
    onError: (error) => {
      process.env.NODE_ENV !== "production" && console.error(error);
    },
  });
};

I'm using custom hooks to make the code cleaner, but is there any way to reduce the repetitive codes?

I can do something like:

export const useCustomMutation = (func, key) => {
  const queryClient = useQueryClient();
  return useMutation(func, {
    onSuccess: () => {
      queryClient.invalidateQueries(key);
      console.log(`Updated`);
    },
    onError: (error) => {
      process.env.NODE_ENV !== "production" && console.error(error);
    },
  });
};

but have no idea how to make the types right.

Answer 1

this should work nicely:

import { useMutation, useQueryClient, QueryKey } from 'react-query'

export const useCustomMutation = <TArguments, TResult>(func: (args: TArguments) => Promise<TResult>, key: QueryKey) => {
  const queryClient = useQueryClient();
  return useMutation(func, {
    onSuccess: () => {
      queryClient.invalidateQueries(key);
      console.log(`Updated`);
    },
    onError: (error) => {
      process.env.NODE_ENV !== "production" && console.error(error);
    },
  });
};

link to typescript playground