RTK Query中prepareHeaders获取extraOptions为undefined问题

你的用法存在两处明确错误，直接导致读取结果为undefined：

• 第一处错误：extraOptions 配置项本身接收普通对象，不需要包装成函数返回值。你当前写法是把一个箭头函数作为extraOptions的值传入，RTK Query不会主动执行这个函数生成配置，只会把函数本身作为配置值存储。
• 第二处错误：prepareHeaders 回调的入参字段名写错了。endpoint上配置的extraOptions，在回调参数里对应的字段名就是extraOptions，你解构的extra是createApi初始化时传入的全局通用配置，和单接口配置的extraOptions是完全独立的两个属性，自然读不到值。

首先修改endpoint的extraOptions配置，去掉外层包装的函数：

const myApi = api.injectEndpoints({
  endpoints: builder => ({
      changePassowrd: builder.mutation({
          query: (data) => ({
              url: `${Config.BASE_URL}/users/${data.userId}`,
              method: 'PATCH',
              body: data,
          }),
          // 直接传入配置对象即可
          extraOptions: {
            myOption: 'Test Option',
          },
      }),
  })
})

然后修改fetchBaseQuery里的读取逻辑，修正解构的字段名：

const baseQuery = fetchBaseQuery({
  baseUrl: Config.BASE_URL,
  prepareHeaders: (headers, {getState, extraOptions}) => {
    console.log('Extra Stuff', extraOptions); // 正常输出 { myOption: 'Test Option' }
    return headers;
  },
});

注意不要混淆两个相似配置：

• 全局extra：createApi初始化时传入的顶层配置，所有接口共享同一份值，回调中通过extra字段读取
• 单接口extraOptions：每个query/mutation单独配置的自定义参数，不同接口可配置不同值，回调中通过extraOptions字段读取

内容的提问来源于stack exchange，提问作者abdou-tech