Customize Query and Mutation Headers in RTK Query with prepareHeaders
In this lesson we look at the options for modifying headers on your queries. We start with adding a headers object to an individual query. That requires moving our query from returning a url string, to returning an object with the URL and the new headers property. We also add headers to our baseQuery, but replace that with the more flexible prepareHeaders.
prepareHeaders relies on the Headers object that is part of the Fetch API. As a second argument you also can access the current redux state. Accessing the redux state is helpful if you want to access saved data such as an authentication token.
Here's an example of using prepareHeaders for setting an authorization header:
https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#setting-default-headers-on-requests
Instructor: [0:00] Open up your website. I'm going to go ahead and open up the inspect window and click on the network tab, then filtering by API and fetch. Now, I'm going to click on "Services."
[0:09] I'm going to click into one of our Ajax calls, and you'll see the headers that get passed in here are just standard browser headers -- Referer, couple of security headers from Chrome, and the user agent.
[0:21] What if we want to send in custom headers? With RTK Query, that's actually pretty easy to do. Open up apiSlice.js and let's go down to the getServicesQuery and change this to return an object.
[0:34] This is the same setup as we're using for mutation. We'll have it return the URL. Now, I can have it also return a property called headers. We're going to add one called x-custom-header, and we'll have it just return Math.random.
[0:46] I've updated my getServicesQuery to use the object syntax, and I'm having it return a custom header. Let's go ahead and refresh the page and look in here. Sure enough, you can see x-custom-header has been added.
[1:01] Now, what if I want to add it to all of the routes at once? I can do the same thing up in my base query. I can add a headers property here inside a fetchBaseQuery.
[1:12] We'll say x-custom-header-global, and we will refresh the page. If you go to Services, you can see, it has x-custom-header. If I go to dogs, it's showing x-custom-header-global.
[1:27] What's actually happening here? First of all, when you manually define headers as an object like this, it's going to take the one associated with your local query over the one associated with your base query.
[1:38] However, there is a way that you can have both local headers that you add and headers that you add globally, and that's what something called prepareHeaders.
[1:47] That's going to take a function, which receives the current headers, which then you can modify. For example, by typing headers.set x-custom-header-global, and then Math.random.
[1:58] Now, it's going to add x-custom-header-global to whatever headers were being processed for that particular query. Let's take a look at this now.
[2:05] If I refresh the page, I go to my services query, you can see that we have both x-custom-header, and x-custom-header-global. Over in dogs, we have x-custom-header-global.
[2:17] These are some of the ways that you can modify headers. Obviously, it's pretty common to have an authorization header, for example, which might go really nicely here in your base query, but sometimes specific endpoints need headers as well and you have that option.