Veri ve rota işleyicileri
Dağıtımları app/api üzerinden sunun, bir sayfada alın ve yenilerini gönderin.
Bu bölümde
- Bir rota işleyicisi
- Sayfada veri çekme
- Yükleme ve hata durumları
- Akış
Acme Deploys gerçek veriye ihtiyaç duyar. Rota işleyicileri app/ dizininde sayfalarınızın yanında bulunur, Web Request ve Response API’lerini kullanır ve text dev ile text start komutlarında çalışır. Uygulamayla aynı kaynağı paylaştıkları için isteklerde CORS yapılandırması gerekmez.
Bir rota işleyicisi
Eklenen: import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";Eklenen: Eklenen: export function GET(): Response {Eklenen: return Response.json(DEPLOYMENTS);Eklenen: }Eklenen: Eklenen: export async function POST(req: Request): Promise<Response> {Eklenen: const deployment = createDeployment(await req.json());Eklenen: return Response.json(deployment, { status: 201 });Eklenen: }text dev komutu çalışırken konsol isteminden çağırın:
await (await fetch("/api/deployments")).json()Sayfada veri çekme
Bir effect içinde veri çekin ve veri gelene kadar bir <Spinner> gösterin. r veriyi yeniden çeker; n yeni bir dağıtım gönderir; bu dağıtım derleniyor olarak görünür ve derleme tamamlanınca hazır durumuna geçer.
Kaldırılan: import { DEPLOYMENTS } from "../../lib/deployments";Eklenen: import { useEffect, useState } from "react";Eklenen: import { Spinner, useInput } from "@textjs/app";Eklenen: import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {Eklenen: const [rows, setRows] = useState<Deployment[]>([]);Eklenen: const [loading, setLoading] = useState(true);Eklenen: Eklenen: const refetch = async () => {Eklenen: setLoading(true);Eklenen: setRows(await (await fetch("/api/deployments")).json());Eklenen: setLoading(false);Eklenen: };Eklenen: useEffect(() => void refetch(), []);Eklenen: Eklenen: useInput((e) => {Eklenen: if (e.input === "r") void refetch();Eklenen: if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);Eklenen: });Eklenen: Eklenen: if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">Kaldırılan: {DEPLOYMENTS.map((d) => (Eklenen: {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">Eklenen: <Status status={d.status} /> …Yükleme ve hata durumları
loading durumunu elle yönetmek yerine, sayfa askıya alındığında yanındaki loading.tsx gösterilir ve error.tsx sayfanın fırlattığı tüm hataları yakalar. İkisi de standart bileşenlerdir:
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}Akış
İşleyiciler bir ReadableStream döndürebilir; derleme günlükleri bu yolla panoya satır satır akar. Sunucudan gönderilen olaylar ve yerel bir daemon’a proxy üzerinden erişim için Rota işleyicileri bölümüne bakın.
Dene
Bu, Acme Deploys uygulamasının bölüm sonundaki hâli; DevTools’ta çalışıyor. Odak alanına tıklayın, ardından aşağıdaki tuşları kullanın.
Konsolu açın
Uygulama DevTools’ta render edilir.Önce Safari Ayarlar → İleri Düzey bölümünde “Web geliştiricileri için özellikleri göster” seçeneğini açın. Sonra buraya tıklayın ve r tuşuna basın.
Masaüstünde açın
Bu uygulama DevTools konsolunda render edilir; bunun için masaüstü tarayıcısı gerekir.
Test
2 soruBölümü tamamlamak için tüm soruları yanıtlayın.