如何解决React Query中动态传递导航Query Key的类型错误？

1. 修正自定义Hook的定义，接收动态Query Key参数 #

首先在useform.ts中，修改useUpdateSurveyForm，让它接受一个包含navigationQueryKey的配置参数，并添加对应的类型定义，确保类型匹配：

// useform.ts
import { useMutation, useQueryClient } from '@tanstack/react-query';

// 定义Hook的参数类型，支持string或string数组（适配react-query的queryKey格式）
type UseUpdateSurveyFormProps = {
  navigationQueryKey: string | string[];
};

export function useUpdateSurveyForm(props: UseUpdateSurveyFormProps) {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (payload: SurveyUpdatePayload) => {
      // 这里是你的Survey更新API调用逻辑
      return yourSurveyUpdateAPI(payload);
    },
    onSuccess: () => {
      // 动态传入queryKey进行缓存失效
      queryClient.invalidateQueries({ queryKey: Array.isArray(props.navigationQueryKey) 
        ? props.navigationQueryKey 
        : [props.navigationQueryKey] });
    },
  });
}

2. 正确调用Hook并传入参数 #

在plans.ts中，不要在解构Hook返回值时传参，而是在调用Hook时传入navigationQueryKey：

// plans.ts
import { useUpdateSurveyForm } from './useform';

function PlansPage() {
  // 调用Hook时传入动态queryKey
  const updateSurveyMutation = useUpdateSurveyForm({
    navigationQueryKey: "searched-public-survey",
  });

  // 后续使用mutation逻辑，比如：
  // const handleUpdate = (data) => updateSurveyMutation.mutate(data);
}

错误原因说明 #

你之前的报错是因为错误地将navigationqueryKey作为解构Hook返回值的属性，但useMutation返回的UseMutationResult类型根本不存在这个属性。正确的逻辑是让自定义Hook接收外部传入的参数，而非从返回值中解构不存在的属性。

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