NextJS中react-query预取数据报错：QueryClient.prefetchQuery不是函数

错误原因 #

你直接通过QueryClient类调用了prefetchQuery方法，但这个方法是实例方法，不属于类的静态方法，必须通过QueryClient的实例来调用，而非类本身。

修复步骤 #

1. 从@tanstack/react-query导入useQueryClient钩子
2. 在组件内部获取QueryClient的实例
3. 使用该实例调用prefetchQuery方法

修改后的代码 #

import { useMutation, useQueryClient } from '@tanstack/react-query'; // 新增useQueryClient导入

const formReducer = (state, event) => {
  return {
    ...state,
    [event.target.name]: event.target.value,
  };
};

export default function InsertForm() {
  const [formData, setFormData] = useReducer(formReducer, {});
  const queryClient = useQueryClient(); // 获取QueryClient实例
  const addMutation = useMutation(addOneUser,{
    onSuccess: async () =>{
       // 使用实例调用prefetchQuery
       await queryClient.prefetchQuery(['user'], getUser);
    }
  })
  const handleSubmit = (e) => {
    e.preventDefault();
    if(Object.keys(formData).length == 0) return console.log("Tsy misy donnes ao @ le formulaire");
    
    let{nom, mail, dept, status }= formData;

    const model={
      nom,
      avatar:`https://randomuser.me/api/portraits/men/${Math.floor(Math.random()*10)}.jpg`,
      mail,
      dept,
      status:status ?? "Active"
    }

    console.log(model,"mandeha tsara ny modelisation");
    addMutation.mutate(model); 
  };
}

额外说明 #

如果需要在组件外部（比如API路由、工具函数）执行预取操作，要确保使用的是你自己创建并导出的QueryClient实例，而非类本身：

// 在utils/queryClient.js中创建并导出实例
import { QueryClient } from '@tanstack/react-query';

export const queryClient = new QueryClient();

// 在其他文件中导入实例使用
import { queryClient } from '../utils/queryClient';

await queryClient.prefetchQuery(['user'], getUser);

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