Comment créer une route ressource

1
import { getUsers } from '~/users.server';
2
import type { LoaderFunctionArgs } from 'react-router';
3

4
// @callout: La fonction loader renvoie du JSON directement
5
export async function loader({}: LoaderFunctionArgs) {
6
  // ^? Méthode utilitaire pour JSON et headers par défaut
7
  return Response.json(
8
    { users: await getUsers() },
9
    {
10
      headers: {
11
        'Cache-Control': 'public, max-age=3600', // ^? Mise en cache 1 heure
12
      },
13
    }
14
  );
15
}

1
import { type RouteConfig, index, route } from '@react-router/dev/routes';
2

3
export default [
4
  index('routes/home.tsx'),
5
  // ^? Route JSON à la racine
6
  route('users.json', 'routes/users.json.tsx'),
7
] satisfies RouteConfig;

1
import { getUsers } from '~/users.server';
2

3
// @callout: Génère une chaîne CSV à partir d’un tableau
4
export async function loader() {
5
  const users = await getUsers();
6
  // 1. Entête
7
  let csv = ['id', 'name', 'slug'].join(',') + '\r\n';
8
  // 2. Lignes de données
9
  users.forEach((u) => {
10
    csv += [u.id, u.name, u.slug].join(',') + '\r\n';
11
  });
12

13
  return new Response(csv, {
14
    headers: {
15
      'Content-Type': 'text/csv',
16
      'Content-Disposition': `attachment; filename="users.csv"`,
17
    },
18
  });
19
}

1
import { type RouteConfig, index, route } from '@react-router/dev/routes';
2

3
export default [
4
  index('routes/home.tsx'),
5
  route('users.json', 'routes/users.json.tsx'),
6
  route('users.csv',  'routes/users.csv.tsx'),
7
] satisfies RouteConfig;

1
npm install pdfkit @types/pdfkit

1
import PDFDocument from 'pdfkit';
2
import { getUsers } from '~/users.server';
3

4
// @callout: PDFKit génère un flux de données PDF
5
export async function loader() {
6
  const users = await getUsers();
7
  const doc = new PDFDocument();
8
  const chunks: Uint8Array[] = [];
9

10
  doc.on('data', (chunk) => chunks.push(chunk));
11
  doc.fontSize(16).text('Users list', { align: 'center' }).moveDown();
12

13
  users.forEach((u) => {
14
    doc.fontSize(12).text(`${u.id}: ${u.name}`).moveDown(0.5);
15
  });
16

17
  doc.end();
18

19
  // ^? Attendre la fin du flux avant de répondre
20
  return new Promise<Response>((resolve) => {
21
    doc.on('end', () => {
22
      const pdfBuffer = Buffer.concat(chunks);
23
      resolve(
24
        new Response(pdfBuffer, {
25
          headers: {
26
            'Content-Type': 'application/pdf',
27
            'Content-Disposition': `attachment; filename="users.pdf"`,
28
          },
29
        })
30
      );
31
    });
32
  });
33
}

1
import { type RouteConfig, index, route } from '@react-router/dev/routes';
2

3
export default [
4
  index('routes/home.tsx'),
5
  route('users.json', 'routes/users.json.tsx'),
6
  route('users.csv',  'routes/users.csv.tsx'),
7
  route('users.pdf',  'routes/users.pdf.tsx'),
8
] satisfies RouteConfig;

1
import { Link, href, Outlet, useLoaderData } from 'react-router';
2
import { getUsers } from '~/users.server';
3

4
export default function UsersLayout() {
5
  const users = useLoaderData<typeof loader>().users;
6
  return (
7
    <div>
8
      <nav className="flex gap-2">
9
        <Link to={href('/users.json')} reloadDocument className="btn">
10
          JSON
11
        </Link>
12
        <Link to={href('/users.csv')} reloadDocument className="btn">
13
          CSV
14
        </Link>
15
        <Link to={href('/users.pdf')} reloadDocument className="btn">
16
          PDF
17
        </Link>
18
      </nav>
19
      <Outlet />
20
    </div>
21
  );
22
}