נתונים ומטפלי נתיבים

הגשת פריסות מתוך ⁦app/api⁩, שליפתן בדף ושליחת פריסות חדשות.

האפליקציה של הפרק הזה רצה במסוף. יש לפתוח אותו עם ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (תחילה להפעיל תכונות למפתחים), ואז לנסות אותה.
צפייה בפרק3:32

בפרק הזה

  • מטפל נתיב
  • אחזור נתונים בדף
  • מצבי טעינה ושגיאה
  • הזרמה

⁦Acme Deploys⁩ זקוקה לנתונים אמיתיים. מטפלי נתיב נמצאים לצד הדפים בתיקייה app/, משתמשים בממשקי ה-API של Web מסוג Request ו-Response, ופועלים ב-text dev וב-text start. הם חולקים את המקור של האפליקציה, ולכן בקשות לא דורשות הגדרת CORS.

מטפל נתיב

app/api/deployments/route.ts+10ts
נוסף: 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 שולח פריסה חדשה, שמופיעה במצב בנייה ועוברת למצב מוכן כשהבנייה מסתיימת.

app/deployments/page.tsx+21-2tsx
הוסר: 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 לוכד כל שגיאה שהדף זורק. שניהם רכיבים רגילים:

app/deployments/loading.tsxtsx
import { Spinner } from "@textjs/app";export default function Loading() {  return <Spinner label="Loading deployments…" />;}

הזרמה

מטפלים יכולים להחזיר ReadableStream, וכך יומני הבנייה מוזרמים ללוח הבקרה שורה אחר שורה. למידע על אירועים שנשלחים מהשרת ועל העברת בקשות לשירות רקע מקומי, יש לעיין במטפלי נתיב.

התנסות

זו Acme Deploys בסוף הפרק, רצה ב-DevTools. יש ללחוץ על המשטח, ואז להשתמש במקשים שלמטה.

▼ 06 · נתונים ומטפלי נתיבים

פתיחת המסוף

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

האפליקציה מרונדרת ב-DevTools.תחילה יש להפעיל את "הצגת תכונות למפתחי אתרים" בהגדרות Safari → מתקדם. אחר כך ללחוץ כאן וללחוץ על r.

פתיחה במחשב

האפליקציה הזו מרונדרת במסוף של DevTools, שדורש דפדפן במחשב.

בוחן

2 שאלות

להשלמת הפרק, יש לענות על כל השאלות.

מה מחזירים מטפלי נתיבים?

 

איזה קובץ מוצג כשנתיב מושהה?