Handle body object for DELETE request

src/Mutate.test.tsx

@@ -109,6 +109,70 @@ describe("Mutate", () => {
       expect(children.mock.calls[2][1].loading).toEqual(false);
     });
 
+    it("should send the correct body", async () => {
+      nock("https://my-awesome-api.fake")
+        .delete("/", { foo: "bar" })
+        .reply(200, { id: 1 });
+
+      const children = jest.fn();
+      children.mockReturnValue(<div />);
+
+      // setup - first render
+      render(
+        <RestfulProvider base="https://my-awesome-api.fake">
+          <Mutate verb="DELETE" path="">
+            {children}
+          </Mutate>
+        </RestfulProvider>,
+      );
+
+      await wait(() => expect(children.mock.calls.length).toBe(1));
+      expect(children.mock.calls[0][1].loading).toEqual(false);
+      expect(children.mock.calls[0][0]).toBeDefined();
+
+      // delete action
+      children.mock.calls[0][0]({ foo: "bar" });
+      await wait(() => expect(children.mock.calls.length).toBe(3));
+
+      // transition state
+      expect(children.mock.calls[1][1].loading).toEqual(true);
+
+      // after delete state
+      expect(children.mock.calls[2][1].loading).toEqual(false);
+    });
+
+    it("should send the empty body object", async () => {
+      nock("https://my-awesome-api.fake")
+        .delete("/", {})
+        .reply(200, { id: 1 });
+
+      const children = jest.fn();
+      children.mockReturnValue(<div />);
+
+      // setup - first render
+      render(
+        <RestfulProvider base="https://my-awesome-api.fake">
+          <Mutate verb="DELETE" path="">
+            {children}
+          </Mutate>
+        </RestfulProvider>,
+      );
+
+      await wait(() => expect(children.mock.calls.length).toBe(1));
+      expect(children.mock.calls[0][1].loading).toEqual(false);
+      expect(children.mock.calls[0][0]).toBeDefined();
+
+      // delete action
+      children.mock.calls[0][0]({});
+      await wait(() => expect(children.mock.calls.length).toBe(3));
+
+      // transition state
+      expect(children.mock.calls[1][1].loading).toEqual(true);
+
+      // after delete state
+      expect(children.mock.calls[2][1].loading).toEqual(false);
+    });
+
     it("should call the correct url without id", async () => {
       nock("https://my-awesome-api.fake")
         .delete("/")

src/useMutate.test.tsx

@@ -92,6 +92,42 @@ describe("useMutate", () => {
       expect(res).toEqual({ id: 1 });
     });
 
+    it("should send the correct body", async () => {
+      nock("https://my-awesome-api.fake")
+        .delete("/", { foo: "bar" })
+        .reply(200, { id: 1 });
+
+      const wrapper: React.FC = ({ children }) => (
+        <RestfulProvider base="https://my-awesome-api.fake">{children}</RestfulProvider>
+      );
+      const { result } = renderHook(() => useMutate("DELETE", ""), { wrapper });
+      const res = await result.current.mutate({ foo: "bar" });
+
+      expect(result.current).toMatchObject({
+        error: null,
+        loading: false,
+      });
+      expect(res).toEqual({ id: 1 });
+    });
+
+    it("should send the empty body object", async () => {
+      nock("https://my-awesome-api.fake")
+        .delete("/", {})
+        .reply(200, { id: 1 });
+
+      const wrapper: React.FC = ({ children }) => (
+        <RestfulProvider base="https://my-awesome-api.fake">{children}</RestfulProvider>
+      );
+      const { result } = renderHook(() => useMutate("DELETE", ""), { wrapper });
+      const res = await result.current.mutate({});
+
+      expect(result.current).toMatchObject({
+        error: null,
+        loading: false,
+      });
+      expect(res).toEqual({ id: 1 });
+    });
+
     it("should call the correct url without id", async () => {
       nock("https://my-awesome-api.fake")
         .delete("/")

src/useMutate.tsx

@@ -101,6 +101,8 @@ export function useMutate<
       const pathStr =
         typeof path === "function" ? path(mutateRequestOptions?.pathParams || (pathParams as TPathParams)) : path;
 
+      const pathParts = [pathStr];
+
       const propsRequestOptions =
         (typeof props.requestOptions === "function" ? await props.requestOptions() : props.requestOptions) || {};
 
@@ -116,22 +118,22 @@ export function useMutate<
         options.headers = { "content-type": typeof body === "object" ? "application/json" : "text/plain" };
       }
 
-      if (!isDelete) {
-        if (body instanceof FormData) {
-          options.body = body;
-        } else if (typeof body === "object") {
-          options.body = JSON.stringify(body);
-        } else {
-          options.body = (body as unknown) as string;
-        }
+      if (body instanceof FormData) {
+        options.body = body;
+      } else if (typeof body === "object") {
+        options.body = JSON.stringify(body);
+      } else if (isDelete) {
+        pathParts.push((body as unknown) as string);
+      } else {
+        options.body = (body as unknown) as string;
       }
 
       const signal = getAbortSignal();
 
       const request = new Request(
         resolvePath(
           base,
-          isDelete ? `${pathStr}/${body}` : pathStr,
+          pathParts.join("/"),
           { ...context.queryParams, ...queryParams, ...mutateRequestOptions?.queryParams },
           { ...context.queryParamStringifyOptions, ...props.queryParamStringifyOptions },
         ),