Integrations
Data fetching for every TanStack Query framework, React and Next.js, and the libraries tRPC works with.
On this page
The core client works anywhere (The client). These pages cover the packages and recipes that fit it into a framework or a library.
Data fetching
TanStack Query is the stable way to fetch in a UI: @trpc12/tanstack-query makes query, mutation and subscription options, and a package per framework provides the client to components.
- Frameworks: React, Preact, Vue, Solid, Svelte, Angular and Lit.
- Topics: query keys and filters, subscriptions, streamed mutations, hydration and offline mutations and TanStack DB.
React and Next.js
React and Next.js compares the ways to fetch in React, and covers the server side:
- React Server Components: prefetch in server components, stream pending queries to the browser, and tag Next's data cache by query key.
- Server Actions: procedures as Server Actions that take typed input or
FormData. - React without TanStack Query: render-as-you-fetch with
use()and Suspense, where cache features are links. Experimental. - React atoms: query, mutation and subscription atoms on Effect Atom. Experimental.
Libraries
- AI SDK: stream
useChatresponses from a procedure, and give procedures to the model as tools. - Better Auth: read the session in a middleware and type
ctx.userwith Better Auth's user. - NestJS: serve a contract from Nest controllers with
@trpc12/nest.
For OpenAPI tools and REST clients, see OpenAPI.