Live-адаптер Vue Query
Опубликованный npm-адаптер: live-запросы webedge-db в TanStack Vue Query.
Live-адаптер Vue Query
Задача
У реактивных бэкендов часто есть адаптер для React Query, а Vue-командам приходилось вручную связывать live-запросы с TanStack Vue Query и самим инвалидировать кэш.
Что делали
Опубликованный TypeScript-пакет: подписывается на реактивный бэкенд по WebSocket и пишет каждый live-результат прямо в кэш TanStack Vue Query.
Результат
Vue 3-компоненты используют обычные `useQuery`, а данные остаются живыми сами — без рефетча и ручной инвалидации. Опубликован в npm как `convex-vue-query`.
Dev-story статья
Live-адаптер Vue Query: как создавался проект
TanStack Query построен на pull-модели: ты сам запрашиваешь, кэшируешь и вручную инвалидируешь, когда что-то меняется. Наш реактивный бэкенд работает наоборот — он сам проталкивает новые результаты по WebSocket, как только меняются данные. Мост для этого паттерна под React уже был, а у Vue-команд не было ничего, поэтому каждый экран обрастал самописной обвязкой подписок и багами устаревшего кэша.
Разделы
05
Модули
05
Стек
TypeScript + Vue Query
Почему появился проект
У реактивных бэкендов часто есть адаптер для React Query, а Vue-командам приходилось вручную связывать live-запросы с TanStack Vue Query и самим инвалидировать кэш.
TanStack Query построен на pull-модели: ты сам запрашиваешь, кэшируешь и вручную инвалидируешь, когда что-то меняется. Наш реактивный бэкенд работает наоборот — он сам проталкивает новые результаты по WebSocket, как только меняются данные. Мост для этого паттерна под React уже был, а у Vue-команд не было ничего, поэтому каждый экран обрастал самописной обвязкой подписок и багами устаревшего кэша.
Что было создано
Опубликованный TypeScript-пакет: подписывается на реактивный бэкенд по WebSocket и пишет каждый live-результат прямо в кэш TanStack Vue Query.
convex-vue-query — небольшой адаптер, который подключает живые подписки реактивного бэкенда к TanStack Vue Query как транспортный слой. ConvexQueryClient задаёт собственные queryKeyHashFn и queryFn, подключается к общему QueryClient и потоково пишет обновления подписок прямо в кэш. Компоненты просто вызывают useQuery(convexQuery(...)), и данные сами остаются живыми.
Основные модули и путь пользователя
convexQuery() вместе с ConvexQueryClient, который владеет парой queryKeyHashFn/queryFn и проталкивает результаты по WebSocket в кэш TanStack вместо опроса
Жизненный цикл подписки привязан к наблюдателям: живой запрос открыт только пока смонтирован наблюдатель Vue Query, а неактивные запросы отписываются, чтобы сокеты не утекали
convexPaginatedQuery(), который подставляет paginationOpts и отдаёт живой { results, status, canLoadMore, loadMore } для списков на курсорах
useConvexMutation() с нативными оптимистичными обновлениями через локальное хранилище бэкенда, плюс convexAction() для не-живых вызовов action-как-запрос
SSR-путь через HTTP-клиент с семантикой консистентных запросов по умолчанию и явный disconnect() для HMR-очистки и остановки приложения
Архитектура и технологические решения
Сделано на TypeScript, Vue Query, webedge-db.
Написан на TypeScript под Vue 3 и TanStack Vue Query, повторяет контракт существующего React-адаптера и ставит staleTime в Infinity, поскольку проталкиваемые данные никогда не устаревают — за счёт этого всё остаётся тонким транспортным слоем, а не вторым кэшем.
Результат и выводы
Vue 3-компоненты используют обычные `useQuery`, а данные остаются живыми сами — без рефетча и ручной инвалидации. Опубликован в npm как `convex-vue-query`.
Опубликованный npm-пакет, дающий Vue-приложениям realtime-запросы, пагинацию и оптимистичные мутации без ручной инвалидации и закрывающий разрыв между реактивным бэкендом и экосистемой Vue.
Связанные статьи
Читать дальше
Связанные истории проектов
Эти проекты близки по техническим или продуктовым решениям и показывают, как тот же принцип работает в другом контексте.
Dev-storyCMS
Динамический headless-CMS на webedge-db — типы контента, медиа, роли и публичный read-API, питающий наши сайты и статьи.
Dev-storySecurity-лаба для Vue + webedge-db
Практические лабы по безопасности для Vue 3 + webedge-db — зачёт за реальный эксплойт.
Dev-storyПлатформа календарных бронирований
Бронирование на Vue 3 — слоты, записи, письма и Meet-видеозвонки в один клик.
Есть похожая идея?
Обсудить проект