RTK-Query: Overriding header set in `prepareHeaders`

I’m setting the "Content-Type", "application/json" header for my endpoints in prepareHeaders.

baseQuery: fetchBaseQuery({
    prepareHeaders: (headers) => {
      headers.set("Content-Type", "application/json");
      return headers;
    },
  }),

For a mutation declared in this createApi slice, I’m setting headers to multipart/form-data

 query: ({ formData }) => ({
          url: /setting,
          method: "PUT",
          headers: {
            "content-type": "multipart/form-data"
          },
          body: formData
      })

However, the request is failing because the content-type is still being set to application/json for this mutation. Is there any way to use prepareHeaders to set a global content-type and still be able to set a different content-type for individual endpoints?

I know that the documentation says that the content-type will automatically be set to application/json with no need to use prepareHeaders, however that’s not the behavior I’m seeing. When the content-type header isn’t set on a request, it’s left out of the request headers.

Issue Analytics

State:
Created 2 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

JoshAddingtoncommented, Mar 8, 2022

OK, that’s manageable. There was a line in the documentation that made me think that the priority in setting headers was inverse, with prepareHeaders setting a base header and individual endpoints being able to modify the header as needed.

0reactions

avyakt17285commented, Nov 30, 2022

A workaround for the same can be to check whether a header is already set in the prepareHeaders function itself. The headers variable passed in the prepareHeaders helps you access the headers which are already set. Using that you can conditionally add a header in the prepareHeaders function in the following way:

baseQuery: fetchBaseQuery({
  prepareHeaders: (headers) => {
    if (!headers.has("Content-Type") {
      headers.set("Content-Type", "application/json");
    }
    return headers;
  },

Top Results From Across the Web

fetchBaseQuery - Redux Toolkit

Allows you to inject headers on every request. You can specify headers at the endpoint level, but you'll typically want to set common...

How to add headers to endpoints in RTK-Query Plugin?

I'm essentially trying to add a certain header based on the params of an api call, but am clueless how to configure the...

fetchBaseQuery - RTK Query

You can specify headers at the endpoint level, but you'll typically want to set common ... A fetch function that overrides the default...

Confused about accessing rtk-query data in prepareHeaders()

When my application starts, it will load configuration . This configuration will contain stuff like baseUrl, some data used in headers etc. I've ......

Creating React Apps With Redux Toolkit and RTK Query - Toptal

RTK Query is an advanced data-fetching and client-side caching tool. ... after initialization we will need to set up store configuration: