Données et gestionnaires de route
Servez les déploiements depuis app/api, récupérez-les dans une page et ajoutez-en par POST.
Dans ce chapitre
- Un gestionnaire de route
- Récupération de données dans une page
- États de chargement et d’erreur
- Streaming
Acme Deploys a besoin de données réelles. Les gestionnaires de route se trouvent à côté de vos pages dans app/, utilisent les API Web Request et Response et s’exécutent avec text dev et text start. Ils partagent l’origine de l’application, les requêtes ne nécessitent donc aucune configuration CORS.
Un gestionnaire de route
Ajouté : import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";Ajouté : Ajouté : export function GET(): Response {Ajouté : return Response.json(DEPLOYMENTS);Ajouté : }Ajouté : Ajouté : export async function POST(req: Request): Promise<Response> {Ajouté : const deployment = createDeployment(await req.json());Ajouté : return Response.json(deployment, { status: 201 });Ajouté : }Appelez-le depuis l’invite de la console pendant que text dev s’exécute :
await (await fetch("/api/deployments")).json()Récupération de données dans une page
Récupérez les données dans un effet et affichez un <Spinner> jusqu’à leur arrivée. r relance la récupération ; n crée un nouveau déploiement par une requête POST, qui apparaît en cours de build et passe à l’état prêt une fois le build terminé.
Supprimé : import { DEPLOYMENTS } from "../../lib/deployments";Ajouté : import { useEffect, useState } from "react";Ajouté : import { Spinner, useInput } from "@textjs/app";Ajouté : import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {Ajouté : const [rows, setRows] = useState<Deployment[]>([]);Ajouté : const [loading, setLoading] = useState(true);Ajouté : Ajouté : const refetch = async () => {Ajouté : setLoading(true);Ajouté : setRows(await (await fetch("/api/deployments")).json());Ajouté : setLoading(false);Ajouté : };Ajouté : useEffect(() => void refetch(), []);Ajouté : Ajouté : useInput((e) => {Ajouté : if (e.input === "r") void refetch();Ajouté : if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);Ajouté : });Ajouté : Ajouté : if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">Supprimé : {DEPLOYMENTS.map((d) => (Ajouté : {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">Ajouté : <Status status={d.status} /> …États de chargement et d’erreur
Au lieu de gérer loading manuellement, un fichier loading.tsx placé à côté de la page s’affiche pendant sa suspension, et error.tsx intercepte toutes les erreurs qu’elle lève. Ce sont deux composants ordinaires :
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}Streaming
Les gestionnaires peuvent renvoyer un ReadableStream, qui transmet les journaux de build au tableau de bord ligne par ligne. Consultez Gestionnaires de route pour les événements envoyés par le serveur et la mise en place d’un proxy vers un démon local.
Essayer
Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.
Ouvrir la console
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur r.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.
Quiz
2 questionsRépondez à toutes les questions pour terminer le chapitre.