oRPC Proxy Setup
Client and server integration with TanStack Query
Overview
This project exposes two integration points:
src/rpc/react.tsxfor client components.src/rpc/server.tsxfor server prefetch + hydration.
Client Integration
RPCProvider is mounted in src/app/[locale]/providers.tsx.
Use useRpcUtils() to build query/mutation options:
"use client";
import { useRpcUtils } from "@/rpc/react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
export function MembersWidget() {
const rpc = useRpcUtils();
const queryClient = useQueryClient();
const members = useQuery(rpc.members.list.queryOptions({ input: { organizationId: "org-id" } }));
const removeMember = useMutation(
rpc.members.remove.mutationOptions({
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: rpc.members.key() });
},
}),
);
return null;
}Server Integration
Use server query utils for prefetching:
import { getServerQueryClient, rpc } from "@/rpc/server";
export default async function DashboardPage() {
await getServerQueryClient().prefetchQuery(
rpc.organizations.listUserOrganizations.queryOptions(),
);
return null;
}Transport Routes
- RPC transport:
/api/rpc/[...rpc] - OpenAPI transport:
/api/[...rpc-openapi] - OpenAPI JSON:
/api/openapi.json
Notes
- Client requests include
credentials: "include"for cookie-based auth. - API key auth is supported for procedures with
acceptApiKey: true. - Middleware behavior is defined in
src/rpc/procedures/rpc.ts.