React-Query：打字稿和抽象的用途？

Question

我有一个小型应用程序，彼此之间有几种类似的数据。例如标签和状态的数据。因此，API也很相似。

现在，使用React-Query，我正在写许多重复的突变。所有的突变（添加，更新，删除）都具有相同的结构：

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);
    },
  });
};

我正在使用自定义钩子使代码清洁器，但是有什么方法可以减少重复代码？

我可以做类似的事情：

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);
    },
  });
};

但是不知道如何正确制作类型。

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);
    },
  });
};