tRPC Client Setup

Name: tRPC Client Setup
Author: trpc

Create a vanilla tRPC client with createTRPCClient<AppRouter>(), configure the link chain with httpBatchLink/httpLink, dynamic auth…

You say

Buy it · $39 Read it before you buy $39 Written by trpc · unverified publisher

Context cost: 1.9k tokensestimated from the bundle, loaded when it triggers
Bundle: 1 file · 7.8 kBtext throughout, nothing executable
Licence: MITpaid listing
Last change: —no release on file
Servers it uses: Noneruns standalone

What it does

Create a vanilla tRPC client with createTRPCClient<AppRouter>(), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typing.

Installed, it changes the agent in these ways.

What this skill changes about the agent is not written down here yet. The listing was collected from its source, and the description is in its own SKILL.md.

Expertise

Domain judgement the base model does not have.

trpcapi-clienttypescript

Filed under

API Development

The skill itself

This is the whole product. A skill is instructions the model reads, so there is nothing behind the listing you cannot see first — the front matter loads with every session, and the body below it loads when the skill triggers.

SKILL.md7.8 kB · 318 lines

--- name: client-setup description: > Create a vanilla tRPC client with createTRPCClient<AppRouter>(), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typing. type: core library: trpc library_version: '11.16.0' requires: - server-setup sources: - www/docs/client/overview.md - www/docs/client/vanilla/overview.md - www/docs/client/vanilla/setup.mdx - www/docs/client/vanilla/infer-types.md - www/docs/client/headers.md - packages/client/src/internals/TRPCUntypedClient.ts ---

22# tRPC -- Client Setup

24## Setup

26```ts

27// server.ts

28import { initTRPC } from '@trpc/server';

29import { z } from 'zod';

31const t = initTRPC.create();

33const appRouter = t.router({

34 user: t.router({

35 byId: t.procedure

36 .input(z.object({ id: z.string() }))

37 .query(({ input }) => ({ id: input.id, name: 'Bilbo' })),

38 create: t.procedure

39 .input(z.object({ name: z.string() }))

40 .mutation(({ input }) => ({ id: '1', ...input })),

41 }),

42});

44export type AppRouter = typeof appRouter;

45```

47```ts

48// client.ts

49import { createTRPCClient, httpBatchLink } from '@trpc/client';

50import type { AppRouter } from './server';

52const client = createTRPCClient<AppRouter>({

53 links: [

54 httpBatchLink({

55 url: 'http://localhost:3000/trpc',

56 }),

57 ],

58});

60const user = await client.user.byId.query({ id: '1' });

61const created = await client.user.create.mutate({ name: 'Frodo' });

62```

64## Core Patterns

66### Dynamic Auth Headers

68```ts

69import { createTRPCClient, httpBatchLink } from '@trpc/client';

70import type { AppRouter } from './server';

72let token = '';

74export function setToken(newToken: string) {

75 token = newToken;

76}

78export const client = createTRPCClient<AppRouter>({

79 links: [

80 httpBatchLink({

81 url: 'http://localhost:3000/trpc',

82 headers() {

83 return {

84 Authorization: token ? Bearer ${token} : '',

85 };

86 },

87 }),

88 ],

89});

90```

92The headers callback is invoked on every HTTP request, so token changes take effect immediately.

94### Inferring Procedure Input and Output Types

96```ts

97import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';

98import type { AppRouter } from './server';

100type RouterInput = inferRouterInputs<AppRouter>;

101type RouterOutput = inferRouterOutputs<AppRouter>;

102

103type UserCreateInput = RouterInput['user']['create'];

104type UserByIdOutput = RouterOutput['user']['byId'];

105```

106

107### Aborting Requests with AbortController

108

109```ts

110import { createTRPCClient, httpBatchLink } from '@trpc/client';

111import type { AppRouter } from './server';

112

113const client = createTRPCClient<AppRouter>({

114 links: [httpBatchLink({ url: 'http://localhost:3000/trpc' })],

115});

116

117const ac = new AbortController();

118const query = client.user.byId.query({ id: '1' }, { signal: ac.signal });

119ac.abort();

120```

121

122### Typed Error Handling

123

124```ts

125import { TRPCClientError } from '@trpc/client';

126import type { AppRouter } from './server';

127

128function isTRPCClientError(

129 cause: unknown,

130): cause is TRPCClientError<AppRouter> {

131 return cause instanceof TRPCClientError;

132}

133

134try {

135 await client.user.byId.query({ id: '1' });

136} catch (cause) {

137 if (isTRPCClientError(cause)) {

138 console.log('tRPC error code:', cause.data?.code);

139 }

140}

141```

142

143## Common Mistakes

144

145### [CRITICAL] Missing AppRouter type parameter on createTRPCClient

146

147Wrong:

148

149```ts

150const client = createTRPCClient({ links: [httpBatchLink({ url })] });

151```

152

153Correct:

154

155```ts

156import type { AppRouter } from './server';

157

158const client = createTRPCClient<AppRouter>({ links: [httpBatchLink({ url })] });

159```

160

161Without the type parameter, all procedure calls return any and type safety is completely lost.

162

163Source: www/docs/client/vanilla/setup.mdx

164

165### [CRITICAL] Transformer goes on individual links, not createTRPCClient

166

167In v11, the transformer option is on individual terminating links, not the client constructor:

168

169```ts

170import superjson from 'superjson';

171

172createTRPCClient<AppRouter>({

173 links: [

174 httpBatchLink({

175 url: 'http://localhost:3000',

176 transformer: superjson,

177 }),

178 ],

179});

180```

181

182In v11, the transformer option was moved from the client constructor to individual terminating links. Passing it to createTRPCClient throws a TypeError.

183

184Source: packages/client/src/internals/TRPCUntypedClient.ts

185

186### [CRITICAL] Transformer on server but not on client links

187

188Wrong:

189

190```ts

191// Server: initTRPC.create({ transformer: superjson })

192// Client:

193httpBatchLink({ url: 'http://localhost:3000' });

194```

195

196Correct:

197

198```ts

199// Server: initTRPC.create({ transformer: superjson })

200// Client:

201httpBatchLink({ url: 'http://localhost:3000', transformer: superjson });

202```

203

204If the server uses a transformer, every terminating link on the client must also specify that transformer. Mismatch causes "Unable to transform response" errors.

205

206Source: https://github.com/trpc/trpc/issues/7083

207

208### [CRITICAL] Using import instead of import type for AppRouter

209

210Wrong:

211

212```ts

213import { AppRouter } from '../server/router';

214```

215

216Correct:

217

218```ts

219import type { AppRouter } from '../server/router';

220```

221

222A non-type import pulls the entire server bundle into the client. Use import type so it is erased at build time.

223

224Source: www/docs/client/vanilla/setup.mdx

225

226### [CRITICAL] Importing appRouter value to derive type in client

227

228Wrong:

229

230```ts

231import { appRouter } from '../server/router';

232

233type AppRouter = typeof appRouter;

234```

235

236Correct:

237

238```ts

239// In server: export type AppRouter = typeof appRouter;

240// In client:

241import type { AppRouter } from '../server/router';

242```

243

244Importing the appRouter value (not just the type) bundles the entire server into the client, shipping server code to the browser.

245

246Source: www/docs/server/routers.md

247

248### [CRITICAL] Using type assertions to bypass AppRouter import errors

249

250Wrong:

251

252```ts

253const client = createTRPCClient<any>({ links: [httpBatchLink({ url })] });

254```

255

256Correct:

257

258```ts

259// Fix the import path or monorepo configuration

260import type { AppRouter } from '@myorg/api-types';

261

262const client = createTRPCClient<AppRouter>({ links: [httpBatchLink({ url })] });

263```

264

265Casting to any or manually recreating the router type destroys end-to-end type safety. Fix the import path or monorepo config instead.

266

267Source: www/docs/client/vanilla/setup.mdx

268

269### [CRITICAL] Using createTRPCProxyClient (renamed in v11)

270

271Wrong:

272

273```ts

274import { createTRPCProxyClient } from '@trpc/client';

275```

276

277Correct:

278

279```ts

280import { createTRPCClient } from '@trpc/client';

281```

282

283createTRPCProxyClient was renamed to createTRPCClient in v11.

284

285Source: www/docs/client/vanilla/setup.mdx

286

287### [CRITICAL] Treating tRPC as a REST API

288

289Wrong:

290

291```ts

292fetch('/api/trpc/users/123', { method: 'GET' });

293```

294

295Correct:

296

297```ts

298const user = await client.user.byId.query({ id: '123' });

299// Raw equivalent: GET /api/trpc/user.byId?input={"id":"123"}

300```

301

302tRPC uses JSON-RPC over HTTP. Procedures are called by dot-separated name with JSON input, not by REST resource paths.

303

304Source: www/docs/client/overview.md

305

306### [HIGH] HTML error page instead of JSON response

307

308If you see couldn't parse JSON, invalid character '<', the tRPC endpoint returned an HTML page (404/503) instead of JSON. This means the url in your link config is wrong or infrastructure routing is misconfigured -- it is not a tRPC bug. Verify the URL matches your adapter's mount point.

309

310Source: www/docs/client/vanilla/setup.mdx

311

312## See Also

313

314- links -- configure httpBatchLink, httpLink, splitLink, and other link types

315- superjson -- set up SuperJSON transformer on server and client

316- server-setup -- define routers, procedures, context, and export AppRouter type

317- react-query-setup -- use tRPC with TanStack React Query for React applications

318

In the file

SKILL.md977 words

Files1

LicenceMIT

Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈170

always loaded

The name and description, so the model knows the skill exists and when to reach for it.

1,780

on trigger

The instruction body, read only when the skill fires.

0.97%

of a 200k window

Ten skills this size would take about 10% of the window before you open a file.

050k100k150k200k context window

1.9k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Middling. Fine to keep on in a project where you use it weekly, worth unloading in one where you never do.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

Adoption

Installsnone yet

Ratingno reviews yet

The procedure it runs

The procedure has not been published here. It is in the skill’s own SKILL.md, which its author has not sent to the marketplace yet.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

It writes no files and reaches no network. All it changes is how the model reasons and writes.

What it asks for

Writes filesno

Network accessno

Read from the allowed-tools line of this skill’s own SKILL.md. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

If this is not it

15 other skills in API Development

What is in the bundle

1 file, 7.8 kB on disk. A bundle is text throughout: the instructions the model reads, plus the templates it fills in.

SKILL.md7.8 kB

What is not in it

No dependencies and nothing executable: a skill is text the agent reads, so the bundle is 1 file you can review in full before installing. The MIT licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

$39 once

tRPC Client Setup · MIT · trpc

one-time

Price$39 once

LicenceMIT — the author’s, unchanged by this purchase

Paid throughStripe, once, on the card you add at the checkout

Keeps workingfor good — the files are yours once they are on disk

Updatesevery update its author ships, delivered through this account

You can read the whole bundle before paying — the SKILL.md above is the product, not a preview of it. What the money buys is the delivery: the folder packaged and handed to your machine by key, every update its author ships, and our support if it does not do what this listing says. The terms of use are MIT, set by the author and unchanged by buying it here.

Payment runs through Stripe, on a page like this one rather than a redirect. Once there is an account it joins the same mcprush invoice as everything else you run, so there is never a second card to enter.

Which clients pick it up on their own

A skill is a folder of text. A client with a skills folder reads it without being told; everywhere else the same text works, it is just handed to the model rather than found.

Claude Code.claude/skills/

Claude Desktop

ChatGPT

Cursor.cursor/skills/

VS Code.github/skills/

Codex CLI.agents/skills/

Gemini CLI.gemini/skills/

Grok.grok/skills/

Zed.agents/skills/

Windsurf.windsurf/skills/

Agent SDK.claude/skills/

HTTP / API

This release

Versionnot versioned

Publishedno release date on file

Price$39

Referencetrpc/trpc-client-setup

Versions

Its author publishes no version number, so there is nothing here to pin to: what you install is the folder as it stands today. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

No earlier releases have been published to the marketplace.

Pinning

Nothing to pin to: this skill carries no version number of its own. What you install is what the folder holds on the day you install it.

Reviews

—no reviews yet · no installs yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Who can post

Only accounts that have had the skill installed for fourteen days, so a review is written after living with it rather than after reading it. Publishers may reply once.

Who wrote it

trpc

Publishes on mcprush.

0 servers listed4 skills listednot claimed

Profile

Publisher

Servers0