如何为react-query的QueryClient配置base url？

QueryClient 本身没有内置设置base URL的配置项，你没法直接在初始化QueryClient的时候传入base URL参数。
核心原因很简单：react-query 是服务端状态管理工具，不承担发起HTTP请求的职责，所有请求逻辑都是开发者自定义写在queryFn中的，所以它不会内置base URL、请求头这类和请求发送逻辑强绑定的配置。

你不需要为了实现base URL配置专门引入额外的Context Provider，最通用的实现方案非常简单：

• 先封装你项目里用的请求客户端，在请求客户端层面统一配置base URL、超时时间、拦截器这类通用请求规则。不管你用原生fetch、axios还是其他请求库，都支持这类全局配置。

以最常用的axios为例，封装的请求实例代码如下：

// /src/utils/request.ts
import axios from "axios";

export const request = axios.create({
  // 建议base URL从环境变量读取，方便区分开发/生产环境
  baseURL: import.meta.env.VITE_API_BASE_PATH,
  timeout: 10000,
});

封装完成后，你原来的/queryClient.ts极简导出代码完全不需要改动，在写react-query查询逻辑时，直接调用这个提前配置好base URL的请求实例即可：

// 业务代码示例
import { useQuery } from "react-query";
import { request } from "@/utils/request";

export const useUserDetail = (userId: string) => {
  return useQuery(["userDetail", userId], () => {
    // 这里只需要写接口相对路径，不需要重复拼接base地址
    return request.get(`/user/detail/${userId}`).then(res => res.data);
  });
};

如果你不想在每个业务文件里手动引入请求实例，也可以通过React Context Provider把配置好的请求实例做全局注入，这是React本身提供的跨组件传值能力，不是react-query要求的强制配置方式，按需选择即可。

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