Datos y manejadores de ruta
Sirve despliegues desde app/api, cárgalos en una página y publica otros nuevos.
En este capítulo
- Un manejador de ruta
- Obtener datos en una página
- Estados de carga y error
- Transmisión de datos
Acme Deploys necesita datos reales. Los manejadores de ruta se encuentran junto a tus páginas en app/, usan las API web Request y Response, y se ejecutan con text dev y text start. Comparten el origen de la app, por lo que las solicitudes no necesitan configuración de CORS.
Un manejador de ruta
Añadido: import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";Añadido: Añadido: export function GET(): Response {Añadido: return Response.json(DEPLOYMENTS);Añadido: }Añadido: Añadido: export async function POST(req: Request): Promise<Response> {Añadido: const deployment = createDeployment(await req.json());Añadido: return Response.json(deployment, { status: 201 });Añadido: }Llámalo desde la línea de entrada de la consola mientras text dev se ejecuta:
await (await fetch("/api/deployments")).json()Obtener datos en una página
Obtén los datos en un efecto y muestra un <Spinner> hasta que lleguen. r vuelve a obtenerlos; n envía un nuevo despliegue, que aparece en estado de compilación y pasa a estar listo cuando termina la compilación.
Eliminado: import { DEPLOYMENTS } from "../../lib/deployments";Añadido: import { useEffect, useState } from "react";Añadido: import { Spinner, useInput } from "@textjs/app";Añadido: import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {Añadido: const [rows, setRows] = useState<Deployment[]>([]);Añadido: const [loading, setLoading] = useState(true);Añadido: Añadido: const refetch = async () => {Añadido: setLoading(true);Añadido: setRows(await (await fetch("/api/deployments")).json());Añadido: setLoading(false);Añadido: };Añadido: useEffect(() => void refetch(), []);Añadido: Añadido: useInput((e) => {Añadido: if (e.input === "r") void refetch();Añadido: if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);Añadido: });Añadido: Añadido: if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">Eliminado: {DEPLOYMENTS.map((d) => (Añadido: {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">Añadido: <Status status={d.status} /> …Estados de carga y error
En lugar de gestionar loading a mano, se muestra un loading.tsx situado junto a la página mientras esta se suspende, y error.tsx captura cualquier error que lance. Ambos son componentes normales:
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}Transmisión de datos
Los manejadores pueden devolver un ReadableStream, que permite transmitir los registros de compilación al panel línea por línea. Consulta Manejadores de ruta para obtener información sobre eventos enviados por el servidor y el uso de un proxy para un demonio local.
Probar
Esta es Acme Deploys al final del capítulo, ejecutándose en DevTools. Haz clic en el panel y usa las teclas de abajo.
Abrir la consola
La app se renderiza en DevTools.Primero activa «Mostrar funciones para desarrolladores web» en Configuración de Safari → Avanzado. Luego haz clic aquí y pulsa r.
Abrir en un equipo de escritorio
Esta app se renderiza en la consola de DevTools, que requiere un navegador de escritorio.
Cuestionario
2 preguntasResponde todas las preguntas para completar el capítulo.