Handle empty json response (#91)

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

Author: 3 people

src/fetchBaseQuery.ts

@@ -2,18 +2,35 @@ import { joinUrls } from './utils';
 import { isPlainObject } from '@reduxjs/toolkit';
 import { BaseQueryFn } from './apiTypes';
 
+export type ResponseHandler = 'json' | 'text' | ((response: Response) => Promise<any>);
+
 export interface FetchArgs extends RequestInit {
   url: string;
   params?: Record<string, any>;
   body?: any;
-  responseHandler?: 'json' | 'text' | ((response: Response) => Promise<any>);
+  responseHandler?: ResponseHandler;
   validateStatus?: (response: Response, body: any) => boolean;
 }
 
 const defaultValidateStatus = (response: Response) => response.status >= 200 && response.status <= 299;
 
 const isJsonContentType = (headers: Headers) => headers.get('content-type')?.trim()?.startsWith('application/json');
 
+const handleResponse = async (response: Response, responseHandler: ResponseHandler) => {
+  if (typeof responseHandler === 'function') {
+    return responseHandler(response);
+  }
+
+  if (responseHandler === 'text') {
+    return response.text();
+  }
+
+  if (responseHandler === 'json') {
+    const text = await response.text();
+    return text.length ? JSON.parse(text) : undefined;
+  }
+};
+
 export interface FetchBaseQueryError {
   status: number;
   data: unknown;
@@ -65,11 +82,7 @@ export function fetchBaseQuery({
     url = joinUrls(baseUrl, url);
 
     const response = await fetch(url, config);
-
-    const resultData =
-      typeof responseHandler === 'function'
-        ? await responseHandler(response)
-        : await response[responseHandler || 'text']();
+    const resultData = await handleResponse(response, responseHandler);
 
     return validateStatus(response, resultData)
       ? { data: resultData }

test/fetchBaseQuery.test.tsx

@@ -89,6 +89,22 @@ describe('fetchBaseQuery', () => {
       expect(res.data).toEqual({ value: 'success' });
     });
 
+    it('should return undefined for a simple GET request when the response is empty', async () => {
+      const req = baseQuery(
+        '/empty',
+        {
+          signal: undefined,
+          dispatch: storeRef.store.dispatch,
+          getState: storeRef.store.getState,
+        },
+        {}
+      );
+      expect(req).toBeInstanceOf(Promise);
+      const res = await req;
+      expect(res).toBeInstanceOf(Object);
+      expect(res.data).toBeUndefined();
+    });
+
     it('should return an error and status for error responses', async () => {
       const req = baseQuery(
         '/error',

test/mocks/server.ts

@@ -7,6 +7,7 @@ import { rest } from 'msw';
 export const server = setupServer(
   rest.get('http://example.com/success', (_, res, ctx) => res(ctx.json({ value: 'success' }))),
   rest.post('http://example.com/success', (_, res, ctx) => res(ctx.json({ value: 'success' }))),
+  rest.get('http://example.com/empty', (_, res, ctx) => res(ctx.body(''))),
   rest.get('http://example.com/error', (_, res, ctx) => res.once(ctx.status(500), ctx.json({ value: 'error' }))),
   rest.post('http://example.com/error', (_, res, ctx) => res.once(ctx.status(500), ctx.json({ value: 'error' }))),
   rest.get('http://example.com/nonstandard-error', (_, res, ctx) =>