Как добавить заголовки к конечным точкам в плагине RTK-Query?

Question

Попытки следовать довольно скудному руководству на официальной странице меня далеко не уводят.

По сути, я пытаюсь добавить определенный заголовок на основе параметров вызова api, но я не знаю, как настроить для этого конечные точки.

Answer 1

Все, что ты return с вашей конечной точки query функция будет передана в качестве первого аргумента вашему baseQuery. Так что, если вы используете, вам нужно взглянуть на это.

Как правило, baseQuery, созданный fetchBaseQuery принимает все варианты, которые нормальный fetch звонок примет - включая headers поле.

Итак, у вас будет что-то вроде

      myEndpoint: build.query({
  query(args) {
    return {
      url: "foo",
      headers: { myHeader: args.blup }
    }
  }
})

должен сделать свое дело.

Обычно, помимо «разреженного руководства», при прокрутке вниз появляется еще около 25 страниц документации, но даже в этом случае сложно охватить все, поскольку RTK-Query довольно гибок.

Вы можете узнать больше о fetchBaseQuery в документации здесь: https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#using-fetchbasequery

Answer 2

Ответ @phry не работает в моем случае. Проверяя документы, в моем случае это помогает решить проблему CORS:

      baseQuery: fetchBaseQuery({ 
        baseUrl: '.....',
        prepareHeaders: (headers, { getState }) => {
            headers.set('Access-Control-Allow-Origin', '*')
            return headers
        }
    }),

Answer 3

Вы можете использовать prepareHeaders. Это сработало для меня.

      createYourEndPoint: builder.mutation({
    query: (body) => ({
      url: `youEndPoint`,
      method: "POST",
      body,
      prepareHeaders: (headers) => {
        headers.set("Content-Type", "multipart/form-data")
          return headers
      },
    }),
    invalidatesTags: ["YourEndPointTag"],
}),

Answer 4

Вы можете использовать prepareHeaders, который является вторым аргументомfetchBaseQueryчтобы настроить заголовок так, как вам нужно:

       `
  const baseQuery = fetchBaseQuery({
  baseUrl: "",
  prepareHeaders: (headers) => {
    headers.set("Content-type", "appliation/json"),
      headers.set("businessUnit", "EUS,MPS"),
      headers.set("auth-token", tokenService.getLocalAccessToken());
    return headers;
  },
});


 `

Answer 5

Вот мой собственный пример, предполагающий, что ваш запрос — getUserProfile, и вы извлекаете значения токена, userId и ваших пользовательских ключей заголовка из параметров запроса.

      getUserProfile: builder.query({
    query: (params) => ({
        url: `user/${params.userId}`,
        method: "GET",
        headers: {
            Authorization: `Bearer ${params.token}`,
            "your-custom-header": params.customKey
        },
    }),
}),