RTK Query：如何为所有baseQuery端点自动注入默认fooId参数

你完全不需要每次调用hooks时重复传入fooId，可以通过RTK Query的baseQuery或Hook封装来自动注入这个公共参数，下面是两种落地性强的方案：

方案一：封装自定义Hook（无需修改生成代码） #

如果不想改动自动生成的API切片代码，最省心的方式是封装一层自定义Hook，自动帮你注入fooId：

1. 先实现fooId的获取逻辑（根据你的存储方式选择）：

// 从Cookie获取
const getFooId = () => {
  const cookieEntry = document.cookie.split('; ').find(row => row.startsWith('fooId='));
  return cookieEntry ? cookieEntry.split('=')[1] : '';
};

// 或者从LocalStorage获取
// const getFooId = () => localStorage.getItem('fooId') || '';

// 或者从Redux状态获取（需结合useSelector）
// import { useSelector } from 'react-redux';
// const getFooId = () => useSelector((state: RootState) => state.auth.fooId);

2. 封装生成的Hook：
   假设自动生成的API切片导出了useGetFooByFooIdPostByPostId，我们封装成更易用的新Hook：

import { fooApi } from './path/to/generated/fooApi';

export const useGetPostById = (args: Omit<GetFooByFooIdPostByPostIdApiArg, 'fooId'>) => {
  const fooId = getFooId();
  return fooApi.useGetFooByFooIdPostByPostId({ ...args, fooId });
};

之后调用时直接用简化版：

const { data } = useGetPostById({ id: "123" });

方案二：修改生成的API切片（直接优化原Hook） #

如果愿意调整自动生成的代码（或编写脚本自动修改），可以直接修改每个endpoint的定义，让fooId自动注入到请求URL中：

1. 修改生成的API切片中endpoint的query函数：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const fooApi = createApi({
  reducerPath: 'fooApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (build) => ({
    getFooByFooIdPostByPostId: build.query<Post, Omit<GetFooByFooIdPostByPostIdApiArg, 'fooId'>>({
      // 直接在query逻辑中获取fooId并拼入URL
      query: (args, api) => {
        // 方式1：从Redux全局状态获取（api.getState()可直接访问）
        const { fooId } = api.getState() as RootState;
        // 方式2：从Cookie/LocalStorage获取
        // const fooId = getFooId();
        
        return `/foo/${fooId}/post/${args.id}`;
      },
    }),
    // 其他endpoint按同样逻辑修改
  }),
});

2. 自动适配参数类型：
   通过Omit<GetFooByFooIdPostByPostIdApiArg, 'fooId'>移除参数中的fooId，Hook的类型会自动更新，调用时无需再传入该参数。

注意事项 #

• 确保fooId的获取逻辑稳定，比如如果从Cookie/LocalStorage获取，要处理fooId不存在的情况（比如抛出错误、跳转登录页等）。
• 如果从Redux状态获取fooId，RTK Query的query函数可直接通过第二个参数api访问全局状态，无需额外引入useSelector。

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