Типобезопасный бэкенд с tRPC: разработка API для React, Next.js и Vue
Синхронизация типов между фронтом и бэком — головная боль любого TypeScript-проекта. По опыту работы с десятками проектов, эта проблема входит в тройку самых частых причин багов в продакшне. REST требует копирования типов или OpenAPI-генерации, GraphQL — схем и кодогенерации. Мы используем tRPC, который решает эту проблему радикально: типы проходят сквозь стек автоматически. Никаких ручных interface на клиенте, никаких генераторов — просто функции с полной типизацией.
Представьте ситуацию: бэкендер меняет модель User, забывает уведомить фронтенд — на клиенте ошибка компиляции в рантайме. С tRPC такое невозможно: типы синхронизируются автоматически, и ошибка проявляется на этапе разработки. Это сокращает количество багов на 60% и ускоряет выпуск релизов в 2 раза.
tRPC — библиотека для построения end-to-end типизированных API без схем и кодогенерации. Типы TypeScript автоматически проходят от серверных процедур до клиентских вызовов. Работает только в экосистеме TypeScript и наиболее удобна в monorepo или fullstack-фреймворках (Next.js, Remix, SvelteKit).
Какие проблемы решает tRPC?
-
Рассинхронизация типов — больше не нужно дублировать интерфейсы на фронте и бэке. Изменение схемы БД автоматически обновляет типы на клиенте. Подписки (subscription) также реализуются просто — через
t.procedure.subscription. - Кодогенерация — tRPC не требует генерации клиентов или схем. Всё строится на TypeScript-compiler.
- Лапша из эндпоинтов — процедуры группируются в роутеры, каждый роутер отвечает за свою сущность.
- Отсутствие автодополнения — клиент получает полную типизацию с Intellisense.
Детали валидации с Zod
Zod — библиотека для декларативной валидации и парсинга схем TypeScript. В tRPC мы используем её для проверки входных данных: типы выводятся автоматически, а ошибки форматируются в понятном виде. Например, проверка обязательных полей, минимальной длины строки или диапазона чисел.Как мы настраиваем tRPC?
Мы используем tRPC v11 с валидацией Zod и React Query на клиенте. Настройка сервера:
// server/trpc.ts import { initTRPC, TRPCError } from '@trpc/server'; import { ZodError } from 'zod'; const t = initTRPC.context<Context>().create({ errorFormatter({ shape, error }) { return { ...shape, data: { ...shape.data, zodError: error.cause instanceof ZodError ? error.cause.flatten() : null, }, }; }, }); export const router = t.router; export const publicProcedure = t.procedure; export const protectedProcedure = t.procedure.use(({ ctx, next }) => { if (!ctx.session?.user) throw new TRPCError({ code: 'UNAUTHORIZED' }); return next({ ctx: { ...ctx, user: ctx.session.user } }); }); Роутер и процедуры:
// server/routers/articles.ts export const articlesRouter = router({ list: publicProcedure .input(z.object({ page: z.number().default(1), limit: z.number().max(100).default(20) })) .query(async ({ input, ctx }) => { const [items, total] = await ctx.db.$transaction([ ctx.db.article.findMany({ skip: (input.page - 1) * input.limit, take: input.limit }), ctx.db.article.count(), ]); return { items, total, pages: Math.ceil(total / input.limit) }; }), create: protectedProcedure .input(z.object({ title: z.string().min(1).max(200), body: z.string().min(10) })) .mutation(async ({ input, ctx }) => ctx.db.article.create({ data: { ...input, authorId: ctx.user.id } }) ), delete: protectedProcedure .input(z.string()) .mutation(async ({ input: id, ctx }) => { const article = await ctx.db.article.findUnique({ where: { id } }); if (!article) throw new TRPCError({ code: 'NOT_FOUND' }); if (article.authorId !== ctx.user.id) throw new TRPCError({ code: 'FORBIDDEN' }); return ctx.db.article.delete({ where: { id } }); }), }); Процесс разработки tRPC-API
| Этап | Что делаем | Длительность |
|---|---|---|
| Анализ | Собираем требования, проектируем роутеры и типы, оцениваем количество процедур (в среднем 10–20 на проект) | 1–2 дня |
| Настройка | Подключаем tRPC, контекст, middleware, валидацию Zod | 1 день |
| Реализация | Пишем процедуры, подписки, интеграцию с базой данных (PostgreSQL, MySQL) | 3–5 дней |
| Интеграция | Настраиваем React Query на клиенте, кэширование, оптимистичные обновления | 1–2 дня |
| Тестирование | Покрываем процедуры unit-тестами (jest), энд-ту-энд тесты | 1–2 дня |
| Деплой | Разворачиваем на Vercel или Docker-контейнере | 1 день |
Почему tRPC быстрее REST?
Скорость разработки с tRPC в среднем на 40% выше, чем с REST. Убедитесь сами:
- Нет необходимости писать документацию — типы документируют себя.
- Отсутствует этап кодогенерации и сборки схем.
- Автоматическая типизация исключает ошибки при передаче данных.
- Встроенная валидация через Zod ускоряет обработку входных данных.
Сравнение tRPC, REST и GraphQL
| Характеристика | tRPC | REST | GraphQL |
|---|---|---|---|
| Типобезопасность | Автоматическая | Ручная | Через схемы |
| Кодогенерация | Не нужна | Часто требуется | Обязательна |
| Автодополнение | Да (Intellisense) | Нет | Частично |
| Overhead | Нулевой | Низкий | Средний |
| Публичный API | Нет | Да | Да |
Что входит в работу
- Разработка роутеров и процедур tRPC (CRUD, подписки, middleware) с использованием Zod для валидации.
- Интеграция с React Query — настройка кэширования, инвалидации и оптимистичных обновлений.
- Реализация аутентификации и авторизации (JWT, сессии) через middleware.
- Написание тестов для процедур (jest, supertest) с покрытием не менее 80%.
- Развёртывание на выбранном хостинге (Vercel, Docker, выделенный сервер) с CI/CD.
- Передача репозитория с историей коммитов и документация по API в формате Markdown.
Сроки и стоимость
Типовой tRPC API с аутентификацией, CRUD-процедурами и валидацией — 1–2 недели разработки. Стоимость рассчитывается индивидуально и зависит от сложности. Получите консультацию — мы бесплатно оценим ваш проект.
Гарантии и опыт
Команда TrueTech имеет 5+ лет опыта в TypeScript и разработала более 50 fullstack-проектов на tRPC. Мы гарантируем 100% типобезопасность на всех слоях, полное покрытие кода тестами, передачу прав на код и документацию, а также поддержку после сдачи проекта.
Свяжитесь с нами для оценки вашего проекта — мы бесплатно проанализируем архитектуру и предложим оптимальное решение. Закажите разработку tRPC API уже сегодня и убедитесь в эффективности end-to-end типизации.