Queries, Mutations, and Subscriptions
Use tRPC's typed queries and mutations from React components with full autocomplete and error types.
Defining a Query Procedure
Chain .input(zodSchema).query(async ({ input, ctx }) => ...) onto publicProcedure. The handler receives the validated input and the request context. Return any serializable value: an object, array, or primitive.
The return type is automatically inferred and becomes the data type of the corresponding useQuery hook on the client.
Calling a Query from React
trpc.post.getById.useQuery({ id: '1' }) calls the getById procedure in the post router. The hook returns the familiar React Query result object: { data, isLoading, isError, refetch }.
The input object is statically typed: passing { id: 123 } when the schema expects a string is a TypeScript error caught at development time.
All lessons in this course
- The Problem tRPC Solves
- Setting Up tRPC with React and Next.js
- Queries, Mutations, and Subscriptions
- Integrating tRPC with React Query and Auth