Vue Query gyvasis adapteris

Publikuotas npm adapteris: webedge-db live užklausos į TanStack Vue Query.

TypeScriptVue Querywebedge-db

Dev-story01

Iššūkis

Reaktyvūs backendai dažnai turi React Query adapterį, bet Vue komandos gyvas užklausas į TanStack Vue Query turėjo jungti rankomis ir pačios invaliduoti talpyklą.

Ką darėme

TypeScript paketas, prenumeruojantis reaktyvų backendą per WebSocket ir rašantis kiekvieną gyvą rezultatą tiesiai į TanStack Vue Query talpyklą.

Rezultatas

Vue 3 komponentai naudoja įprastus „useQuery“ kvietimus, o duomenys lieka gyvi automatiškai — jokio pakartotinio gavimo ar rankinio invalidavimo. Publikuota npm kaip „convex-vue-query“.

Dev-story straipsnis

Kaip buvo kuriamas projektas: Vue Query gyvasis adapteris

TanStack Query remiasi traukimo modeliu: tu pats užklausi, kešuoji ir rankiniu būdu invaliduoji, kai kažkas pasikeičia. Mūsų reaktyvus backend'as veikia priešingai — jis per WebSocket pats atstumia naujus rezultatus vos pasikeitus duomenims. React tiltas šiam modeliui jau egzistavo, bet Vue komandos neturėjo nieko, tad kiekvienas ekranas apaugdavo ranka rašytu prenumeratų klijavimu ir pasenusio kešo klaidomis.

Skyriai

Moduliai

Stackas

TypeScript + Vue Query

Kodėl projektas atsirado

Reaktyvūs backendai dažnai turi React Query adapterį, bet Vue komandos gyvas užklausas į TanStack Vue Query turėjo jungti rankomis ir pačios invaliduoti talpyklą.

Ką sukūrėme

TypeScript paketas, prenumeruojantis reaktyvų backendą per WebSocket ir rašantis kiekvieną gyvą rezultatą tiesiai į TanStack Vue Query talpyklą.

convex-vue-query yra nedidelis adapteris, sujungiantis reaktyvaus backend'o gyvas prenumeratas su TanStack Vue Query kaip transporto sluoksniu. ConvexQueryClient pateikia savitą queryKeyHashFn ir queryFn, prisijungia prie bendro QueryClient ir srautu leidžia prenumeratų atnaujinimus tiesiai į kešą. Komponentai tiesiog kviečia useQuery(convexQuery(...)) ir duomenys patys išlieka gyvi.

Pagrindiniai moduliai ir vartotojo kelias

M01

convexQuery() kartu su ConvexQueryClient, valdančiu queryKeyHashFn/queryFn porą ir stumiančiu WebSocket rezultatus į TanStack kešą, o ne apklausiantį serverį

M02

Prenumeratų gyvavimo ciklas susietas su stebėtojais: gyva užklausa atvira tik kol prijungtas Vue Query stebėtojas, o neaktyvios užklausos atprenumeruojamos, kad nesikauptų atviri lizdai

M03

convexPaginatedQuery(), kuris įterpia paginationOpts ir pateikia gyvą { results, status, canLoadMore, loadMore } žymekliu grįstiems sąrašams

M04

useConvexMutation() su natyviais optimistiniais atnaujinimais per backend'o vietinę saugyklą, plius convexAction() negyviems action-kaip-užklausa kvietimams

M05

SSR kelias per HTTP klientą su nuoseklios užklausos semantika pagal nutylėjimą ir aiškus disconnect() HMR utilizavimui bei programos išjungimui

Architektūra ir technologiniai sprendimai

Sukurta su TypeScript, Vue Query, webedge-db.

Parašytas TypeScript kalba Vue 3 ir TanStack Vue Query pagrindu, jis atkartoja esamo React adapterio sutartį ir nustato staleTime į Infinity, nes atstumti duomenys niekada nepasensta — taip visa tai lieka plonu transporto sluoksniu, o ne antra talpykla.

Rezultatas ir pamokos

Vue 3 komponentai naudoja įprastus „useQuery“ kvietimus, o duomenys lieka gyvi automatiškai — jokio pakartotinio gavimo ar rankinio invalidavimo. Publikuota npm kaip „convex-vue-query“.

Paskelbtas npm paketas, suteikiantis Vue programoms realaus laiko užklausas, puslapiavimą ir optimistines mutacijas be rankinio invalidavimo, užpildantis spragą tarp reaktyvaus backend'o ir Vue ekosistemos.