डेटा और रूट हैंडलर
app/api से डिप्लॉयमेंट सर्व करें, पेज में फ़ेच करें और नए डिप्लॉयमेंट पोस्ट करें।
इस अध्याय में
- एक रूट हैंडलर
- पेज में डेटा फ़ेच करना
- लोडिंग और एरर स्टेट
- स्ट्रीमिंग
Acme Deploys को असली डेटा चाहिए। रूट हैंडलर app/ में आपके पेजों के साथ रहते हैं, Web के Request और Response API इस्तेमाल करते हैं और 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 सवालअध्याय पूरा करने के लिए हर सवाल का जवाब दें।