Dane i handlery tras
Udostępniaj wdrożenia z app/api, pobieraj je na stronie i dodawaj nowe żądaniami POST.
W tym rozdziale
- Handler trasy
- Pobieranie danych na stronie
- Stany ładowania i błędów
- Strumieniowanie
Acme Deploys potrzebuje rzeczywistych danych. Handlery tras znajdują się obok stron w app/, korzystają z internetowych API Request i Response i działają przy uruchomionych text dev oraz text start. Mają to samo pochodzenie co aplikacja, więc żądania nie wymagają konfiguracji CORS.
Handler trasy
Dodano: import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";Dodano: Dodano: export function GET(): Response {Dodano: return Response.json(DEPLOYMENTS);Dodano: }Dodano: Dodano: export async function POST(req: Request): Promise<Response> {Dodano: const deployment = createDeployment(await req.json());Dodano: return Response.json(deployment, { status: 201 });Dodano: }Wywołaj go z wiersza poleceń konsoli, gdy działa text dev:
await (await fetch("/api/deployments")).json()Pobieranie danych na stronie
Pobierz dane w efekcie i wyświetlaj <Spinner>, dopóki dane nie dotrą. r pobiera dane ponownie; n wysyła nowe wdrożenie, które pojawia się ze statusem budowania i przechodzi w stan gotowości po zakończeniu budowania.
Usunięto: import { DEPLOYMENTS } from "../../lib/deployments";Dodano: import { useEffect, useState } from "react";Dodano: import { Spinner, useInput } from "@textjs/app";Dodano: import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {Dodano: const [rows, setRows] = useState<Deployment[]>([]);Dodano: const [loading, setLoading] = useState(true);Dodano: Dodano: const refetch = async () => {Dodano: setLoading(true);Dodano: setRows(await (await fetch("/api/deployments")).json());Dodano: setLoading(false);Dodano: };Dodano: useEffect(() => void refetch(), []);Dodano: Dodano: useInput((e) => {Dodano: if (e.input === "r") void refetch();Dodano: if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);Dodano: });Dodano: Dodano: if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">Usunięto: {DEPLOYMENTS.map((d) => (Dodano: {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">Dodano: <Status status={d.status} /> …Stany ładowania i błędów
Zamiast ręcznie obsługiwać loading, umieść obok strony plik loading.tsx, który jest wyświetlany, gdy strona wstrzymuje renderowanie, a error.tsx przechwytuje wszystko, co strona zgłasza. Oba są zwykłymi komponentami:
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}Strumieniowanie
Handlery mogą zwracać ReadableStream, dzięki czemu logi budowania trafiają strumieniowo do panelu, wiersz po wierszu. Informacje o zdarzeniach wysyłanych przez serwer i pośredniczeniu w komunikacji z lokalnym demonem znajdziesz w sekcji Handlery tras.
Wypróbuj
To Acme Deploys na końcu rozdziału, uruchomiona w DevTools. Kliknij panel, a potem użyj poniższych klawiszy.
Otwórz konsolę
Aplikacja renderuje się w DevTools.Najpierw włącz „Pokazuj funkcje dla deweloperów witryn” w Safari: Ustawienia → Zaawansowane. Potem kliknij tutaj i naciśnij r.
Otwórz na komputerze
Ta aplikacja renderuje się w konsoli DevTools, która wymaga przeglądarki na komputerze.
Quiz
2 pytaniaOdpowiedz na wszystkie pytania, aby ukończyć rozdział.