Properly handle data() values returned/thrown from resource routes (#14159)

Author: brophdawg11

.changeset/rotten-steaks-perform.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Properly handle data() values returned or thrown from resource routes and return corresponding responses with the data, status, and headers

integration/resource-routes-test.ts

@@ -85,12 +85,38 @@ test.describe("loader in an app", async () => {
         `,
         "app/routes/return-response.tsx": js`
           export let loader = () => {
-            return new Response('Partial', { status: 207 });
+            return new Response('Partial', { status: 207, headers: { 'X-Foo': 'Bar'} });
           }
         `,
         "app/routes/throw-response.tsx": js`
           export let loader = () => {
-            throw new Response('Partial', { status: 207 });
+            throw new Response('Partial', { status: 207, headers: { 'X-Foo': 'Bar' } });
+          }
+        `,
+        "app/routes/return-data.tsx": js`
+          import { data } from "react-router";
+          export let loader = () => {
+            return data('Partial', { status: 207, headers: { 'X-Foo': 'Bar'} });
+          }
+        `,
+        "app/routes/throw-data.tsx": js`
+          import { data } from "react-router";
+          export let loader = () => {
+            throw data('Partial', { status: 207, headers: { 'X-Foo': 'Bar'} });
+          }
+        `,
+        "app/routes/return-data-through-middleware.tsx": js`
+          import { data } from "react-router";
+          export const unstable_middleware = [(_, next) => next()]
+          export let loader = () => {
+            return data('Partial', { status: 207, headers: { 'X-Foo': 'Bar'} });
+          }
+        `,
+        "app/routes/throw-data-through-middleware.tsx": js`
+          import { data } from "react-router";
+          export const unstable_middleware = [(_, next) => next()]
+          export let loader = () => {
+            throw data('Partial', { status: 207, headers: { 'X-Foo': 'Bar'} });
           }
         `,
         "app/routes/return-object.tsx": js`
@@ -196,6 +222,7 @@ test.describe("loader in an app", async () => {
     let app = new PlaywrightFixture(appFixture, page);
     let res = await app.goto("/return-response");
     expect(res.status()).toBe(207);
+    expect(res.headers()["x-foo"]).toBe("Bar");
     expect(await res.text()).toEqual("Partial");
   });
 
@@ -205,6 +232,45 @@ test.describe("loader in an app", async () => {
     let app = new PlaywrightFixture(appFixture, page);
     let res = await app.goto("/throw-response");
     expect(res.status()).toBe(207);
+    expect(res.headers()["x-foo"]).toBe("Bar");
+    expect(await res.text()).toEqual("Partial");
+  });
+
+  test("should handle data() returned from resource routes", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let res = await app.goto("/return-data");
+    expect(res.status()).toBe(207);
+    expect(res.headers()["x-foo"]).toBe("Bar");
+    expect(await res.text()).toEqual("Partial");
+  });
+
+  test("should handle data() thrown from resource routes", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let res = await app.goto("/throw-data");
+    expect(res.status()).toBe(207);
+    expect(res.headers()["x-foo"]).toBe("Bar");
+    expect(await res.text()).toEqual("Partial");
+  });
+
+  test("should handle data() returned from resource routes through middleware", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let res = await app.goto("/return-data-through-middleware");
+    expect(res.status()).toBe(207);
+    expect(res.headers()["x-foo"]).toBe("Bar");
+    expect(await res.text()).toEqual("Partial");
+  });
+
+  test("should handle data() thrown from resource routes through middleware", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    let res = await app.goto("/throw-data-through-middleware");
+    expect(res.status()).toBe(207);
+    expect(res.headers()["x-foo"]).toBe("Bar");
     expect(await res.text()).toEqual("Partial");
   });
 

packages/react-router/lib/router/router.ts

@@ -4314,10 +4314,19 @@ export function createStaticHandler(
             basename,
           );
         }
-        if (isResponse(result.result) && isRouteRequest) {
-          // For SSR single-route requests, we want to hand Responses back
-          // directly without unwrapping
-          throw result;
+
+        // For SSR single-route requests, we want to hand Responses back
+        // directly, as well as upgrade data() calls to Response instances
+        // (this allows utilities using data() and be shared between normal and
+        // resource routes).
+        if (isRouteRequest) {
+          if (isResponse(result.result)) {
+            throw result;
+          } else if (isDataWithResponseInit(result.result)) {
+            // Upgrade `data()` to `Response` so utilities using `data()` can be
+            // shared between resource and non-resource routes
+            throw dataWithResponseInitToResponse(result.result);
+          }
         }
 
         dataResults[match.route.id] =