Define Procedures

tip

• A procedure can be viewed as the equivalent of a REST-endpoint or a function.
• There's no internal difference between queries and mutations apart from semantics.
• Defining procedure is the same for queries, mutations, and subscription with the exception that subscriptions need to return an observable instance.

Example without input validation

ts
import { t } from './trpc';
import { z } from 'zod';
 
const appRouter = t.router({
  // Create procedure at path 'hello'
  hello: t.procedure.query(() => {
    return {
      greeting: 'hello world',
    };
  }),
});
 

ts
import { t } from './trpc';
import { z } from 'zod';
 
const appRouter = t.router({
  // Create procedure at path 'hello'
  hello: t.procedure.query(() => {
    return {
      greeting: 'hello world',
    };
  }),
});
 

Input validation

tRPC works out-of-the-box with yup/superstruct/zod/myzod/custom validators/[..] - see test suite

With Zod

ts
import { t } from './trpc';
import { z } from 'zod';
 
export const appRouter = t.router({
  hello: t.procedure
    .input(
      z
        .object({
          text: z.string(),
        })
        .optional(),
    )
    .query(({ input }) => {
               
(parameter) input: {
    text: string;
} | undefined
      return {
        greeting: `hello ${input?.text ?? 'world'}`,
      };
    }),
});
 
export type AppRouter = typeof appRouter;

ts
import { t } from './trpc';
import { z } from 'zod';
 
export const appRouter = t.router({
  hello: t.procedure
    .input(
      z
        .object({
          text: z.string(),
        })
        .optional(),
    )
    .query(({ input }) => {
               
(parameter) input: {
    text: string;
} | undefined
      return {
        greeting: `hello ${input?.text ?? 'world'}`,
      };
    }),
});
 
export type AppRouter = typeof appRouter;

With Yup

tsx
import { initTRPC } from '@trpc/server';
import * as yup from 'yup';
export const t = initTRPC.create();
export const appRouter = t.router({
  hello: t.procedure
    .input(
      yup.object({
        text: yup.string().required(),
      }),
    )
    .query(({ input }) => {
      return {
        greeting: `hello ${input?.text ?? 'world'}`,
      };
    }),
});
export type AppRouter = typeof appRouter;

tsx
import { initTRPC } from '@trpc/server';
import * as yup from 'yup';
export const t = initTRPC.create();
export const appRouter = t.router({
  hello: t.procedure
    .input(
      yup.object({
        text: yup.string().required(),
      }),
    )
    .query(({ input }) => {
      return {
        greeting: `hello ${input?.text ?? 'world'}`,
      };
    }),
});
export type AppRouter = typeof appRouter;

With Superstruct

tsx
import { initTRPC } from '@trpc/server';
import { defaulted, object, string } from 'superstruct';
export const t = initTRPC.create();
export const appRouter = t.router({
  hello: t.procedure
    .input(
      object({
        /**
         * Also supports inline doc strings when referencing the type.
         */
        text: defaulted(string(), 'world'),
      }),
    )
    .query(({ input }) => {
      return {
        greeting: `hello ${input.text}`,
      };
    }),
});
export type AppRouter = typeof appRouter;

tsx
import { initTRPC } from '@trpc/server';
import { defaulted, object, string } from 'superstruct';
export const t = initTRPC.create();
export const appRouter = t.router({
  hello: t.procedure
    .input(
      object({
        /**
         * Also supports inline doc strings when referencing the type.
         */
        text: defaulted(string(), 'world'),
      }),
    )
    .query(({ input }) => {
      return {
        greeting: `hello ${input.text}`,
      };
    }),
});
export type AppRouter = typeof appRouter;

Multiple input parsers

You're able to chain multiple parsers in order to make reusable procedures for different parts of your application.

server.ts
ts
import { t } from './trpc';
import { z } from 'zod';
 
// Create reusable procedure for a chat room
const roomProcedure = t.procedure.input(
  z.object({
    roomId: z.string(),
  }),
);
 
const appRouter = t.router({
  sendMessage: roomProcedure
    // Add extra input validation for the `sendMessage`-procedure
    .input(
      z.object({
        text: z.string(),
      }),
    )
    .mutation(({ input }) => {
                  
(parameter) input: {
    roomId: string;
    text: string;
}
      // [...]
    }),
});
 
export type AppRouter = typeof appRouter;

server.ts
ts
import { t } from './trpc';
import { z } from 'zod';
 
// Create reusable procedure for a chat room
const roomProcedure = t.procedure.input(
  z.object({
    roomId: z.string(),
  }),
);
 
const appRouter = t.router({
  sendMessage: roomProcedure
    // Add extra input validation for the `sendMessage`-procedure
    .input(
      z.object({
        text: z.string(),
      }),
    )
    .mutation(({ input }) => {
                  
(parameter) input: {
    roomId: string;
    text: string;
}
      // [...]
    }),
});
 
export type AppRouter = typeof appRouter;

Multiple Procedures

To add multiple procedures, you define them as properties on the object passed to t.router().

tsx
import { initTRPC } from '@trpc/server';
export const t = initTRPC.create();
export const appRouter = t.router({
  hello: t.procedure.query(() => {
    return {
      text: 'hello world',
    };
  }),
  bye: t.procedure.query(() => {
    return {
      text: 'goodbye',
    };
  }),
});
export type AppRouter = typeof appRouter;

tsx
import { initTRPC } from '@trpc/server';
export const t = initTRPC.create();
export const appRouter = t.router({
  hello: t.procedure.query(() => {
    return {
      text: 'hello world',
    };
  }),
  bye: t.procedure.query(() => {
    return {
      text: 'goodbye',
    };
  }),
});
export type AppRouter = typeof appRouter;