mcpField
T
trpc-tanstack-nextjs

trpc-tanstack-nextjs

github.com/diegojohnsonlDevelopment1128 installsUpdated 41w ago
Repository

About trpc-tanstack-nextjs

trpc-tanstack-nextjs is a reference skill for building end-to-end type-safe APIs with tRPC v11, TanStack Query, and the Next.js App Router. It covers setup, server and client usage, and optional integrations through focused guides and examples.

Key features

  1. 01Guides full tRPC setup
  2. 02Covers routers, procedures, and middleware
  3. 03Explains client queries and mutations
  4. 04Covers server prefetching and hydration
  5. 05Includes optional auth and realtime patterns

Use cases

  1. 01Setting up type-safe APIs in a Next.js app
  2. 02Using queries and mutations in client components
  3. 03Prefetching and hydrating data in server components

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/diegojohnsonl/trpc-tanstack-nextjs --skill trpc-tanstack-nextjs

After installing, type/trpc-tanstack-nextjsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
better-auth-integration.md
client-usage.md
infinite-queries.md
optimistic-updates.md
routers.md
server-usage.md
setup.md
subscriptions.md

Details

From the project README

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

Comments

Markdown supported