10. Интеграция с React
Пакет @trpc/react-query предоставляет удобные React-хуки для работы с tRPC API. Под капотом он использует @tanstack/react-query, что даёт все преимущества React Query: кеширование, фоновые обновления, оптимистичные обновления.
Создание клиента
Заголовок раздела «Создание клиента»Функция createTRPCReact<AppRouter>() создаёт типизированный объект trpc, через который вы вызываете хуки. Этот объект создаётся один раз и экспортируется для использования по всему приложению.
Провайдеры
Заголовок раздела «Провайдеры»Для работы необходимо обернуть приложение в два провайдера: QueryClientProvider из React Query (управляет кешем) и trpc.Provider (передаёт tRPC клиент). Оба провайдера должны быть в корне дерева компонентов.
useQuery в tRPC
Заголовок раздела «useQuery в tRPC»trpc.procedureName.useQuery(input) — эквивалент useQuery из React Query, но с полной типизацией входных и выходных данных. Возвращает { data, isLoading, isError, error, refetch }.
useMutation в tRPC
Заголовок раздела «useMutation в tRPC»trpc.procedureName.useMutation() — для вызова mutation-процедур. Возвращает объект с методом mutate(input) и mutateAsync(input), а также состояниями isLoading, isSuccess, isError.
Инвалидация кеша
Заголовок раздела «Инвалидация кеша»После успешной мутации обычно нужно инвалидировать кеш связанных запросов. Используйте utils.procedureName.invalidate() через trpc.useContext() или useUtils().