我们可以从 rtk 查询端点覆盖 Accept-Language 吗？

Question

这是我的baseQuery，我已经从prepareHeaders函数设置了Accept-Language。

import {fetchBaseQuery, retry} from '@reduxjs/toolkit/dist/query/react'
import i18n from 'i18next';

export const baseQuery = retry(fetchBaseQuery({
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Access-Control-Allow-Origin': '*'
    },
    prepareHeaders: (headers) => {
        if (accessToken) {
            headers.set('Accept-Language', i18n.language);
        }
        return headers;
    },
}), {maxRetries: 3});

我需要的是覆盖 RTK 端点的 Accept-Language。

export const sampleApi = createApi({
    reducerPath: 'sampleApi',
    baseQuery: baseQuery,
    endpoints: (builder) => ({
        getLotteryOdds: builder.query({
            query: () => ({
                url: '/sample',
                method: 'GET',
                headers: {
                    'Accept-Language': 'en'
                }
            }),
        }),
        })
})

我上面使用的覆盖方式不起作用。那么还有其他方法可以做到吗？？？

我知道如果我们在 baseQuery 标头中设置 Accept-Language （不使用prepareHeaders 函数），我们可以覆盖 RTK 端点。但我的要求是在准备标头中设置 Accept-Language，然后从 API 端点覆盖它。我怎样才能做到这一点？

Answer 1

prepareHeaders

是“最后一站”，覆盖之前设置的任何标题。您可以检查

"Accept-Language"

标头是否已有值，如果没有，则仅将其设置为默认值。

示例：

import { fetchBaseQuery, retry } from '@reduxjs/toolkit/dist/query/react';
import i18n from 'i18next';

export const baseQuery = retry(
  fetchBaseQuery({
    timeout: 5000,
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
      'Access-Control-Allow-Origin': '*',
    },
    prepareHeaders: (headers) => {
      if (!headers.has('Accept-Language') && accessToken) {
        headers.set('Accept-Language', i18n.language);
      }
      return headers;
    },
  }),
  { maxRetries: 3 },
);

export const sampleApi = createApi({
  reducerPath: 'sampleApi',
  baseQuery,
  endpoints: (builder) => ({
    getLotteryOdds: builder.query({
      query: () => ({
        url: '/sample',
        method: 'GET',
        headers: {
          'Accept-Language': 'en'
        }
      }),
    }),
  }),
});

您可以通过 extra options 参数将数据从端点传递到基本查询函数，并执行类似的检查。

示例：

import { fetchBaseQuery, retry } from '@reduxjs/toolkit/dist/query/react';
import i18n from 'i18next';

export const baseQuery = retry(
  fetchBaseQuery({
    timeout: 5000,
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
      'Access-Control-Allow-Origin': '*',
    },
    prepareHeaders: (headers, { extra }) => {
      if (extra.headers.acceptLanguage) {
        headers.set('Accept-Language', extra.headers.acceptLanguage);
      } else if (accessToken) {
        headers.set('Accept-Language', i18n.language);
      }
      return headers;
    },
  }),
  { maxRetries: 3 },
);

export const sampleApi = createApi({
  reducerPath: 'sampleApi',
  baseQuery,
  endpoints: (builder) => ({
    getLotteryOdds: builder.query({
      query: () => ({
        url: '/sample',
        method: 'GET',
      }),
      extraOptions: {
        headers: {
          acceptLanguage': 'en',
        },
      },
    }),
  }),
});