TanStack React Query
TanStack React Query integration for tRPC
This is the recommended way to use tRPC with React and TanStack Query. It provides factories for common TanStack React Query interfaces like QueryKeys, QueryOptions, and MutationOptions, giving you a more TanStack Query-native experience.
If you're starting a new project, use this integration rather than the classic React Query integration, which only gets bug fixes and will be removed in the next major version of tRPC. To move an existing project, follow the migration guide. Read the announcement post for more information about this change.
Head to the Setup guide to get started.
Pages under TanStack React Query
- SetupSet up the TanStack React Query integration with or without React context, then query, mutate and invalidate
- UsageThe options and key factories on the trpc proxy, such as queryOptions, infiniteQueryOptions, mutationOptions, subscriptionOptions, queryKey, queryFilter and pathFilter, plus key prefixing and type inference
- MigratingMigrating from the classic React Client
- Server ComponentsPrefetch tRPC queries in React Server Components, hydrate them into client components, and call procedures directly on the server