@trpc/client

About

The tRPC client library

What detecting @trpc/client tells you about a site

@trpc/client reveals an end-to-end type-safe API without a schema language — the front end calls backend procedures as if they were local functions, with TypeScript types flowing across the wire. Its presence is a strong marker of a full-stack TypeScript monorepo built for tight type safety between client and server.

Why the exact @trpc/client version matters

tRPC v10 rewrote the client/server API and v11 refined it; the exact version tells you which procedure-builder and client API the code targets.

@trpc/client in a real-world stack

When you find @trpc/client in a bundle, it rarely travels alone. @trpc/server, zod for input validation, and @tanstack/react-query (which tRPC's React client wraps).

Quick facts

Common 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

@trpc/client ships as v11.18.0, published 2026-06-17 and carries 0 direct dependencies, 2 peer dependencies (typescript, @trpc/server), 1,352 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when @trpc/client rides inside a deployed bundle — here is how the detection works.

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. 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 — that map is where the `@trpc/client` paths live.

2. 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. 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.

Major releases of @trpc/client

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the @trpc/client version a site actually ships against the ecosystem.

Recent versions

@trpc/client README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

# npm
npm install @trpc/client

# Yarn
yarn add @trpc/client

# pnpm
pnpm add @trpc/client

# Bun
bun add @trpc/client

npx @tanstack/intent@latest install

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();

FAQ