如何使用 RTK 查询向我的请求发送可选的请求标头？

Question

我正在使用 RTK 查询构建 API 调用来接收数据。我通常将一个请求作为普通请求发送，并以 'Content-type: 'application/json' 作为默认标头，但我希望能够发送一个参数以将该标头更改为 'Content-type: 'text/csv' 当我需要时（我不希望请求的其他内容有所不同，所以我希望该标头是动态的）。我该怎么做？

这是我创建基本 API 的地方：

export const baseApi = createApi({
  refetchOnFocus: true,
  baseQuery: retry(
    fetchBaseQuery({
      baseUrl: API_BASE_URL,
      prepareHeaders: async (headers) => {
        const token = await getAuth0KeyAccessToken();
        if (!token) {
          console.warn('Token not set');
        }
        headers.set('Authorization', `Bearer ${token}`);
        if (isCsv) { // <-- `isCsv` is currently undefined. How can I pass it in? 
          headers.set('Content-Type', 'text/csv');
        }
        return headers;
      },
    }),
    { maxRetries: 2 },
  ),
  tagTypes: ['Reporting', etc],
  endpoints: () => ({}),
});

这是我调用这个基础 API 的地方：

    getCSV: builder.query<any, IReportingQuery>({
      providesTags: ['Reporting'],
      transformResponse: (response: { data: ReportingDP[] | ReportingDP }, meta, arg) =>
        arg.group_by
          ? response.data
          : Array.isArray(response.data)
            ? response.data.sort(dayComparator)
            : [response.data],
      query: (body) => ({
        url: '/api/v3/reporting', method: 'POST', body
      }),
    }),

我可以在此请求中的何处将

isCsv

布尔值发送到我的 baseAPI？

Answer 1

我相信您会在端点的

extraOptions

属性中指定此值。

额外选项

（可选）

作为第三个参数传递给提供的 baseQuery 函数

向

prepareHeaders

传递两个参数，即

headers

对象和具有

api

属性的

extra

对象。

type prepareHeaders = (
  headers: Headers,
  api: {
    getState: () => unknown
    extra: unknown // <-- this
    endpoint: string
    type: 'query' | 'mutation'
    forced: boolean | undefined
  }
) => Headers | void

您的代码：

getCSV: builder.query<any, IReportingQuery>({
  providesTags: ['Reporting'],
  transformResponse: (response: { data: ReportingDP[] | ReportingDP }, meta, arg) =>
    arg.group_by
      ? response.data
      : Array.isArray(response.data)
        ? response.data.sort(dayComparator)
        : [response.data],
  query: (body) => ({
    url: '/api/v3/reporting', method: 'POST', body
  }),
  extraOptions: {
    isCsv: true, // <-- pass in extraOptions
  },
}),

export const baseApi = createApi({
  refetchOnFocus: true,
  baseQuery: retry(
    fetchBaseQuery({
      baseUrl: API_BASE_URL,
      prepareHeaders: async (headers, api) => {
        const token = await getAuth0KeyAccessToken();

        if (!token) {
          console.warn('Token not set');
        }

        headers.set('Authorization', `Bearer ${token}`);

        if (api.extra.isCsv) { // <-- read from api.extra
          headers.set('Content-Type', 'text/csv');
        }

        return headers;
      },
    }),
    { maxRetries: 2 },
  ),
  tagTypes: ['Reporting', etc],
  endpoints: () => ({}),
});