@tanstack/vue-query
v5.59.20
Published
Hooks for managing, caching and syncing asynchronous and remote data in Vue
Downloads
634,454
Readme
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
or
$ pnpm add @tanstack/vue-query
or
$ yarn add @tanstack/vue-query
or
$ 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, })