React query handle 204 or zero content length (#2235)

* fix(openapi-react-query): Handle 204 or zero Content-Length header by returning data as null

* fix(openapi-react-query): updated and added 204 & zero Content-Length queryFn tests

* chore(openapi-react-query): Fixed linting in test

Author: wheelebin

packages/openapi-react-query/src/index.ts

@@ -194,10 +194,13 @@ export default function createClient<Paths extends {}, Media extends MediaType =
   }: QueryFunctionContext<QueryKey<Paths, Method, Path>>) => {
     const mth = method.toUpperCase() as Uppercase<typeof method>;
     const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
-    const { data, error } = await fn(path, { signal, ...(init as any) }); // TODO: find a way to avoid as any
+    const { data, error, response } = await fn(path, { signal, ...(init as any) }); // TODO: find a way to avoid as any
     if (error) {
       throw error;
     }
+    if (response.status === 204 || response.headers.get("Content-Length") === "0") {
+      return data ?? null;
+    }
 
     return data;
   };

packages/openapi-react-query/test/index.test.tsx

@@ -315,7 +315,7 @@ describe("client", () => {
       expect(error).toBeNull();
     });
 
-    it("should resolve error properly and have undefined data when queryFn returns undefined", async () => {
+    it("handles undefined response with non-zero Content-Length (status 200) by setting error and undefined data", async () => {
       const fetchClient = createFetchClient<paths>({ baseUrl });
       const client = createClient(fetchClient);
 
@@ -324,6 +324,9 @@ describe("client", () => {
         method: "get",
         path: "/string-array",
         status: 200,
+        headers: {
+          "Content-Length": "10",
+        },
         body: undefined,
       });
 
@@ -337,6 +340,53 @@ describe("client", () => {
       expect(data).toBeUndefined();
     });
 
+    it("handles undefined response with zero Content-Length by setting data and error to null", async () => {
+      const fetchClient = createFetchClient<paths>({ baseUrl });
+      const client = createClient(fetchClient);
+
+      useMockRequestHandler({
+        baseUrl,
+        method: "get",
+        path: "/string-array",
+        status: 200,
+        headers: {
+          "Content-Length": "0",
+        },
+        body: undefined,
+      });
+
+      const { result } = renderHook(() => client.useQuery("get", "/string-array"), { wrapper });
+
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+      const { data, error } = result.current;
+
+      expect(error).toBeNull();
+      expect(data).toBeNull();
+    });
+
+    it("handles undefined response with 204 No Content status by setting data and error to null", async () => {
+      const fetchClient = createFetchClient<paths>({ baseUrl });
+      const client = createClient(fetchClient);
+
+      useMockRequestHandler({
+        baseUrl,
+        method: "get",
+        path: "/string-array",
+        status: 204,
+        body: undefined,
+      });
+
+      const { result } = renderHook(() => client.useQuery("get", "/string-array"), { wrapper });
+
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+      const { data, error } = result.current;
+
+      expect(error).toBeNull();
+      expect(data).toBeNull();
+    });
+
     it("should infer correct data and error type", async () => {
       const fetchClient = createFetchClient<paths>({ baseUrl, fetch: fetchInfinite });
       const client = createClient(fetchClient);