13. tRPC + React Query
tRPC использует @tanstack/react-query как основу для клиентского кеширования. Это означает, что вы получаете все возможности React Query: умное кеширование, фоновые обновления, оптимистичные обновления, stale-while-revalidate и многое другое.
Доступ к QueryClient
Заголовок раздела «Доступ к QueryClient»Получить прямой доступ к QueryClient можно через trpc.useContext() (в Pages Router) или trpc.useUtils() (в новых версиях). Это позволяет программно управлять кешем.
Инвалидация кеша
Заголовок раздела «Инвалидация кеша»utils.procedureName.invalidate() помечает кеш как устаревший и инициирует повторный запрос данных. Вызывайте это после мутаций, которые изменяют данные. Можно инвалидировать целые роутеры: utils.user.invalidate() инвалидирует все запросы user.*.
Ручное обновление кеша
Заголовок раздела «Ручное обновление кеша»utils.procedureName.setData(input, updater) позволяет напрямую обновить кеш без нового запроса. Используется для оптимистичных обновлений — интерфейс обновляется мгновенно, до ответа сервера.
Оптимистичные обновления
Заголовок раздела «Оптимистичные обновления»Оптимистичные обновления обеспечивают моментальный отклик UI. Паттерн: в onMutate обновите кеш локально; в onError откатите изменения; в onSettled инвалидируйте кеш для синхронизации с сервером.
Prefetching
Заголовок раздела «Prefetching»utils.procedureName.prefetch(input) загружает данные заранее. Используйте в hover-обработчиках или при предсказуемой навигации пользователя для улучшения perceived performance.