@trpc/client
The tRPC client library
About
The tRPC client library
Live mirror of the GitHub README. Updated whenever the repo's default branch changes.
tRPC
End-to-end typesafe APIs made easy
@trpc/client
Communicate with a tRPC server on the client side.
Documentation
Full documentation for @trpc/client can be found here
Installation
# npm
npm install @trpc/client
# Yarn
yarn add @trpc/client
# pnpm
pnpm add @trpc/client
# Bun
bun add @trpc/client
AI Agents
If you use an AI coding agent, install tRPC skills for better code generation:
npx @tanstack/intent@latest install
Basic Example
import { createTRPCClient, httpBatchLink } from '@trpc/client';
// Importing the router type from the server file
import type { AppRouter } from './server';
// Initializing the tRPC client
const trpc = createTRPCClient<AppRouter>({
links: [
httpBatchLink({
url: 'http://localhost:3000/trpc',
}),
],
});
async function main() {
// Querying the greeting
const helloResponse = await trpc.greeting.query({
name: 'world',
});
console.log('helloResponse', helloResponse); // Hello world
}
main();
Quick facts
npm install @trpc/clientCommon pairings
Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.
How Sourcemap Explorer detects @trpc/client
We catch @trpc/client from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/@trpc/client/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.
- 1
Confirm the site exposes sourcemaps
In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment.
- 2
Find the package in the bundle
Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/@trpc/client/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/@trpc/client/package.json` gives you the exact installed version.
- 3
Read the version directly from package.json
Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/@trpc/client/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.
Recent versions
FAQ
What is @trpc/client used for?
The tRPC client library
How can I tell if a website is using @trpc/client?
Open the page in Chrome with the Sourcemap Explorer extension installed and read the Stack tab. We catch `@trpc/client` from two complementary signals: `node_modules/@trpc/client/` paths inside the JavaScript sourcemap, and the embedded `package.json` we read for exact-version detection. Without the extension you can do the same lookup manually in DevTools — the steps are listed in the "How Sourcemap Explorer detects" section above.
What is the latest version of @trpc/client?
11.17.0, as published on the npm registry. The "Recent versions" table on this page lists the most recent 8 releases with their release dates. Sourcemap Explorer reports the version actually bundled into a site, which can lag the latest release by months on real-world deployments.
Where can I read more?
Project homepage: https://trpc.io. Source code: https://github.com/trpc/trpc. Published on npm: https://www.npmjs.com/package/@trpc/client. Licensed as MIT.
Detected by Sourcemap Explorer
When a bundle ships sourcemaps, we read the embedded package.json for @trpc/client and report the precise version. Without sourcemaps, an import / require in the page's scripts is enough to flag it.