remix_route_loader_fetch_external_api_list_display.ts

1import type { LoaderFunctionArgs } from "@remix-run/node";
2import { json } from "@remix-run/node";
3import { useLoaderData } from "@remix-run/react";
4
5interface Post {
6  userId: number;
7  id: number;
8  title: string;
9  body: string;
10}
11
12export const loader = async ({ request }: LoaderFunctionArgs) => {
13  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
14  const posts: Post[] = await res.json();
15  return json({ posts: posts.slice(0, 10) });
16};
17
18export default function Index() {
19  const { posts } = useLoaderData<typeof loader>();
20
21  return (
22    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
23      <h1>Welcome to Remix</h1>
24      <ul>
25        {posts.map((post) => (
26          <li key={post.id}>
27            <strong>{post.title}</strong>
28            <p>{post.body}</p>
29          </li>
30        ))}
31      </ul>
32    </div>
33  );
34}