tRPC: разумный способ управления API-интерфейсами

В прошлом я много мучился, поддерживая схему или какое-то определение типов в своих приложениях на языке typescript.
Если ваш frontend и backend написаны на typescript и вы испытываете те же головные боли, эта статья для вас.

В некоторых проектах со Swagger я генерировал схемы на основе .yaml файлов 😢, но когда вы создаете новые функции, довольно часто меняются API(ы), и в итоге вы получаете множество определений/генераций схем. 😅
То же самое с graphql, потому что вам нужно изучить язык graphql для описания API, а затем каждый раз, когда вы что-то меняете, вы должны генерировать обновленные определения/схемы API.
До этого момента новости были только плохие 😂, но, к счастью, вы можете решить все эти проблемы с помощью tRPC.

Содержание

Начало работы
Требования
Пример Next.js
Покажите мне код
Сервер
Клиент
Ага момент 🤯
Последняя мысль

Начало работы

Лучший способ начать работу с tRPC — использовать пример Next.js из репозитория tRPC GitHub, поскольку он создан и поддерживается основной командой и следует лучшим практикам.

Здесь мы можем протестировать решение с полностью настроенным проектом:

Next.js
Prisma
Postgresql

Требования

Node >= 14
Docker, запущенный на локальной машине (для Postgres)

Пример Next.js

С помощью этих команд вы можете начать работу с приложением с нуля:

yarn:

yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
yarn
yarn dx

Войти в полноэкранный режим Выйти из полноэкранного режима

npm:

npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
cd trpc-prisma-starter
yarn
yarn dx

Войти в полноэкранный режим Выйти из полноэкранного режима

После первоначальной настройки на http://localhost:3000 вы сможете добавлять новые сообщения и читать текст сообщения с помощью ссылки View more.

Пока все хорошо! 💪

Покажите мне код

Скоро команда tRPC выпустит новую версию 10, в любом случае, эти концепции всегда хороши.

Сервер

Давайте сосредоточимся на этих файлах в кодовой базе нашего сервера

Здесь у нас есть функция для создания нашего маршрутизатора, и как вы можете видеть, мы используем trpc.router прямо из библиотеки @trpc/server.

/src/server/createRouter.ts

Подобно GraphQL, tRPC делает различие между конечными точками запроса и мутации. Давайте добавим мутацию add:

/src/server/routers/post.ts

Мутация требует нескольких параметров:

Здесь мы определяем маршрутизатор где-то в кодовой базе нашего сервера.

Наконец, мы экспортируем тип AppRouter, typescript придает этому типу правильную форму, готовую к использованию в нашем клиенте.

/src/server/routers/_app.ts

Клиент

Приложение Next.js должно быть настроено для работы с tRPC. Первым делом нам нужно обернуть все приложение компонентом высшего порядка withTRPC.

/src/pages/_app.tsx

Затем нам нужно создать набор сильно типизированных хуков, используя сигнатуру типов вашего API import type { AppRouter } from '~/server/routers/_app';