@tanstack/vue-query
TypeScript icon, indicating that this package has built-in type declarations

5.24.7 • Public • Published

Vue Query logo

npm version npm license bundle size npm

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
  • npm bundle size (depending on features imported)

Quick Start

  1. 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

  2. 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')
  3. 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,
        }
      },
    })
  4. 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,
    })

Readme

Keywords

none

Package Sidebar

Install

npm i @tanstack/vue-query

Weekly Downloads

73,144

Version

5.24.7

License

MIT

Unpacked Size

742 kB

Total Files

262

Last publish

Collaborators

  • nksaraf
  • tannerlinsley