15. Realtime, мультивкладочность и experimental API

Финальная глава собирает возможности, которые нужны не каждому проекту, но важны для современного production-стека.

Realtime через WebSocket/SSE

Базовый подход:

• получаете событие с сервера
• обновляете кеш через setQueryData
• при необходимости инвалидируете затронутые списки

socket.on('todo.updated', (todo: Todo) => {
  queryClient.setQueryData(['todos', 'detail', todo.id], todo)
  queryClient.invalidateQueries({ queryKey: ['todos', 'list'] })
})

Это лучше, чем принудительный polling для каждого чиха.

Когда писать в кеш, а когда инвалидировать

Пишите в кеш, если:

• у вас есть полный новый объект
• изменение локально и однозначно

Инвалидируйте, если:

• сервер пересчитал список, сортировку или агрегаты
• событие затрагивает много связанных запросов

Мультивкладочность: broadcastQueryClient

Официальный experimental plugin для синхронизации кеша между вкладками:

import { QueryClient } from '@tanstack/react-query'
import { broadcastQueryClient } from '@tanstack/query-broadcast-client-experimental'

const queryClient = new QueryClient()

broadcastQueryClient({
  queryClient,
  broadcastChannel: 'my-app',
})

Что важно:

• это experimental API
• возможны breaking changes даже в minor/patch релизах
• если используете в production, версию лучше фиксировать точно

Полезно для:

• logout/login синхронизации
• совместного кеша между вкладками
• уменьшения повторных запросов после обновления данных в одной вкладке

Experimental streaming: experimental_streamedQuery

В актуальной экосистеме есть experimental helper для потоковых данных из AsyncIterable.

Идея:

• query получает chunks постепенно
• после первого чанка может перейти в success
• пока поток не завершился, fetchStatus остаётся fetching

Это полезно для:

• чатов
• token-by-token AI output
• больших потоковых ответов

Но это experimental-функциональность, поэтому включайте её осознанно.

usePrefetchQuery и usePrefetchInfiniteQuery

Это уже не experimental, а современный API для prefetch-before-suspense.

Их стоит помнить как отдельный класс инструментов:

• не возвращают данные
• запускают prefetch во время render-подготовки
• убирают waterfall перед suspense screens

Где проходит граница “можно” и “не стоит”

Используйте experimental API, если:

• у команды есть время сопровождать обновления
• фича реально нужна продукту
• вы готовы фиксировать версии

Не спешите использовать, если:

• проекту нужен максимально предсказуемый stable stack
• команда только осваивает базовый Query workflow

Финальные best practices

• Начинайте со stable API.
• Сначала выстройте ключи, factories, invalidation и SSR.
• Только потом добавляйте realtime, broadcast и streaming.
• Любую внешнюю синхронизацию проектируйте через query cache как единый source of truth.