Запросы, мутации и подписки

Добавьте .input(zodSchema).query(async ({ input, ctx }) => ...) к publicProcedure. Обработчик получает проверенные входные данные и контекст запроса. Возвращайте любое сериализуемое значение: объект, массив или примитив.

Тип результата выводится автоматически и становится типом данных соответствующего хука useQuery на клиенте.

trpc.post.getById.useQuery({ id: '1' }) вызывает процедуру getById в маршрутизаторе post. Хук возвращает знакомый объект результата React Query: { data, isLoading, isError, refetch }.

Объект входных данных имеет статический тип: передача { id: 123 }, когда схема ожидает строку, приводит к ошибке TypeScript, обнаруживаемой во время разработки.

Используйте .input(zodSchema).mutation(async ({ input, ctx }) => ...) для операций записи на сервере: создания, изменения или удаления данных. Мутации вызываются явно, а не запускаются при монтировании.

Обработчик мутации получает доступ ко всему контексту запроса (включая сеанс из NextAuth) через ctx.

const { mutate, isLoading, error } = trpc.post.create.useMutation(). Вызовите mutate({ title: 'New', content: '...' }), чтобы запустить мутацию. Как и useMutation из React Query, она не запускается при монтировании.

Передайте обратные вызовы onSuccess и onError в параметры useMutation, чтобы выполнять побочные эффекты после мутации.

Чтобы обновить данные запроса после успешной мутации, используйте хук вспомогательных средств tRPC: const utils = trpc.useUtils(). В onSuccess вызовите utils.post.getAll.invalidate(), чтобы запустить повторную загрузку списка публикаций.

Это эквивалент tRPC для queryClient.invalidateQueries() из React Query, использующий ту же схему пометки данных устаревшими и их повторной загрузки.

По умолчанию tRPC использует Zod для проверки входных данных. Схема Zod выполняется на сервере во время выполнения и отклоняет некорректные входные данные до того, как они попадут в обработчик. Та же схема предоставляет типы TypeScript для клиента.

Эта двойная роль (проверка во время выполнения и типы TypeScript) устраняет дублирование: Вы один раз определяете контракт в Zod и бесплатно получаете обе гарантии безопасности.

По умолчанию tRPC использует httpBatchLink, который объединяет несколько одновременных запросов tRPC в один HTTP-запрос. Несколько вызовов useQuery в одном цикле отрисовки компонента отправляются и обрабатываются вместе.

Это значительно снижает нагрузку на сеть по сравнению с отдельными HTTP-запросами для каждого запроса на странице, которой требуются несколько наборов данных.

Определите процедуру подписки: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } }). Подписки используют асинхронные генераторы и требуют транспорта WebSocket.

Подписки идеально подходят для функций, работающих в реальном времени: живых уведомлений, курсоров при совместном редактировании или потоковой передачи ответов ИИ.

Замените httpBatchLink сочетанием httpBatchLink и wsLink с использованием splitLink: направляйте подписки в wsLink, а запросы и мутации — в httpBatchLink. Создайте клиент WebSocket с помощью createWSClient({ url: 'ws://localhost:3000' }).

Этот комбинированный транспорт означает, что большинство запросов используют эффективное объединение HTTP-запросов, а подписки — постоянные соединения WebSocket.

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) оформляет подписку на процедуру. Обратный вызов onData вызывается для каждого полученного значения.

Если соединение WebSocket разрывается, а затем восстанавливается, подписка автоматически создаётся заново.

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

Стратегия инвалидации кэша зависит от того, предпочитаете ли Вы полную повторную загрузку (инвалидация после мутации) или обновление кэша (utils.post.getAll.setData).

Какой вспомогательный метод tRPC запускает повторную загрузку запроса после успешного завершения мутации?

Определяйте запросы с помощью .query(), а мутации — с помощью .mutation(); и те и другие проверяются схемами Zod. На клиенте используйте trpc.router.procedure.useQuery() и useMutation(). После мутации инвалидируйте запросы с помощью utils.procedure.invalidate(). Подписки используют асинхронные генераторы и требуют wsLink для транспорта WebSocket.

По умолчанию httpBatchLink объединяет одновременные запросы в один HTTP-запрос.