Vue Query
Hooks for fetching, caching and updating asynchronous data in Vue.
Support for Vue 2.x via vue-demi
Documentation
Visit https://tanstack.com/query/latest/docs/vue/overview
Quick Features
- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
- Parallel + Dependent Queries
- Mutations + Reactive Query Refetching
- Multi-layer Cache + Automatic Garbage Collection
- Paginated + Cursor-based Queries
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
- Request Cancellation
- (experimental) Suspense + Fetch-As-You-Render Query Prefetching
- (experimental) SSR support
- Dedicated Devtools
- (depending on features imported)
Quick Start
-
Install vue-query
$ npm i @tanstack/vue-query
$ pnpm add @tanstack/vue-query
$ yarn add @tanstack/vue-query
$ bun add @tanstack/vue-query
If you are using Vue 2.6, make sure to also setup @vue/composition-api
-
Initialize Vue Query via VueQueryPlugin
import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'
createApp(App).use(VueQueryPlugin).mount('#app')
-
Use query
import { defineComponent } from 'vue'
import { useQuery } from '@tanstack/vue-query'
export default defineComponent({
name: 'MyComponent',
setup() {
const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })
return {
query,
}
},
})
-
If you need to update options on your query dynamically, make sure to pass them as reactive variables
const id = ref(1)
const enabled = ref(false)
const query = useQuery({
queryKey: ['todos', id],
queryFn: () => getTodos(id),
enabled,
})