使用Tanstack Query useMutation+Axios发送带路径参数PUT请求报错

错误根源 #

你遇到的TS报错和功能问题，核心原因有两个：

1. mutationFn参数定义不符合TanStack Query规则：TanStack Query的mutationFn仅支持接收单个参数，你定义的(productId: string, newProduct: any)是错误写法，这会导致类型推导混乱，TS误将配置对象判定为MutationKey类型，进而抛出mutationKey属性不存在的错误。
2. axios请求格式错误：axios.put的第二个参数直接是请求体，无需把newProduct包在data对象里（除非后端明确要求这种嵌套格式）。

修正后的代码 #

方案1：将参数合并为单个对象（通用写法） #

import { useMutation, useQueryClient } from '@tanstack/react-query';
import axiosPrivate from './your-axios-path';

// 定义参数类型（建议替换any为具体产品类型）
type UpdateProductPayload = {
  productId: string;
  newProduct: any;
};

export function useUpdateProductByIdMutation() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationKey: ['updateProduct'],
    mutationFn: ({ productId, newProduct }: UpdateProductPayload) => {
      return axiosPrivate.put(`/admin/products/${productId}`, newProduct);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['getAllProducts'] });
    },
  });
}

使用方式：

const updateProductMutation = useUpdateProductByIdMutation();

// 调用时传入合并后的对象
updateProductMutation.mutate({
  productId: 'prod-123',
  newProduct: { name: '更新后的产品名', price: 199 },
});

方案2：将productId作为钩子参数传入（更精准的mutationKey） #

如果希望每个产品的更新操作拥有独立的mutationKey，可以把productId作为钩子的入参：

import { useMutation, useQueryClient } from '@tanstack/react-query';
import axiosPrivate from './your-axios-path';

export function useUpdateProductByIdMutation(productId: string) {
  const queryClient = useQueryClient();

  return useMutation({
    mutationKey: ['updateProduct', productId], // 绑定具体产品ID
    mutationFn: (newProduct: any) => {
      return axiosPrivate.put(`/admin/products/${productId}`, newProduct);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['getAllProducts'] });
    },
  });
}

使用方式：

// 传入目标产品ID初始化钩子
const updateProductMutation = useUpdateProductByIdMutation('prod-123');

// 调用时仅传入更新数据
updateProductMutation.mutate({ name: '更新后的产品名', price: 199 });

关于路径参数的疑问 #

TanStack Query完全支持在mutation中使用路径参数，问题并非出在路径参数本身，而是你错误地将多个参数直接传入mutationFn。只要把路径参数和更新数据合并为单个参数（对象或其他结构），就能正常使用。

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