Skip to main content

@robojs/trpc

Add a tRPC server and client to your Robo automatically. tRPC is a modern TypeScript-first RPC framework for building web services. This plugin sets up a tRPC router and client in your project, allowing you to easily create and consume APIs.

You must already have @robojs/server installed.

GitHub license npm install size Discord All Contributors

➞ 📚 Documentation: Getting started

➞ 🚀 Community: Join our Discord server

Installation​

To add this plugin to your Robo.js project:

Terminal
npx robo add @robojs/server @robojs/trpc

New to Robo.js? Start your project with this plugin pre-installed:

Terminal
npx create-robo <project-name> -p @robojs/server @robojs/trpc

We also recommend you npm install zod for schema validation. If you want to use React Query capabilities, you will also need to wrap your app in a TRPCProvider.

import { TRPCProvider } from '@robojs/trpc'
import { trpc, trpcQueryClient } from '../trpc/client'

function App() {
	return (
		<TRPCProvider trpc={trpc} trpcClient={trpcQueryClient}>
			<Activity />
		</TRPCProvider>
	)
}

The trpc and trpcQueryClient objects can be seeded for you during installation.

Usage​

If you allowed the plugin to seed your project, you can start using tRPC right away. The plugin sets up a /trpc folder in your project with client.ts and server.ts files. A start event is also added to ensure the router is registered.

Server​

The server file is where you define your tRPC router. You can add your procedures here for the client to consume.

import { initTRPC } from '@robojs/trpc'
import { z } from 'zod'

const t = initTRPC.create()
export const router = t.router
export const procedure = t.procedure

export const appRouter = router({
	// Query example: returns a greeting message based on the input text
	hello: procedure
		.input(
			z.object({
				text: z.string()
			})
		)
		.query((opts) => {
			const { text } = opts.input

			return {
				message: `Hello ${text}!`
			}
		}),

	// Mutation example: performs an action with an optional details parameter
	performAction: procedure
		.input(
			z.object({
				actionId: z.number(),
				details: z.string().optional()
			})
		)
		.mutation((opts) => {
			const { actionId, details } = opts.input

			return {
				actionId: actionId,
				details: details,
				message: `Action ${actionId} performed with details: ${details || 'None'}.`
			}
		})
})

export type AppRouter = typeof appRouter

As your project grows and you write more procedures, you can split this into multiple files and merge them together into the appRouter.

[!IMPORTANT] Notice how initTRPC is imported from @robojs/trpc.

Client​

The client file initializes the tRPC clients and exports them for use in your app. For example, you can use the trpcClient to directly call queries when the user interacts with your app.

import { trpcClient } from '../trpc/client'
import { useState } from 'react'

export const MyComponent = () => {
	const [data, setData] = useState(null)

	const onClick = async () => {
		const data = await trpcClient.hello.query({ text: 'World' })
		setData(data)
	}

	return <button onClick={onClick}>{data?.message}</button>
}

Preferring to use React Query? You can use the trpc object to create hooks for your queries.

import { trpc } from '../trpc/client'

export const MyComponent = () => {
	const { data } = trpc.hello.useQuery({ text: 'World' })

	return <span>{data?.message}</span>
}

Got questions?​

If you have any questions or need help with this plugin, feel free to join our Discord Server. We're a friendly bunch and always happy to help! Plus, our very own AI Robo, Sage, is there to assist you with any questions you may have.

➞ 🚀 Community: Join our Discord server

More on GitHub​