在Kubb中配置TanStack Query v5基础URL的问题咨询

核心问题分析 #

你的全局queryFn没执行，是因为Kubb生成的TanStack Query钩子已经内置了专属的请求逻辑，优先级高于你在QueryClient默认配置里定义的全局queryFn，所以你的console.log根本不会触发。

另外，新版Kubb确实移除了旧版的baseURL配置项，得换正确的方式配置接口地址。

1. 正确配置BaseURL（解决localhost 404问题） #

直接在Kubb配置文件里通过插件关联你的Axios实例，让生成的钩子自动使用带目标BaseURL的请求工具：

// kubb.config.ts
import { defineConfig } from '@kubb/core'
import { pluginTanstackQuery } from '@kubb/plugin-tanstack-query'
import { pluginAxios } from '@kubb/plugin-axios'

export default defineConfig({
  input: './你的接口文档.yaml',
  output: {
    path: './src/api',
  },
  plugins: [
    pluginAxios({
      output: {
        path: 'axiosInstance.ts',
      },
      // 直接在这里配置目标BaseURL
      baseURL: 'https://base.url.com',
    }),
    pluginTanstackQuery({
      output: {
        path: 'queries',
      },
      // 让TanStack Query插件使用上面生成的Axios实例
      axiosInstance: {
        import: {
          path: '../axiosInstance.ts',
          name: 'axiosInstance',
        },
      },
    }),
  ],
})

这样生成的所有查询钩子都会自动用配置好的BaseURL发起请求，不会再指向localhost。

如果你已经有现成的Axios实例文件，也可以跳过pluginAxios的baseURL配置，直接在axiosInstance.import里指定你自己的实例路径即可。

2. 全局queryFn不生效的替代方案 #

既然Kubb生成的钩子自带queryFn，全局配置优先级不够，要统一处理请求逻辑，推荐用Axios拦截器而非全局queryFn：

// api/client.js
import axios from "axios";

const axiosInstance = axios.create({
    baseURL: "https://base.url.com",
    timeout: 15000
});

// 在这里统一处理请求逻辑，比如加token、打印日志
axiosInstance.interceptors.request.use(
  (config) => {
    console.log('请求路径:', config.url);
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error) => Promise.reject(error)
);

export default axiosInstance;

然后在Kubb配置里导入这个实例，生成的钩子就会自动复用拦截器逻辑。

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