tRPC + TanStack Query + Next.js App Router

End-to-end typesafe APIs for Next.js using tRPC v11 with @trpc/tanstack-react-query adapter.

Core Setup

• setup - Full setup from scratch with all modules
• routers - Creating routers, procedures, middleware
• client-usage - Queries, mutations, useUtils in client components
• server-usage - Prefetching, hydration, getCaller in server components

Optional Integrations

• better-auth-integration - Add session/user to tRPC context with Better Auth
• optimistic-updates - Update UI before server confirms
• infinite-queries - Cursor-based pagination
• subscriptions - WebSocket real-time updates

How to Use

Read individual reference files for detailed explanations and code examples:

references/setup.md
references/routers.md
references/client-usage.md

Each reference file contains:

• Code examples with imports
• Usage patterns
• Common variations

Common Gotchas

1. Cookies not sent - Add credentials: "include" to httpBatchLink fetch
2. Hydration mismatch - Ensure superjson transformer on both client and server
3. staleTime: 0 - Causes refetch on every mount; use 30s+ for most cases
4. Missing HydrateClient - Prefetched data won't transfer to client
5. cache() not used - getCaller/getQueryClient must be wrapped in React cache()

Resources

• tRPC Docs
• TanStack Query Docs