www/docs/further/rpc.md
| HTTP Method | Mapping | Notes |
|---|---|---|
GET | .query() | Input JSON-stringified in query param. |
e.g. myQuery?input=${encodeURIComponent(JSON.stringify(input))} | ||
POST | .mutation() | Input as POST body. |
GET | .subscription() | Subscriptions are supported via Server-sent Events using httpSubscriptionLink, or via WebSockets using wsLink. |
Nested procedures are separated by dots, so a request to byId below would end up being a request to /api/trpc/post.byId.
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
const router = t.router;
const publicProcedure = t.procedure;
// ---cut---
export const appRouter = router({
post: router({
byId: publicProcedure.input(String).query(async (opts) => {
// [...]
}),
}),
});
When batching, we combine all parallel procedure calls of the same HTTP method in one request using a data loader.
,) in the pathnameinput which has the shape Record<number, unknown>.batch=1 as a query parameter.207 Multi-Status (e.g., if one call errored and one succeeded)/api/trpc:import { initTRPC } from '@trpc/server';
type Post = { id: string; title: string; body: string };
type Context = {
post: { findUnique: (opts: { where: { id: string } }) => Promise<Post | null> };
findRelatedPostsById: (id: string) => Promise<Post[]>;
};
const t = initTRPC.context<Context>().create();
// ---cut---
export const appRouter = t.router({
postById: t.procedure.input(String).query(async (opts) => {
const post = await opts.ctx.post.findUnique({
where: { id: opts.input },
});
return post;
}),
relatedPosts: t.procedure.input(String).query(async (opts) => {
const posts = await opts.ctx.findRelatedPostsById(opts.input);
return posts;
}),
});
// @jsx: react-jsx
import React from 'react';
const trpc = null as any;
// ---cut---
export function MyComponent() {
const post1 = trpc.postById.useQuery('1');
const relatedPosts = trpc.relatedPosts.useQuery('1');
return (
<pre>
{JSON.stringify(
{
post1: post1.data ?? null,
relatedPosts: relatedPosts.data ?? null,
},
null,
4,
)}
</pre>
);
}
| Location property | Value |
|---|---|
pathname | /api/trpc/postById,relatedPosts |
search | ?batch=1&input=%7B%220%22%3A%221%22%2C%221%22%3A%221%22%7D * |
*) input in the above is the result of:
encodeURIComponent(
JSON.stringify({
0: '1', // <-- input for `postById`
1: '1', // <-- input for `relatedPosts`
}),
);
[
// result for `postById`
{
"result": {
"data": {
"id": "1",
"title": "Hello tRPC",
"body": "..."
// ...
}
}
},
// result for `relatedPosts`
{
"result": {
"data": [
/* ... */
]
}
}
]
In order to have a specification that works regardless of the transport layer we try to conform to JSON-RPC 2.0 where possible.
{
"result": {
"data": {
"id": "1",
"title": "Hello tRPC",
"body": "..."
}
}
}
type TOutput = any;
// ---cut---
interface SuccessResponse {
result: {
data: TOutput; // output from procedure
}
}
[
{
"error": {
"json": {
"message": "Something went wrong",
"code": -32600, // JSON-RPC 2.0 code
"data": {
// Extra, customizable, meta data
"code": "INTERNAL_SERVER_ERROR",
"httpStatus": 500,
"stack": "...",
"path": "post.add"
}
}
}
}
]
207 Multi-Status (e.g., if one call errored and one succeeded)const HTTP_STATUS_CODES = {
PARSE_ERROR: 400,
BAD_REQUEST: 400,
UNAUTHORIZED: 401,
PAYMENT_REQUIRED: 402,
FORBIDDEN: 403,
NOT_FOUND: 404,
METHOD_NOT_SUPPORTED: 405,
TIMEOUT: 408,
CONFLICT: 409,
PRECONDITION_FAILED: 412,
PAYLOAD_TOO_LARGE: 413,
UNSUPPORTED_MEDIA_TYPE: 415,
UNPROCESSABLE_CONTENT: 422,
PRECONDITION_REQUIRED: 428,
TOO_MANY_REQUESTS: 429,
CLIENT_CLOSED_REQUEST: 499,
INTERNAL_SERVER_ERROR: 500,
NOT_IMPLEMENTED: 501,
BAD_GATEWAY: 502,
SERVICE_UNAVAILABLE: 503,
GATEWAY_TIMEOUT: 504,
} as const;
/**
* JSON-RPC 2.0 Error codes
*
* `-32000` to `-32099` are reserved for implementation-defined server-errors.
* For tRPC we're copying the last digits of HTTP 4XX errors.
*/
export const TRPC_ERROR_CODES_BY_KEY = {
/**
* Invalid JSON was received by the server.
* An error occurred on the server while parsing the JSON text.
*/
PARSE_ERROR: -32700,
/**
* The JSON sent is not a valid Request object.
*/
BAD_REQUEST: -32600, // 400
// Internal JSON-RPC error
INTERNAL_SERVER_ERROR: -32603, // 500
NOT_IMPLEMENTED: -32603, // 501
BAD_GATEWAY: -32603, // 502
SERVICE_UNAVAILABLE: -32603, // 503
GATEWAY_TIMEOUT: -32603, // 504
// Implementation specific errors
UNAUTHORIZED: -32001, // 401
PAYMENT_REQUIRED: -32002, // 402
FORBIDDEN: -32003, // 403
NOT_FOUND: -32004, // 404
METHOD_NOT_SUPPORTED: -32005, // 405
TIMEOUT: -32008, // 408
CONFLICT: -32009, // 409
PRECONDITION_FAILED: -32012, // 412
PAYLOAD_TOO_LARGE: -32013, // 413
UNSUPPORTED_MEDIA_TYPE: -32015, // 415
UNPROCESSABLE_CONTENT: -32022, // 422
PRECONDITION_REQUIRED: -32028, // 428
TOO_MANY_REQUESTS: -32029, // 429
CLIENT_CLOSED_REQUEST: -32099, // 499
} as const;
To override the HTTP method used for queries/mutations, you can use the methodOverride option:
import { initTRPC } from '@trpc/server';
import { createHTTPHandler } from '@trpc/server/adapters/standalone';
const t = initTRPC.create();
const router = t.router({});
// ---cut---
// Your server must separately allow the client to override the HTTP method
const handler = createHTTPHandler({
router: router,
allowMethodOverride: true,
});
// @filename: server.ts
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
export const appRouter = t.router({});
export type AppRouter = typeof appRouter;
// @filename: client.ts
// ---cut---
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from './server';
// The client can then specify which HTTP method to use for all queries/mutations
const client = createTRPCClient<AppRouter>({
links: [
httpLink({
url: `http://localhost:3000`,
methodOverride: 'POST', // all queries and mutations will be sent to the tRPC Server as POST requests.
}),
],
});
You can read more details by drilling into the TypeScript definitions in