Local state and server cache: how to balance them with vue-query
summary
A demo replaces duplicated Vuex fetch logic with vue-query composables around a simple tractors app, showing concrete code: useQuery and useMutation, query keys like ['tractors'] and ['tractors', id], and a callback fetch for parameterized queries. It demonstrates cache controls: default retry = 3, window-focus refetching, staleTime = 10s, placeholderData, and updating the cache on mutation with setQueryData so the list reflects adds without a second network round trip.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:46Global state in apps
- 3:55Server data in local state
- 9:11Sync vs async state
- 10:39vue-query solution
- 11:20Live: Fetch tractors
- 14:58Loading and error states
- 16:46Reusable composables
- 19:37Caching and stale time
- 21:01Fetching single tractor data with parameters
- 23:14Mutating server data
- 25:01Updating cache after mutations
- 27:28Q&A
related talks
24mLocal State and Server Cache: Finding a Balance
25mLocal State and Server Cache: Finding a Balance
27mDeep down the rabbit hole of state management and server cache
22mYou might not need Vuex
03mManage external data querying using TanStack Vue Query
29mEfficient server state management
44mData Management in Vue
25mReact Query Under the Hood