Dados e manipuladores de rota
Sirva deploys de app/api, busque-os em uma página e envie novos.
Neste capítulo
- Um manipulador de rota
- Buscar dados em uma página
- Estados de carregamento e erro
- Streaming
Acme Deploys precisa de dados reais. Manipuladores de rota ficam junto das suas páginas em app/, usam as APIs Web Request e Response e são executados com text dev e text start. Eles compartilham a origem do app, então as requisições não precisam de configuração de CORS.
Um manipulador de rota
Adicionado: import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";Adicionado: Adicionado: export function GET(): Response {Adicionado: return Response.json(DEPLOYMENTS);Adicionado: }Adicionado: Adicionado: export async function POST(req: Request): Promise<Response> {Adicionado: const deployment = createDeployment(await req.json());Adicionado: return Response.json(deployment, { status: 201 });Adicionado: }Chame o manipulador pelo prompt do console enquanto text dev estiver em execução:
await (await fetch("/api/deployments")).json()Buscar dados em uma página
Busque os dados em um efeito e mostre um <Spinner> até os dados chegarem. r busca novamente; n envia um novo deploy, que aparece como em build e muda para pronto quando o build termina.
Removido: import { DEPLOYMENTS } from "../../lib/deployments";Adicionado: import { useEffect, useState } from "react";Adicionado: import { Spinner, useInput } from "@textjs/app";Adicionado: import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {Adicionado: const [rows, setRows] = useState<Deployment[]>([]);Adicionado: const [loading, setLoading] = useState(true);Adicionado: Adicionado: const refetch = async () => {Adicionado: setLoading(true);Adicionado: setRows(await (await fetch("/api/deployments")).json());Adicionado: setLoading(false);Adicionado: };Adicionado: useEffect(() => void refetch(), []);Adicionado: Adicionado: useInput((e) => {Adicionado: if (e.input === "r") void refetch();Adicionado: if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);Adicionado: });Adicionado: Adicionado: if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">Removido: {DEPLOYMENTS.map((d) => (Adicionado: {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">Adicionado: <Status status={d.status} /> …Estados de carregamento e erro
Em vez de tratar loading manualmente, um loading.tsx junto da página é exibido enquanto ela está suspensa, e error.tsx captura qualquer erro que ela lance. Ambos são componentes comuns:
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}Streaming
Manipuladores podem retornar um ReadableStream, que permite transmitir os logs de build para o painel linha por linha. Consulte Manipuladores de rota para saber sobre eventos enviados pelo servidor e o uso de proxy para um daemon local.
Experimentar
Este é Acme Deploys ao final do capítulo, rodando no DevTools. Clique na área de entrada e use as teclas abaixo.
Abrir o console
O app renderiza no DevTools.Primeiro ative “Mostrar recursos para desenvolvedores web” em Ajustes do Safari → Avançado. Depois clique aqui e pressione r.
Abrir em um computador
Este app renderiza no console do DevTools, que precisa de um navegador de computador.
Questionário
2 perguntasResponda a todas as perguntas para concluir o capítulo.