Vanilla Client for server-to-server and unsupported frameworks
To call a tRPC API from another server or from a frontend framework for which tRPC does not have an integration, use the Vanilla Client.
client overview
43 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Community-built integrations available for other frameworks
In addition to the React, Next.js, and Vanilla Client integrations, there are community-built integrations for other frameworks, though these are not maintained by the tRPC team.
tRPC requires a client for typesafety benefits
While a tRPC API can be called using normal HTTP requests like any other REST API, a client is needed to benefit from tRPC's typesafety. A client knows the procedures available in the API and their inputs and outputs, providing autocomplete on queries and mutations, correctly typing returned data, and showing errors if requests don't match the backend shape.
RSC solves many tRPC problems; may not be needed
React Server Components on their own solve many of the same problems tRPC was designed to solve. Integration with RSC frameworks like Next.js App Router may not require tRPC at all.
AbortController support for canceling procedures
tRPC supports the standard AbortController/AbortSignal API for aborting procedures. Pass an AbortSignal to the query or mutation options and call the AbortController instance's abort method if you need to cancel the request.
AbortSignal usage example with tRPC client
Create a tRPC client with httpBatchLink, instantiate an AbortController, pass its signal to a procedure call via the signal option (e.g., client.userById.query('id_bilbo', { signal: ac.signal })), and call ac.abort() to cancel the request.
When to use vanilla tRPC client
Use the vanilla tRPC client in two scenarios: with a frontend framework for which there is no official tRPC integration, or with a separate backend service written in TypeScript.
When not to use vanilla client in React
Do not use the vanilla client to call procedures from React components. Use the TanStack React Query Integration instead, which offers features such as managing loading and error state, caching, and invalidation.
Do not use vanilla client for same API instance calls
Do not use the vanilla client when calling procedures of the same API instance, because the invocation has to pass through the network layer. For complete recommendations on invoking a procedure in the current API, refer to the server-side calls documentation.
Vanilla tRPC client creation with httpBatchLink
To create a vanilla tRPC client, use createTRPCClient with a generic type of your AppRouter and configure it with links, such as httpBatchLink. Example: const client = createTRPCClient<AppRouter>({ links: [httpBatchLink({ url: 'http://localhost:3000' })] });
Calling procedures with vanilla client
With a vanilla tRPC client, you can call your API procedures as if they are local functions. For a query procedure, use await client.procedureName.query(input). The result is type-safe based on your router definition.
Install tRPC Client library
Install both @trpc/server and @trpc/client. The @trpc/server package contains required types needed by the client.
Create tRPC client with createTRPCClient
Use the createTRPCClient method to initialize a tRPC client, passing a generic type parameter of your AppRouter. The method accepts a configuration object with a links array containing terminating links that point to your API.
Call queries on tRPC client
To call a query procedure, use client.procedureName.query(input). The input is type-checked against the procedure's input validation.
Call mutations on tRPC client
To call a mutation procedure, use client.procedureName.mutate(input). The input is type-checked against the procedure's input validation.
Vanilla tRPC client example with query and mutation
import { createTRPCClient, httpBatchLink } from '@trpc/client'; import type { AppRouter } from './server'; const client = createTRPCClient<AppRouter>({ links: [httpBatchLink({ url: 'http://localhost:3000/trpc' })], }); const bilbo = await client.getUser.query('id_bilbo'); // => { id: 'id_bilbo', name: 'Bilbo' }; const frodo = await client.createUser.mutate({ name: 'Frodo' }); // => { id: 'id_frodo', name: 'Frodo' };
tRPC state management wrappers
Community projects provide wrappers for tRPC with state management libraries: jotai-trpc (Jotai wrapper around tRPC vanilla client), trpc-zustand (Zustand wrapper around tRPC client), and trpc-rtk-query (automatically generate RTK Query api endpoints from tRPC setup).
Context extension with middleware
Middleware can change the type of Context. The approach for this is documented in the Context Extension section of the server middlewares documentation.
tRPC production readiness
tRPC is production-ready and stable, used by thousands of companies in production including Netflix and Pleo.
Unstable features safety
Features marked with unstable_ prefix are safe to use in production. While the implementation specifics might change in minor version bumps, such features are already used in production. Changes to unstable_ features will be documented in release notes with type errors showing migration paths. Issues and suggestions should be reported on GitHub or in the Discord #🧪-unstable-experimental-features channel.
Experimental features stability
Features marked with experimental_ prefix are not stable and very likely to change with any version bump. The feature and its usage might change significantly, it might not be well-tested, and could be dropped entirely. Changes might not be documented in release notes and bugs are not guaranteed to be fixed. Users should read the latest docs and upgrade without a guaranteed migration path.
tRPC semantic versioning commitment
tRPC is strict with semantic versioning and will never introduce breaking changes in minor version bumps. Changes to exported TypeScript types are considered major version changes, except for types marked as @internal in JSDoc.
tRPC target audience and use cases
tRPC is designed for full-stack TypeScripters building monorepos where type definitions are exported and imported between server and client. It is not suitable for projects with mixed programming languages or third-party consumers outside your control, which should use language-agnostic APIs like GraphQL instead.
tRPC vs GraphQL differences
tRPC is simpler than GraphQL and couples the server and client more tightly together. Unlike GraphQL, which requires solving ACL on a per-type basis, complexity analysis, and performance considerations, tRPC allows faster development, schema-less changes, and avoids thinking about a traversable graph. tRPC borrows concepts from GraphQL such as input types and resolvers.
Client setup with createTRPCClient and httpBatchLink
Create a tRPC client by calling createTRPCClient with a generic type parameter of your AppRouter type, and configure it with a links array containing an httpBatchLink. The httpBatchLink takes a url option pointing to your server endpoint (e.g., 'http://localhost:3000').
tRPC definition and core concept
tRPC stands for TypeScript Remote Procedure Call. It lets you build and consume fully typesafe APIs without schemas or code generation. It combines concepts from REST and GraphQL.
tRPC has zero runtime dependencies
tRPC has zero runtime dependencies and a tiny client-side footprint.
tRPC supports request batching
tRPC supports request batching where requests made at the same time can be automatically combined into one.
Frontend integration options for tRPC
On the frontend, you can use TanStack React Query, Next.js integrations, a third-party integration for a variety of other frameworks, or the Vanilla Client which works anywhere JavaScript runs.
Migration strategy for adding tRPC to existing projects
You do not need to port all existing backend logic to tRPC. A common migration strategy is to initially only use tRPC for new endpoints, and only later migrate existing endpoints to tRPC.
TanStack Intent skills for AI agents
tRPC ships with TanStack Intent skills to help AI coding agents work with tRPC. When an agent works on a task that matches a skill mapping, the corresponding skill file is automatically loaded into context.
Install TanStack Intent skills
Run `npx @tanstack/intent@latest install` to guide the agent through setup and configure it to access skills shipped in tRPC and other installed packages.
Skills auto-load during agent tasks
When an agent works on a task that matches a mapping, the corresponding SKILL.md file is automatically loaded into context to guide implementation.
Skills version with library releases
Skills version with library releases. When you update a library like npm update @trpc/server, the new version brings updated skills automatically because they are shipped with the library and always match the installed code version.
List available TanStack Intent skills
Run `npx @tanstack/intent@latest list` to see what skills are available.
Check for stale skill documentation
Run `npx @tanstack/intent@latest stale` to check if any skills reference outdated source documentation.
Submit feedback on TanStack Intent skills
Run `npx @tanstack/intent@latest meta feedback-collection` to submit feedback and help maintainers improve skills by collecting structured information about gaps, errors, and improvements.
Create tRPC client with createTRPCClient
Use createTRPCClient with AppRouter type parameter to create a typed tRPC client. Pass AppRouter as a type parameter so the client knows what procedures are available on the server and their input/output types.
tRPC client setup example
import { createTRPCClient, httpBatchLink } from '@trpc/client'; import type { AppRouter } from './appRouter'; const trpc = createTRPCClient<AppRouter>({ links: [ httpBatchLink({ url: 'http://localhost:3000', }), ], });
createTRPCClient renamed from proxy version
createTRPCClient was deprecated from v9 and removed in v11. The createTRPCProxyClient has been renamed to createTRPCClient. createTRPCProxyClient is now marked as deprecated.
tRPC client vanilla TypeScript setup
Create a vanilla TypeScript client using createTRPCClient with configured links, headers, and AppRouter type. Refer to client-setup skill for full details.
Minimal tRPC client with httpBatchLink
Create a client using createTRPCClient with a links array containing httpBatchLink({ url: 'http://...' }). Pass the AppRouter type as a generic. Call procedures like trpc.procedureName.query(input) to fetch data.
Create tRPC client with createClient
Create a tRPC client using trpc.createClient() with a url option pointing to your tRPC API endpoint. Example: trpc.createClient({ url: 'http://localhost:5000/trpc' })