נתונים ומטפלי נתיבים
הגשת פריסות מתוך app/api, שליפתן בדף ושליחת פריסות חדשות.
בפרק הזה
- מטפל נתיב
- אחזור נתונים בדף
- מצבי טעינה ושגיאה
- הזרמה
Acme Deploys זקוקה לנתונים אמיתיים. מטפלי נתיב נמצאים לצד הדפים בתיקייה app/, משתמשים בממשקי ה-API של Web מסוג Request ו-Response, ופועלים ב-text dev וב-text start. הם חולקים את המקור של האפליקציה, ולכן בקשות לא דורשות הגדרת CORS.
מטפל נתיב
נוסף: import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";נוסף: נוסף: export function GET(): Response {נוסף: return Response.json(DEPLOYMENTS);נוסף: }נוסף: נוסף: export async function POST(req: Request): Promise<Response> {נוסף: const deployment = createDeployment(await req.json());נוסף: return Response.json(deployment, { status: 201 });נוסף: }יש לקרוא לו משורת הפקודה במסוף בזמן ש-text dev פועל:
await (await fetch("/api/deployments")).json()אחזור נתונים בדף
יש לאחזר נתונים בתוך אפקט ולהציג <Spinner> עד שהנתונים מגיעים. r מאחזר מחדש; n שולח פריסה חדשה, שמופיעה במצב בנייה ועוברת למצב מוכן כשהבנייה מסתיימת.
הוסר: import { DEPLOYMENTS } from "../../lib/deployments";נוסף: import { useEffect, useState } from "react";נוסף: import { Spinner, useInput } from "@textjs/app";נוסף: import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {נוסף: const [rows, setRows] = useState<Deployment[]>([]);נוסף: const [loading, setLoading] = useState(true);נוסף: נוסף: const refetch = async () => {נוסף: setLoading(true);נוסף: setRows(await (await fetch("/api/deployments")).json());נוסף: setLoading(false);נוסף: };נוסף: useEffect(() => void refetch(), []);נוסף: נוסף: useInput((e) => {נוסף: if (e.input === "r") void refetch();נוסף: if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);נוסף: });נוסף: נוסף: if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">הוסר: {DEPLOYMENTS.map((d) => (נוסף: {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">נוסף: <Status status={d.status} /> …מצבי טעינה ושגיאה
במקום לטפל ב-loading ידנית, הקובץ loading.tsx שלצד הדף מוצג בזמן שהדף מושהה, ו-error.tsx לוכד כל שגיאה שהדף זורק. שניהם רכיבים רגילים:
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}הזרמה
מטפלים יכולים להחזיר ReadableStream, וכך יומני הבנייה מוזרמים ללוח הבקרה שורה אחר שורה. למידע על אירועים שנשלחים מהשרת ועל העברת בקשות לשירות רקע מקומי, יש לעיין במטפלי נתיב.
התנסות
זו Acme Deploys בסוף הפרק, רצה ב-DevTools. יש ללחוץ על המשטח, ואז להשתמש במקשים שלמטה.
פתיחת המסוף
האפליקציה מרונדרת ב-DevTools.תחילה יש להפעיל את "הצגת תכונות למפתחי אתרים" בהגדרות Safari → מתקדם. אחר כך ללחוץ כאן וללחוץ על r.
פתיחה במחשב
האפליקציה הזו מרונדרת במסוף של DevTools, שדורש דפדפן במחשב.
בוחן
2 שאלותלהשלמת הפרק, יש לענות על כל השאלות.