Определение маршрутизаторов и процедур
Создавайте запросы и мутации с проверкой входных данных
«Определение маршрутизаторов и процедур» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.
Инициализация tRPC
Каждая серверная часть tRPC начинается с создания экземпляра с помощью initTRPC. Он возвращает построители для router и процедур. Обычно экземпляр создают один раз и экспортируют нужные части.
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;Первая процедура
Процедура — это отдельная конечная точка программного интерфейса. Самый простой вариант — query, возвращающий значение. publicProcedure.query определяет доступную для чтения конечную точку без входных данных.
import { router, publicProcedure } from './trpc';
const appRouter = router({
health: publicProcedure.query(() => 'ok'),
});Проверка входных данных
Процедуры объявляют свои входные данные с помощью средства проверки, обычно схемы zod. .input(schema) одновременно проверяет данные во время выполнения и выводит тип входных данных для обработчика и client.
import { z } from 'zod';
const greet = publicProcedure
.input(z.object({ name: z.string() }))
.query(({ input }) => 'Hello, ' + input.name);Чтение входных данных
Внутри обработчика проверенные входные данные доступны как input и полностью типизированы на основе схемы. Ручное приведение типов не требуется: zod и tRPC совместно выводят структуру данных.
const byId = publicProcedure
.input(z.object({ id: z.number() }))
.query(({ input }) => {
// input.id is number
return { id: input.id, name: 'Alice' };
});Мутации
Используйте .mutation для операций, изменяющих данные. Структура такая же, как у query, но она указывает на операцию записи, что влияет на кэширование в client и метод HTTP.
const createUser = publicProcedure
.input(z.object({ name: z.string() }))
.mutation(({ input }) => {
return { id: 1, name: input.name };
});Создание app router
Соберите процедуры в router, передав объект в router(...). Каждый ключ становится именем вызываемой процедуры. Этот appRouter представляет весь Ваш программный интерфейс.
const appRouter = router({
greet,
byId,
createUser,
});Вложенные router
Router можно вкладывать друг в друга, чтобы организовать большие программные интерфейсы. Значением в объекте router может быть другой router, что создаёт вызовы с пространствами имён, например user.byId.
const userRouter = router({ byId, createUser });
const appRouter = router({
user: userRouter,
greet,
});
// call paths: user.byId, user.createUser, greetЭкспорт типа router
Самый важный экспорт — это тип router. client импортирует его, чтобы получить полную безопасность типов. Экспортируйте значение для серверного адаптера, а тип — для client.
export const appRouter = router({ user: userRouter });
export type AppRouter = typeof appRouter;Подключение адаптера
Чтобы обслуживать router через HTTP, подключите адаптер. tRPC предоставляет адаптеры для автономного Node, Express, Next.js, Fetch и других сред. Адаптер превращает входящие запросы в вызовы процедур.
import { createHTTPServer } from '@trpc/server/adapters/standalone';
createHTTPServer({ router: appRouter }).listen(3000);Организация файлов
Распространённая структура выглядит так: файл trpc.ts с initTRPC и экспортируемыми router/publicProcedure, router отдельных функций в собственных файлах и корневой appRouter, который объединяет их. Хранение initTRPC в одном месте предотвращает создание нескольких экземпляров.
// trpc.ts: initTRPC.create(), export router + publicProcedure
// routers/user.ts: userRouter
// router.ts: appRouter = router({ user: userRouter })Повторение вывода входных данных
Поскольку .input(schema) одновременно проверяет данные и выводит тип, Вы описываете схему один раз и получаете средство проверки во время выполнения и статический тип. client будет видеть именно те входные данные, которые ожидает каждая процедура, выведенные из этих схем.
const search = publicProcedure
.input(z.object({ q: z.string(), page: z.number().optional() }))
.query(({ input }) => ({ q: input.q, page: input.page ?? 1 }));Проверьте себя
Проверьте, насколько хорошо Вы поняли router и процедуры.
Повторение
Вы создали серверную часть tRPC.
initTRPC.create()возвращает построителиrouterиprocedure..input(schema)проверяет входные данные и выводит их тип..queryсчитывает данные, а.mutationзаписывает их.- Объединяйте процедуры в
appRouterи экспортируйтеtype AppRouter = typeof appRouter.
Далее: использование программного интерфейса с полностью типизированным client.
Изучай TypeScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 101
- Уроки
- 352
Часто задаваемые вопросы
Урок «Определение маршрутизаторов и процедур» бесплатный?
Да — полный текст урока «Определение маршрутизаторов и процедур» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Определение маршрутизаторов и процедур»?
Создавайте запросы и мутации с проверкой входных данных Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Определение маршрутизаторов и процедур»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Архитектура tRPC
- Определение маршрутизаторов и процедур
- Вывод типов на стороне клиента и сервера
- Промежуточное ПО и контекст