Fix loader request method (#9660) (#9680)

* Fix loader request method

* add changeset

Author: brophdawg11

.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

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([

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,