2. Установка и настройка

Прежде чем начать работу с tRPC, необходимо установить несколько пакетов и настроить базовую структуру проекта. В этом уроке мы пошагово создадим минимальный рабочий сервер tRPC.

Пакеты для установки

Для серверной части необходимо установить: @trpc/server — ядро tRPC, zod — для валидации входных данных. Для клиентской части на React: @trpc/client, @trpc/react-query, @tanstack/react-query.

Инициализация tRPC

Первый шаг — создать экземпляр tRPC через функцию initTRPC.create(). Этот объект содержит методы для создания роутеров и процедур. Важно: создавайте один экземпляр tRPC на всё приложение.

Создание роутера

Роутер (router) — это объект, который содержит процедуры (функции API). Корневой роутер обычно называют appRouter, а его тип экспортируется как AppRouter для использования на клиенте.

Запуск HTTP-сервера

tRPC можно запустить с любым HTTP-фреймворком: Express, Fastify, Next.js. Используйте createHTTPServer для быстрого старта или createExpressMiddleware для интеграции с существующим Express-приложением.

Создание клиента

На клиенте создайте TRPCClient через createTRPCProxyClient с указанием httpBatchLink — URL вашего сервера. Для React-приложений используйте createTRPCReact совместно с @tanstack/react-query.