129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { trpc } from "@/lib/trpc";
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { InfoIcon, Loader2 } from "lucide-react";
|
|
|
|
export default function TRPCDemoPage() {
|
|
return (
|
|
<div className="container mx-auto p-8 max-w-4xl">
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-bold mb-2">tRPC + TaylorDB Demo</h1>
|
|
<p className="text-muted-foreground">
|
|
Example of type-safe API calls with tRPC
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6">
|
|
{/* Info Alert */}
|
|
<Alert>
|
|
<InfoIcon className="h-4 w-4" />
|
|
<AlertTitle>Template Example</AlertTitle>
|
|
<AlertDescription>
|
|
This page demonstrates a simple tRPC query. Replace this with your
|
|
own queries based on your TaylorDB schema. See{" "}
|
|
<code className="font-mono text-sm">apps/server/router.ts</code> to
|
|
add more procedures.
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
{/* Example: Hello Query */}
|
|
<HelloExample />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================================================
|
|
// Example Component: Simple Query
|
|
// ============================================================================
|
|
|
|
function HelloExample() {
|
|
const [name, setName] = useState("");
|
|
const { data, isLoading, refetch } = trpc.hello.useQuery(
|
|
{ name: name || undefined },
|
|
{ enabled: false } // Only run when user clicks button
|
|
);
|
|
|
|
const handleQuery = () => {
|
|
refetch();
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Example: Hello Query</CardTitle>
|
|
<CardDescription>
|
|
A simple tRPC query to test the connection
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="name">Name (optional)</Label>
|
|
<Input
|
|
id="name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="Enter your name..."
|
|
/>
|
|
</div>
|
|
|
|
<Button onClick={handleQuery} disabled={isLoading}>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Loading...
|
|
</>
|
|
) : (
|
|
"Send Query"
|
|
)}
|
|
</Button>
|
|
|
|
{data && (
|
|
<div className="mt-4 p-4 border rounded-lg bg-muted/50">
|
|
<p className="font-medium text-sm mb-2">Response:</p>
|
|
<pre className="text-sm">{JSON.stringify(data, null, 2)}</pre>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* ============================================================================
|
|
* Add Your Own Components Here
|
|
* ============================================================================
|
|
*
|
|
* Follow this pattern to create your own tRPC queries and mutations:
|
|
*
|
|
* 1. Create procedures in apps/server/router.ts
|
|
* 2. Use trpc.<procedure>.useQuery() for queries (reading data)
|
|
* 3. Use trpc.<procedure>.useMutation() for mutations (writing data)
|
|
* 4. Handle loading and error states
|
|
* 5. Refetch queries after mutations to update the UI
|
|
*
|
|
* Example Query:
|
|
* const { data, isLoading, error } = trpc.items.getAll.useQuery();
|
|
*
|
|
* Example Mutation:
|
|
* const createMutation = trpc.items.create.useMutation({
|
|
* onSuccess: () => {
|
|
* // Refetch or invalidate queries
|
|
* },
|
|
* });
|
|
*
|
|
* For comprehensive examples, see:
|
|
* - docs/SHADCN_COMPONENTS_GUIDE.md - UI component patterns
|
|
* - AGENTS.md - Complete development workflow
|
|
*/
|