Dati e route handler
Servi i deploy da app/api, recuperali in una pagina e inviane di nuovi.
In questo capitolo
- Un route handler
- Recuperare dati in una pagina
- Stati di caricamento e di errore
- Streaming
Acme Deploys ha bisogno di dati reali. I route handler si trovano accanto alle tue pagine in app/, usano le API Web Request e Response e vengono eseguiti con text dev e text start. Condividono l’origine dell’app, quindi le richieste non richiedono una configurazione CORS.
Un route handler
Aggiunto: import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";Aggiunto: Aggiunto: export function GET(): Response {Aggiunto: return Response.json(DEPLOYMENTS);Aggiunto: }Aggiunto: Aggiunto: export async function POST(req: Request): Promise<Response> {Aggiunto: const deployment = createDeployment(await req.json());Aggiunto: return Response.json(deployment, { status: 201 });Aggiunto: }Chiamalo dal prompt della console mentre text dev è in esecuzione:
await (await fetch("/api/deployments")).json()Recuperare dati in una pagina
Recupera i dati in un effetto e mostra uno <Spinner> finché non arrivano. r recupera di nuovo i dati; n invia un nuovo deploy, che appare in fase di build e passa allo stato pronto al termine della build.
Rimosso: import { DEPLOYMENTS } from "../../lib/deployments";Aggiunto: import { useEffect, useState } from "react";Aggiunto: import { Spinner, useInput } from "@textjs/app";Aggiunto: import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {Aggiunto: const [rows, setRows] = useState<Deployment[]>([]);Aggiunto: const [loading, setLoading] = useState(true);Aggiunto: Aggiunto: const refetch = async () => {Aggiunto: setLoading(true);Aggiunto: setRows(await (await fetch("/api/deployments")).json());Aggiunto: setLoading(false);Aggiunto: };Aggiunto: useEffect(() => void refetch(), []);Aggiunto: Aggiunto: useInput((e) => {Aggiunto: if (e.input === "r") void refetch();Aggiunto: if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);Aggiunto: });Aggiunto: Aggiunto: if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">Rimosso: {DEPLOYMENTS.map((d) => (Aggiunto: {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">Aggiunto: <Status status={d.status} /> …Stati di caricamento e di errore
Invece di gestire loading a mano, un loading.tsx accanto alla pagina viene mostrato mentre questa è sospesa, e error.tsx intercetta qualsiasi errore generato dalla pagina. Entrambi sono normali componenti:
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}Streaming
Gli handler possono restituire un ReadableStream, che trasmette i log di build alla dashboard riga per riga. Consulta Route handler per gli eventi inviati dal server e l’uso di un proxy per un demone locale.
Provala
Questa è Acme Deploys alla fine del capitolo, in esecuzione in DevTools. Fai clic sul pannello del focus, poi usa i tasti qui sotto.
Apri la console
L’app viene renderizzata in DevTools.Prima attiva «Mostra funzionalità per sviluppatori web» in Safari Impostazioni → Avanzate. Poi fai clic qui e premi r.
Aprire su desktop
Questa app viene renderizzata nella console DevTools, che richiede un browser desktop.
Quiz
2 domandeRispondi a tutte le domande per completare il capitolo.