44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui';
|
|
import { trpc } from '@/lib/trpc/client';
|
|
|
|
/**
|
|
* Client-side ping. Demonstrates the second tRPC path: client hooks +
|
|
* TanStack Query. The RSC caller above the fold and this hook hit the same
|
|
* procedure — both must succeed for the hybrid wiring to be considered green.
|
|
*/
|
|
export function PingClient() {
|
|
const query = trpc.ping.ping.useQuery();
|
|
|
|
return (
|
|
<Card data-testid="ping-client">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
{query.isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : query.isError ? (
|
|
<AlertCircle className="h-4 w-4 text-destructive" />
|
|
) : (
|
|
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
|
)}
|
|
Client-side ping (useQuery)
|
|
</CardTitle>
|
|
<CardDescription>Round-trips through /api/trpc.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="text-sm">
|
|
{query.isPending && <span>Loading…</span>}
|
|
{query.isError && (
|
|
<span className="text-destructive" data-testid="ping-client-error">
|
|
{query.error.message}
|
|
</span>
|
|
)}
|
|
{query.data && (
|
|
<span data-testid="ping-client-tenant">tenant: {query.data.tenant.name}</span>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|