ڈیٹا اور روٹ ہینڈلرز
app/api سے ڈیپلائمنٹس پیش کریں، صفحے میں انہیں حاصل کریں اور نئی ڈیپلائمنٹس پوسٹ کریں۔
اس باب میں
- ایک روٹ ہینڈلر
- صفحے میں ڈیٹا فیچ کرنا
- لوڈنگ اور ایرر کی حالتیں
- اسٹریمنگ
Acme Deploys کو حقیقی ڈیٹا درکار ہے۔ روٹ ہینڈلرز app/ ڈائریکٹری میں آپ کے صفحات کے ساتھ رہتے ہیں، ویب کے Request اور Response APIs استعمال کرتے ہیں، اور 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 سوالاتباب مکمل کرنے کے لیے ہر سوال کا جواب دیں۔