如何在Redux-Toolkit Query请求头中传递变量？

核心思路 #

利用RTK Query的meta字段传递自定义元数据，在prepareHeaders中统一读取该字段并注入请求头，实现所有接口的通用处理逻辑。

具体实现步骤 #

1. 调整baseQuery的请求头处理逻辑
   修改prepareHeaders，从api参数的meta属性中获取apiSource，并设置到请求头：

   export const api = createApi({
     reducerPath: 'api',
     baseQuery: fetchBaseQuery({
       baseUrl: '/api/',
       prepareHeaders: (headers, { meta }) => {
         if (meta?.apiSource) {
           headers.set('api-source', meta.apiSource);
         }
         return headers;
       },
     }),
     endpoints: (builder) => ({
       // 后续改造接口定义
     }),
   });
   

2. 改造所有Endpoint的Query函数
   让每个接口的query函数接收包含apiSource的参数对象，返回包含url和meta的配置对象：

   endpoints: (builder) => ({
     getUsers: builder.query({
       query: ({ apiSource }) => ({
         url: '/getUsers',
         meta: { apiSource }
       }),
     }),
     // 带请求体的POST接口示例
     createUser: builder.mutation({
       query: ({ body, apiSource }) => ({
         url: '/createUser',
         method: 'POST',
         body,
         meta: { apiSource }
       }),
     }),
   }),
   

3. 调用接口时传递apiSource
   使用useQuery或useMutation时，传入包含apiSource的参数：

   // 查询接口调用
   const { data } = useGetUsers({ apiSource: 'web-client' });
   
   // 提交类接口调用
   const [createUser] = useCreateUser();
   createUser({
     body: { name: 'Alice', age: 28 },
     apiSource: 'mobile-app'
   });
   

优化：封装通用Query工具函数 #

如果接口数量较多，可封装工具函数避免重复编写meta逻辑：

// 通用Query生成函数
const buildQueryWithMeta = (url, method = 'GET') => (params) => {
  const { apiSource, ...restParams } = params;
  return {
    url,
    method,
    ...restParams,
    meta: { apiSource }
  };
};

// 接口定义时直接使用
endpoints: (builder) => ({
  getUsers: builder.query({
    query: buildQueryWithMeta('/getUsers'),
  }),
  createUser: builder.mutation({
    query: buildQueryWithMeta('/createUser', 'POST'),
  }),
}),

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