Data & route handler
Sajikan deployment dari app/api, ambil di halaman, dan kirim yang baru.
Dalam bab ini
- Route handler
- Mengambil data di halaman
- Status pemuatan dan error
- Streaming
Acme Deploys membutuhkan data nyata. Route handler berada di samping halaman Anda di app/, menggunakan API Web Request dan Response, serta berjalan pada text dev dan text start. Origin-nya sama dengan aplikasi, sehingga permintaan tidak memerlukan pengaturan CORS.
Route handler
Ditambahkan: import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";Ditambahkan: Ditambahkan: export function GET(): Response {Ditambahkan: return Response.json(DEPLOYMENTS);Ditambahkan: }Ditambahkan: Ditambahkan: export async function POST(req: Request): Promise<Response> {Ditambahkan: const deployment = createDeployment(await req.json());Ditambahkan: return Response.json(deployment, { status: 201 });Ditambahkan: }Panggil dari prompt konsol saat text dev berjalan:
await (await fetch("/api/deployments")).json()Mengambil data di halaman
Ambil data dalam effect dan tampilkan <Spinner> hingga data tiba. r mengambil ulang data; n mengirim deployment baru, yang muncul dengan status building dan berubah menjadi ready setelah build selesai.
Dihapus: import { DEPLOYMENTS } from "../../lib/deployments";Ditambahkan: import { useEffect, useState } from "react";Ditambahkan: import { Spinner, useInput } from "@textjs/app";Ditambahkan: import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {Ditambahkan: const [rows, setRows] = useState<Deployment[]>([]);Ditambahkan: const [loading, setLoading] = useState(true);Ditambahkan: Ditambahkan: const refetch = async () => {Ditambahkan: setLoading(true);Ditambahkan: setRows(await (await fetch("/api/deployments")).json());Ditambahkan: setLoading(false);Ditambahkan: };Ditambahkan: useEffect(() => void refetch(), []);Ditambahkan: Ditambahkan: useInput((e) => {Ditambahkan: if (e.input === "r") void refetch();Ditambahkan: if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);Ditambahkan: });Ditambahkan: Ditambahkan: if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">Dihapus: {DEPLOYMENTS.map((d) => (Ditambahkan: {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">Ditambahkan: <Status status={d.status} /> …Status pemuatan dan error
Alih-alih menangani loading secara manual, loading.tsx di samping halaman ditampilkan saat halaman ditangguhkan, dan error.tsx menangkap apa pun yang dilempar halaman. Keduanya adalah komponen biasa:
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}Streaming
Handler dapat mengembalikan ReadableStream, yang mengalirkan log build ke dasbor baris demi baris. Lihat Route handler untuk server-sent events dan penggunaan proksi untuk daemon lokal.
Coba
Ini Acme Deploys di akhir bab, berjalan di DevTools. Klik pad, lalu gunakan tombol di bawah.
Buka konsol
Aplikasi ini di-render di DevTools.Aktifkan dahulu “Tampilkan fitur untuk pengembang web” di Setelan Safari → Lanjutan. Lalu klik di sini dan tekan r.
Buka di desktop
Aplikasi ini di-render di konsol DevTools, yang memerlukan browser desktop.
Kuis
2 pertanyaanJawab semua pertanyaan untuk menyelesaikan bab.