Allow endpoints to have optional/undefined headers (#108)

* Allow more flexible headers that can be undefined
* Adds doc blocks for JS users to `fetchBaseQuery`

Co-authored-by: Lenz Weber <[email protected]>

Author: msutkowski

src/fetchBaseQuery.ts

@@ -1,10 +1,16 @@
 import { joinUrls } from './utils';
 import { isPlainObject } from '@reduxjs/toolkit';
 import { BaseQueryFn } from './apiTypes';
+import { Override } from './tsHelpers';
 
 export type ResponseHandler = 'json' | 'text' | ((response: Response) => Promise<any>);
 
-export interface FetchArgs extends RequestInit {
+type CustomRequestInit = Override<
+  RequestInit,
+  { headers?: Headers | string[][] | Record<string, string | undefined> | undefined }
+>;
+
+export interface FetchArgs extends CustomRequestInit {
   url: string;
   params?: Record<string, any>;
   body?: any;
@@ -36,6 +42,36 @@ export interface FetchBaseQueryError {
   data: unknown;
 }
 
+function cleanUndefinedHeaders(headers: any) {
+  if (!isPlainObject(headers)) {
+    return headers;
+  }
+  const copy: Record<string, any> = { ...headers };
+  for (const [k, v] of Object.entries(copy)) {
+    if (typeof v === 'undefined') delete copy[k];
+  }
+  return copy;
+}
+
+/**
+ * This is a very small wrapper around fetch that aims to simplify requests.
+ *
+ * @param {string} baseUrl
+ * The base URL for an API service.
+ * Typically in the format of http://example.com/
+ *
+ * @param {(headers: Headers, api: { getState: () => unknown }) => 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.
+ *
+ * @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`
+ *
+ */
 export function fetchBaseQuery({
   baseUrl,
   prepareHeaders = (x) => x,
@@ -44,10 +80,6 @@ export function fetchBaseQuery({
 }: {
   baseUrl?: string;
   prepareHeaders?: (headers: Headers, api: { getState: () => unknown }) => Headers;
-  /**
-   * 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 pass isomorphic-fetch or cross-fetch
-   */
   fetchFn?: (input: RequestInfo, init?: RequestInit | undefined) => Promise<Response>;
 } & RequestInit = {}): BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}> {
   return async (arg, { signal, getState }) => {
@@ -69,7 +101,7 @@ export function fetchBaseQuery({
       ...rest,
     };
 
-    config.headers = prepareHeaders(new Headers(headers), { getState });
+    config.headers = prepareHeaders(new Headers(cleanUndefinedHeaders(headers)), { getState });
 
     if (!config.headers.has('content-type')) {
       config.headers.set('content-type', 'application/json');

test/fetchBaseQuery.test.tsx

@@ -348,6 +348,64 @@ describe('fetchBaseQuery', () => {
       expect(request.headers['authorization']).toBe(`Bearer ${token}`);
     });
   });
+
+  test('lets a header be undefined', async () => {
+    let request: any;
+    ({ data: request } = await baseQuery(
+      { url: '/echo', headers: undefined },
+      {
+        signal: undefined,
+        dispatch: storeRef.store.dispatch,
+        getState: storeRef.store.getState,
+      },
+      {}
+    ));
+
+    expect(request.headers['content-type']).toBe('application/json');
+    expect(request.headers['fake']).toBe(defaultHeaders['fake']);
+    expect(request.headers['delete']).toBe(defaultHeaders['delete']);
+    expect(request.headers['delete2']).toBe(defaultHeaders['delete2']);
+  });
+
+  test('allows for possibly undefined header key/values', async () => {
+    const banana = '1' as '1' | undefined;
+    let request: any;
+    ({ data: request } = await baseQuery(
+      { url: '/echo', headers: { banana } },
+      {
+        signal: undefined,
+        dispatch: storeRef.store.dispatch,
+        getState: storeRef.store.getState,
+      },
+      {}
+    ));
+
+    expect(request.headers['content-type']).toBe('application/json');
+    expect(request.headers['banana']).toBe('1');
+    expect(request.headers['fake']).toBe(defaultHeaders['fake']);
+    expect(request.headers['delete']).toBe(defaultHeaders['delete']);
+    expect(request.headers['delete2']).toBe(defaultHeaders['delete2']);
+  });
+
+  test('strips undefined values from the headers', async () => {
+    const banana = undefined as '1' | undefined;
+    let request: any;
+    ({ data: request } = await baseQuery(
+      { url: '/echo', headers: { banana } },
+      {
+        signal: undefined,
+        dispatch: storeRef.store.dispatch,
+        getState: storeRef.store.getState,
+      },
+      {}
+    ));
+
+    expect(request.headers['content-type']).toBe('application/json');
+    expect(request.headers['banana']).toBeUndefined();
+    expect(request.headers['fake']).toBe(defaultHeaders['fake']);
+    expect(request.headers['delete']).toBe(defaultHeaders['delete']);
+    expect(request.headers['delete2']).toBe(defaultHeaders['delete2']);
+  });
 });
 
 describe('fetchFn', () => {