Типобезпечний бекенд із 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), end-to-end тести | 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 типізації.