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

1. Install vue-query

   1$ npm i @tanstack/vue-query

   or

   1$ pnpm add @tanstack/vue-query

   or

   1$ yarn add @tanstack/vue-query

   or

   1$ bun add @tanstack/vue-query

   If you are using Vue 2.6, make sure to also setup @vue/composition-api

2. Initialize Vue Query via VueQueryPlugin

   1import { createApp } from 'vue'
   2import { VueQueryPlugin } from '@tanstack/vue-query'
   3
   4import App from './App.vue'
   5
   6createApp(App).use(VueQueryPlugin).mount('#app')

3. Use query

   1import { defineComponent } from 'vue'
   2import { useQuery } from '@tanstack/vue-query'
   3
   4export default defineComponent({
   5  name: 'MyComponent',
   6  setup() {
   7    const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })
   8
   9    return {
   10      query,
   11    }
   12  },
   13})

4. If you need to update options on your query dynamically, make sure to pass them as reactive variables

   1const id = ref(1)
   2const enabled = ref(false)
   3
   4const query = useQuery({
   5  queryKey: ['todos', id],
   6  queryFn: () => getTodos(id),
   7  enabled,
   8})