Docs: add note on data to loaders/action docs

Author: brophdawg11

docs/start/actions.md

@@ -17,6 +17,7 @@ Client actions only run in the browser and take priority over a server action wh
 // route('/projects/:projectId', './project.tsx')
 import type * as Route from "./+types.project";
 import { Form } from "react-router";
+import { someApi } from "./api";
 
 export async function clientAction({
   request,
@@ -53,13 +54,14 @@ Server actions only run on the server and are removed from client bundles.
 // route('/projects/:projectId', './project.tsx')
 import type * as Route from "./+types.project";
 import { Form } from "react-router";
+import { fakeDb } from "../db";
 
 export async function action({
   request,
 }: Route.ActionArgs) {
   let formData = await request.formData();
   let title = await formData.get("title");
-  let project = await someApi.updateProject({ title });
+  let project = await fakeDb.updateProject({ title });
   return project;
 }
 
@@ -81,6 +83,38 @@ export default function Project({
 }
 ```
 
+### Custom Status Codes and Headers
+
+If you need to return a custom HTTP status code or custom headers from your `action`, you can do so using the [`data`][data] utility:
+
+```tsx filename=app/project.tsx lines=[3,11-14,19]
+// route('/projects/:projectId', './project.tsx')
+import type * as Route from "./+types.project";
+import { data } from "react-router";
+import { fakeDb } from "../db";
+
+export async function action({
+  request,
+}: Route.ActionArgs) {
+  let formData = await request.formData();
+  let title = await formData.get("title");
+  if (!title) {
+    throw data(
+      { message: "Invalid title" },
+      { status: 400 }
+    );
+  }
+
+  if (!projectExists(title)) {
+    let project = await fakeDb.createProject({ title });
+    return data(project, { status: 201 });
+  } else {
+    let project = await fakeDb.updateProject({ title });
+    return project;
+  }
+}
+```
+
 ## Calling Actions
 
 Actions are called declaratively through `<Form>` and imperatively through `useSubmit` (or `<fetcher.Form>` and `fetcher.submit`) by referencing the route's path and a "post" method.
@@ -159,4 +193,7 @@ fetcher.submit(
 );
 ```
 
-See the [Using Fetchers](../misc/fetchers) guide for more information.
+See the [Using Fetchers][fetchers] guide for more information.
+
+[fetchers]: ../misc/fetchers
+[data]: ../../api/react-router/data

docs/start/data-loading.md

@@ -65,6 +65,35 @@ export default function Product({
 
 Note that the `loader` function is removed from client bundles so you can use server only APIs without worrying about them being included in the browser.
 
+### Custom Status Codes and Headers
+
+If you need to return a custom HTTP status code or custom headers from your `loader`, you can do so using the [`data`][data] utility:
+
+```tsx filename=app/product.tsx lines=[3,6-8,14,17-21]
+// route("products/:pid", "./product.tsx");
+import type * as Route from "./+types.product";
+import { data } from "react-router";
+import { fakeDb } from "../db";
+
+export function headers({ loaderHeaders }: HeadersArgs) {
+  return loaderHeaders;
+}
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const product = await fakeDb.getProduct(params.pid);
+
+  if (!product) {
+    throw data(null, { status: 404 });
+  }
+
+  return data(product, {
+    headers: {
+      "Cache-Control": "public; max-age=300",
+    },
+  });
+}
+```
+
 ## Static Data Loading
 
 When pre-rendering, loaders are used to fetch data during the production build.
@@ -195,3 +224,4 @@ export async function Product({ id }: { id: string }) {
 ```
 
 [advanced_data_fetching]: ../tutorials/advanced-data-fetching
+[data]: ../../api/react-router/data