データとルートハンドラー
app/apiからデプロイを配信し、ページで取得して、新しいデプロイをPOSTします。
この章の内容
- ルートハンドラー
- ページでのデータ取得
- 読み込みとエラーの状態
- ストリーミング
Acme Deploysには実データが必要です。ルートハンドラーは app/ 内のページと同じ場所に配置し、Webの Request APIと 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 で新しいデプロイをPOSTします。デプロイはビルド中として表示され、ビルドが完了すると準備完了に変わります。
削除：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 を返すことができ、これを使ってビルドログをダッシュボードに1行ずつストリーミングします。Server-Sent Eventsとローカルデーモンへのプロキシについては、ルートハンドラーを参照してください。
試す
これは章の終わりに完成するAcme Deploysで、DevToolsで動作しています。パッドをクリックして、以下のキーを使います。
コンソールを開く
アプリはDevToolsに描画されます。まずSafariの「設定」→「詳細」で「Webデベロッパ用の機能を表示」をオンにします。 次にここをクリックして、rを押します。
デスクトップで開く
このアプリはDevToolsのコンソールに描画されるため、デスクトップブラウザーが必要です。
クイズ
2問すべての問題に回答すると章を完了できます。