How do you customize request headers or authentication tokens in RTK Query?

Question

Accepted Answer

In RTK Query, you can easily customize HTTP request headers — including adding authentication tokens — using the `fetchBaseQuery` options or a custom base query. This allows you to attach tokens dynamically from your Redux store or local storage before each request. **Using `prepareHeaders`:** Modify headers before each request by accessing the Redux state or adding authentication tokens. **Using a Custom Base Query:** Create your own base query wrapper to handle special authentication logic, token refresh, or custom header rules. **Endpoint-Level Overrides:** Add or modify headers directly within individual endpoints when specific routes require custom headers. import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: '/api',
    prepareHeaders: (headers, { getState }) => {
      const token = getState().auth.token;
      if (token) {
        headers.set('authorization', `Bearer ${token}`);
      }
      headers.set('Content-Type', 'application/json');
      return headers;
    },
  }),
  endpoints: (builder) => ({
    getUser: builder.query({ query: () => '/user' }),
  }),
}); In this example, the `prepareHeaders` function adds an `Authorization` header for each request. It retrieves the token from the Redux store and ensures that every endpoint automatically uses it. import { fetchBaseQuery } from '@reduxjs/toolkit/query';

const baseQuery = fetchBaseQuery({ baseUrl: '/api' });

const customBaseQuery = async (args, api, extraOptions) => {
  let result = await baseQuery(args, api, extraOptions);

// Example: Handle token refresh if unauthorized
  if (result.error && result.error.status === 401) {
    const refreshResult = await baseQuery('/refresh-token', api, extraOptions);
    if (refreshResult.data) {
      api.dispatch({ type: 'auth/setToken', payload: refreshResult.data.token });
      result = await baseQuery(args, api, extraOptions);
    }
  }

return result;
}; This approach gives full control over how requests and responses are handled, making it ideal for implementing token refresh workflows or handling special authentication rules. By customizing headers with `prepareHeaders` or a custom base query, RTK Query enables secure and flexible communication with authenticated APIs.

How do you customize request headers or authentication tokens in RTK Query?

How do you customize request headers or authentication tokens in RTK Query?

Scenario Questions

Follow-up Questions