remix_route_with_loader_action_data_flow_typescript.ts

1import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
2import { json } from "@remix-run/node";
3import { Form, useLoaderData } from "@remix-run/react";
4
5// 1. Data Loading: This runs only on the server
6export async function loader() {
7  return json({
8    posts: [
9      { slug: "hello-world", title: "Hello World" },
10      { slug: "remix-guide", title: "Remix Guide" },
11    ],
12  });
13}
14
15// 2. Data Mutation: This runs only on the server when a POST request is made
16export async function action({ request }: ActionFunctionArgs) {
17  const formData = await request.formData();
18  const title = formData.get("title");
19
20  // In a real app, you would save this to a database
21  console.log({ title });
22
23  return json({ success: true });
24}
25
26// 3. UI Component: This runs on both server and client
27export default function Posts() {
28  const { posts } = useLoaderData<typeof loader>();
29
30  return (
31    <main style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
32      <h1>Posts</h1>
33      <ul>
34        {posts.map((post) => (
35          <li key={post.slug}>
36            <a href={`/posts/${post.slug}`}>{post.title}</a>
37          </li>
38        ))}
39      </ul>
40
41      <hr />
42
43      <h2>Create a Post</h2>
44      <Form method="post">
45        <label>
46          Post Title: <input type="text" name="title" />
47        </label>
48        <button type="submit">Create</button>
49      </Form>
50    </main>
51  );
52}