Fix loader request method (#9660)

* Fix loader request method * add changeset
remix-run · Nov 30, 2022 · 80bd977 · 80bd977
1 parent 9a35285
commit 80bd977
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 3 deletions.
diff --git a/.changeset/pretty-kiwis-study.md b/.changeset/pretty-kiwis-study.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+Fix requests sent to revalidating loaders so they reflect a GET request
diff --git a/packages/router/__tests__/router-test.ts b/packages/router/__tests__/router-test.ts
@@ -5052,12 +5052,21 @@ describe("a router", () => {
       // Assert request internals, cannot do a deep comparison above since some
       // internals aren't the same on separate creations
       let request = nav.actions.tasks.stub.mock.calls[0][0].request;
-      expect(request.url).toBe("http://localhost/tasks");
       expect(request.method).toBe("POST");
+      expect(request.url).toBe("http://localhost/tasks");
       expect(request.headers.get("Content-Type")).toBe(
         "application/x-www-form-urlencoded;charset=UTF-8"
       );
       expect((await request.formData()).get("query")).toBe("params");
+
+      await nav.actions.tasks.resolve("TASKS ACTION");
+      let rootLoaderRequest = nav.loaders.root.stub.mock.calls[0][0].request;
+      expect(rootLoaderRequest.method).toBe("GET");
+      expect(rootLoaderRequest.url).toBe("http://localhost/tasks");
+
+      let tasksLoaderRequest = nav.loaders.tasks.stub.mock.calls[0][0].request;
+      expect(tasksLoaderRequest.method).toBe("GET");
+      expect(tasksLoaderRequest.url).toBe("http://localhost/tasks");
     });
 
     it("sends proper arguments to actions (using query string)", async () => {
@@ -10379,9 +10388,12 @@ describe("a router", () => {
     }
 
     function createSubmitRequest(path: string, opts?: RequestInit) {
+      let searchParams = new URLSearchParams();
+      searchParams.append("key", "value");
+
       return createRequest(path, {
         method: "post",
-        body: createFormData({ key: "value" }),
+        body: searchParams,
         ...opts,
       });
     }
@@ -10851,6 +10863,75 @@ describe("a router", () => {
         });
       });
 
+      it("should send proper arguments to loaders", async () => {
+        let rootLoaderStub = jest.fn(() => "ROOT");
+        let childLoaderStub = jest.fn(() => "CHILD");
+        let { query } = createStaticHandler([
+          {
+            id: "root",
+            path: "/",
+            loader: rootLoaderStub,
+            children: [
+              {
+                id: "child",
+                path: "child",
+                loader: childLoaderStub,
+              },
+            ],
+          },
+        ]);
+        await query(createRequest("/child"));
+
+        // @ts-expect-error
+        let rootLoaderRequest = rootLoaderStub.mock.calls[0][0]?.request;
+        // @ts-expect-error
+        let childLoaderRequest = childLoaderStub.mock.calls[0][0]?.request;
+        expect(rootLoaderRequest.method).toBe("GET");
+        expect(rootLoaderRequest.url).toBe("http://localhost/child");
+        expect(childLoaderRequest.method).toBe("GET");
+        expect(childLoaderRequest.url).toBe("http://localhost/child");
+      });
+
+      it("should send proper arguments to actions", async () => {
+        let actionStub = jest.fn(() => "ACTION");
+        let rootLoaderStub = jest.fn(() => "ROOT");
+        let childLoaderStub = jest.fn(() => "CHILD");
+        let { query } = createStaticHandler([
+          {
+            id: "root",
+            path: "/",
+            loader: rootLoaderStub,
+            children: [
+              {
+                id: "child",
+                path: "child",
+                action: actionStub,
+                loader: childLoaderStub,
+              },
+            ],
+          },
+        ]);
+        await query(createSubmitRequest("/child"));
+
+        // @ts-expect-error
+        let actionRequest = actionStub.mock.calls[0][0]?.request;
+        expect(actionRequest.method).toBe("POST");
+        expect(actionRequest.url).toBe("http://localhost/child");
+        expect(actionRequest.headers.get("Content-Type")).toBe(
+          "application/x-www-form-urlencoded;charset=UTF-8"
+        );
+        expect((await actionRequest.formData()).get("key")).toBe("value");
+
+        // @ts-expect-error
+        let rootLoaderRequest = rootLoaderStub.mock.calls[0][0]?.request;
+        // @ts-expect-error
+        let childLoaderRequest = childLoaderStub.mock.calls[0][0]?.request;
+        expect(rootLoaderRequest.method).toBe("GET");
+        expect(rootLoaderRequest.url).toBe("http://localhost/child");
+        expect(childLoaderRequest.method).toBe("GET");
+        expect(childLoaderRequest.url).toBe("http://localhost/child");
+      });
+
       describe("statusCode", () => {
         it("should expose a 200 status code by default", async () => {
           let { query } = createStaticHandler([

diff --git a/packages/router/router.ts b/packages/router/router.ts
@@ -952,6 +952,9 @@ export function createRouter(init: RouterInit): Router {
         ...opts.submission,
       };
       loadingNavigation = navigation;
+
+      // Create a GET request for the loaders
+      request = createRequest(request.url, request.signal);
     }
 
     // Call loaders
@@ -2202,7 +2205,9 @@ export function unstable_createStaticHandler(
       };
     }
 
-    let context = await loadRouteData(request, matches);
+    // Create a GET request for the loaders
+    let loaderRequest = createRequest(request.url, request.signal);
+    let context = await loadRouteData(loaderRequest, matches);
 
     return {
       ...context,