React Query v5 useMutation自定义钩子的TypeScript类型错误解决

我为实现关注点分离与复用，封装了基于React Query useMutation的自定义钩子。使用React Query v5.28.14时，TypeScript报错：

Type '(bookData: Shop) => Promise' has no properties in common with type 'UseMutationOptions<Shop, Error, Shop, unknown>'

原代码示例 #

useCustomMutation.ts

import apiClient from "@/services/api/api-client";
import { useMutation } from "@tanstack/react-query";

type Shop = {
  shopCode: string;
  shopName: string;
  mobileNo: string;
  address: string;
};

const createBook = async (bookData: Shop) => {
  const { data } = await apiClient.post("/books", bookData);
  return data;
};

export const useCreateBook = () => {
  return useMutation<Shop, Error, Shop, unknown>(createBook, {
    onSuccess: () => {
      // invalidate the query cache for 'shop'
    },
  });
};

ShopList.ts

const {mutate} = useCustoumMatation()

const onSubmit (data:Shop){
     mutate(data)
}

错误原因与修复方案 #

React Query v5 彻底修改了useMutation的API结构：不再支持将mutation函数作为第一个参数传入，必须把它放在配置对象的mutationFn字段中。同时注意钩子调用的拼写错误。

修正后的useCustomMutation.ts

import apiClient from "@/services/api/api-client";
import { useMutation } from "@tanstack/react-query";

type Shop = {
  shopCode: string;
  shopName: string;
  mobileNo: string;
  address: string;
};

const createBook = async (bookData: Shop) => {
  const { data } = await apiClient.post("/books", bookData);
  return data;
};

export const useCreateBook = () => {
  return useMutation({
    mutationFn: createBook,
    onSuccess: () => {
      // 这里可以添加缓存失效逻辑，比如：
      // queryClient.invalidateQueries({ queryKey: ['shops'] })
    },
  });
};

修正后的ShopList.ts

import { useCreateBook } from './useCustomMutation';
import type { Shop } from './useCustomMutation';

const { mutate } = useCreateBook();

const onSubmit = (data: Shop) => {
  mutate(data);
};

可选：显式指定类型

如果需要手动声明泛型类型（TypeScript通常能自动推导），可以这样写：

export const useCreateBook = () => {
  return useMutation<Shop, Error, Shop, unknown>({
    mutationFn: createBook,
    onSuccess: () => { /* ... */ },
  });
};

内容的提问来源于stack exchange，提问作者Amos