Add extra to prepareHeaders, update documentation + tests (#1922)

* Document missing properties on prepareHeaders signature
* Add a test for forced, type, endpoint in fetchBaseQuery
* Pass extra to prepareHeaders
* Convert example.com urls from http->https, use nodeFetch as fetchFn in test

Author: msutkowski

docs/rtk-query/api/fetchBaseQuery.mdx

@@ -19,10 +19,19 @@ It takes all standard options from fetch's [`RequestInit`](https://developer.moz
   - Typically a string like `https://api.your-really-great-app.com/v1/`. If you don't provide a `baseUrl`, it defaults to a relative path from where the request is being made. You should most likely _always_ specify this.
 - `prepareHeaders` _(optional)_
 
-  - Allows you to inject headers on every request. You can specify headers at the endpoint level, but you'll typically want to set common headers like `authorization` here. As a convenience mechanism, the second argument allows you to use `getState` to access your redux store in the event you store information you'll need there such as an auth token.
+  - Allows you to inject headers on every request. You can specify headers at the endpoint level, but you'll typically want to set common headers like `authorization` here. As a convenience mechanism, the second argument allows you to use `getState` to access your redux store in the event you store information you'll need there such as an auth token. Additionally, it provides access to `extra`, `endpoint`, `type`, and `forced` to unlock more granular conditional behaviors.
 
   - ```ts title="prepareHeaders signature" no-transpile
-    ;(headers: Headers, api: { getState: () => unknown }) => Headers
+    ;(
+      headers: Headers,
+      api: {
+        getState: () => unknown
+        extra: unknown
+        endpoint: string
+        type: 'query' | 'mutation'
+        forced: boolean | undefined
+      }
+    ) => Headers
     ```
 
 - `paramsSerializer` _(optional)_

docs/rtk-query/usage/automated-refetching.mdx

@@ -800,7 +800,7 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
 import { Post, LoginResponse } from './types'
 
 const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
   tagTypes: ['Post', 'UNAUTHORIZED', 'UNKNOWN_ERROR'],
   endpoints: (build) => ({
     postById: build.query<Post, number>({
@@ -856,7 +856,7 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
 import { Post, User } from './types'
 
 const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
   tagTypes: ['Post', 'User'],
   endpoints: (build) => ({
     getPosts: build.query<Post[], void>({
@@ -920,7 +920,7 @@ function providesList<R extends { id: string | number }[], T extends string>(
 // highlight-end
 
 const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
   tagTypes: ['Post', 'User'],
   endpoints: (build) => ({
     getPosts: build.query({

docs/rtk-query/usage/customizing-queries.mdx

@@ -271,7 +271,7 @@ const axiosBaseQuery =
 const api = createApi({
   // highlight-start
   baseQuery: axiosBaseQuery({
-    baseUrl: 'http://example.com',
+    baseUrl: 'https://example.com',
   }),
   // highlight-end
   endpoints(build) {

packages/rtk-query-codegen-openapi/test/mocks/server.ts

@@ -7,10 +7,10 @@ import petstoreYAML from '../fixtures/petstore.yaml.mock';
 // This configures a request mocking server with the given request handlers.
 
 export const server = setupServer(
-  rest.get('http://example.com/echo', (req, res, ctx) =>
+  rest.get('https://example.com/echo', (req, res, ctx) =>
     res(ctx.json({ ...req, headers: req.headers.getAllHeaders() }))
   ),
-  rest.post('http://example.com/echo', (req, res, ctx) =>
+  rest.post('https://example.com/echo', (req, res, ctx) =>
     res(ctx.json({ ...req, headers: req.headers.getAllHeaders() }))
   ),
 

packages/toolkit/package.json

@@ -47,7 +47,6 @@
     "axios": "^0.19.2",
     "console-testing-library": "^0.3.1",
     "convert-source-map": "^1.7.0",
-    "cross-fetch": "^3.1.4",
     "esbuild": "^0.11.13",
     "eslint": "^7.25.0",
     "eslint-config-prettier": "^8.3.0",

packages/toolkit/src/query/fetchBaseQuery.ts

@@ -113,7 +113,10 @@ export type FetchBaseQueryArgs = {
   baseUrl?: string
   prepareHeaders?: (
     headers: Headers,
-    api: Pick<BaseQueryApi, 'getState' | 'endpoint' | 'type' | 'forced'>
+    api: Pick<
+      BaseQueryApi,
+      'getState' | 'extra' | 'endpoint' | 'type' | 'forced'
+    >
   ) => MaybePromise<Headers>
   fetchFn?: (
     input: RequestInfo,
@@ -144,20 +147,20 @@ export type FetchBaseQueryMeta = { request: Request; response?: Response }
  *
  * @param {string} baseUrl
  * The base URL for an API service.
- * Typically in the format of http://example.com/
+ * Typically in the format of https://example.com/
  *
- * @param {(headers: Headers, api: { getState: () => unknown }) => Headers} prepareHeaders
+ * @param {(headers: Headers, api: { getState: () => unknown; extra: unknown; endpoint: string; type: 'query' | 'mutation'; forced: boolean; }) => Headers} prepareHeaders
  * An optional function that can be used to inject headers on requests.
- * Provides a Headers object, as well as the `getState` function from the
- * redux store. Can be useful for authentication.
+ * Provides a Headers object, as well as most of the `BaseQueryApi` (`dispatch` is not available).
+ * Useful for setting authentication or headers that need to be set conditionally.
  *
  * @link https://developer.mozilla.org/en-US/docs/Web/API/Headers
  *
  * @param {(input: RequestInfo, init?: RequestInit | undefined) => Promise<Response>} fetchFn
  * Accepts a custom `fetch` function if you do not want to use the default on the window.
  * Useful in SSR environments if you need to use a library such as `isomorphic-fetch` or `cross-fetch`
  *
- * @param {(params: Record<string, unknown> => string} paramsSerializer
+ * @param {(params: Record<string, unknown>) => string} paramsSerializer
  * An optional function that can be used to stringify querystring parameters.
  */
 export function fetchBaseQuery({
@@ -178,7 +181,8 @@ export function fetchBaseQuery({
       'Warning: `fetch` is not available. Please supply a custom `fetchFn` property to use `fetchBaseQuery` on SSR environments.'
     )
   }
-  return async (arg, { signal, getState, endpoint, forced, type }) => {
+  return async (arg, api) => {
+    const { signal, getState, extra, endpoint, forced, type } = api
     let meta: FetchBaseQueryMeta | undefined
     let {
       url,
@@ -200,7 +204,7 @@ export function fetchBaseQuery({
 
     config.headers = await prepareHeaders(
       new Headers(stripUndefined(headers)),
-      { getState, endpoint, forced, type }
+      { getState, extra, endpoint, forced, type }
     )
 
     // Only set the content-type to json if appropriate. Will not be true for FormData, ArrayBuffer, Blob, etc.

packages/toolkit/src/query/tests/buildHooks.test.tsx

@@ -1751,11 +1751,11 @@ describe('hooks with createApi defaults set', () => {
       posts = [...initialPosts]
 
       const handlers = [
-        rest.get('http://example.com/posts', (req, res, ctx) => {
+        rest.get('https://example.com/posts', (req, res, ctx) => {
           return res(ctx.json(posts))
         }),
         rest.put<Partial<Post>>(
-          'http://example.com/post/:id',
+          'https://example.com/post/:id',
           (req, res, ctx) => {
             const id = Number(req.params.id)
             const idx = posts.findIndex((post) => post.id === id)
@@ -1775,7 +1775,7 @@ describe('hooks with createApi defaults set', () => {
             return res(ctx.json(posts))
           }
         ),
-        rest.post('http://example.com/post', (req, res, ctx) => {
+        rest.post('https://example.com/post', (req, res, ctx) => {
           let post = req.body as Omit<Post, 'id'>
           startingId += 1
           posts.concat({
@@ -1799,7 +1799,7 @@ describe('hooks with createApi defaults set', () => {
     type PostsResponse = Post[]
 
     const api = createApi({
-      baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com/' }),
+      baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/' }),
       tagTypes: ['Posts'],
       endpoints: (build) => ({
         getPosts: build.query<PostsResponse, void>({

packages/toolkit/src/query/tests/cacheCollection.test.ts

@@ -16,7 +16,7 @@ beforeEach(() => {
 test(`query: await cleanup, defaults`, async () => {
   const { store, api } = storeForApi(
     createApi({
-      baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+      baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
       endpoints: (build) => ({
         query: build.query<unknown, string>({
           query: () => '/success',
@@ -35,7 +35,7 @@ test(`query: await cleanup, defaults`, async () => {
 test(`query: await cleanup, keepUnusedDataFor set`, async () => {
   const { store, api } = storeForApi(
     createApi({
-      baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+      baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
       endpoints: (build) => ({
         query: build.query<unknown, string>({
           query: () => '/success',
@@ -55,7 +55,7 @@ test(`query: await cleanup, keepUnusedDataFor set`, async () => {
 describe(`query: await cleanup, keepUnusedDataFor set`, () => {
   const { store, api } = storeForApi(
     createApi({
-      baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+      baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
       endpoints: (build) => ({
         query: build.query<unknown, string>({
           query: () => '/success',

packages/toolkit/src/query/tests/cacheLifecycle.test.ts

@@ -8,7 +8,7 @@ beforeAll(() => {
 })
 
 const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
   endpoints: () => ({}),
 })
 const storeRef = setupApiStore(api)

packages/toolkit/src/query/tests/createApi.test.ts

@@ -505,7 +505,7 @@ describe('additional transformResponse behaviors', () => {
   type SuccessResponse = { value: 'success' }
   type EchoResponseData = { banana: 'bread' }
   const api = createApi({
-    baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
     endpoints: (build) => ({
       echo: build.mutation({
         query: () => ({ method: 'PUT', url: '/echo' }),
@@ -543,7 +543,7 @@ describe('additional transformResponse behaviors', () => {
       query: build.query<SuccessResponse & EchoResponseData, void>({
         query: () => '/success',
         transformResponse: async (response: SuccessResponse) => {
-          const res = await fetch('http://example.com/echo', {
+          const res = await fetch('https://example.com/echo', {
             method: 'POST',
             body: JSON.stringify({ banana: 'bread' }),
           }).then((res) => res.json())
@@ -642,7 +642,7 @@ describe('query endpoint lifecycles - onStart, onSuccess, onError', () => {
 
   type SuccessResponse = { value: 'success' }
   const api = createApi({
-    baseQuery: fetchBaseQuery({ baseUrl: 'http://example.com' }),
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
     endpoints: (build) => ({
       echo: build.mutation({
         query: () => ({ method: 'PUT', url: '/echo' }),
@@ -679,7 +679,7 @@ describe('query endpoint lifecycles - onStart, onSuccess, onError', () => {
   test('query lifecycle events fire properly', async () => {
     // We intentionally fail the first request so we can test all lifecycles
     server.use(
-      rest.get('http://example.com/success', (_, res, ctx) =>
+      rest.get('https://example.com/success', (_, res, ctx) =>
         res.once(ctx.status(500), ctx.json({ value: 'failed' }))
       )
     )
@@ -703,7 +703,7 @@ describe('query endpoint lifecycles - onStart, onSuccess, onError', () => {
   test('mutation lifecycle events fire properly', async () => {
     // We intentionally fail the first request so we can test all lifecycles
     server.use(
-      rest.post('http://example.com/success', (_, res, ctx) =>
+      rest.post('https://example.com/success', (_, res, ctx) =>
         res.once(ctx.status(500), ctx.json({ value: 'failed' }))
       )
     )