Find Similar Packages for @tanstack/vue-query

Package	Downloads	Stars	Size	Issues	Publish	License

@tanstack/vue-query	176,309	43,976	705 kB	110	a day ago	MIT

@tanstack/vue-query

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,
})