About @tanstack/vue-query

The @tanstack/vue-query package is a powerful tool designed to enrich Vue applications by efficiently managing, caching, and synchronizing asynchronous and remote data. This node module leverages the robustness of Vue's reactive system to provide hooks that simplify handling data fetching, sharing state between components, and maintaining data consistency across your application. By employing @tanstack/vue-query, developers can significantly reduce the complexity involved in data management operations, thus speeding up the development process and improving the scalability of their applications. The hooks provided by this package not only help in fetching data but also in caching it, making subsequent data retrieval instantaneous and reducing the load on server resources.

To integrate @tanstack/vue-query into your Vue project, you can easily start by running the command `npm install @tanstack/vue-query`. This installation process hooks your application up with all the necessary functionalities to begin fetching, caching, and synchronizing your data through a simplified API. The simplicity of setting up @tanstack/vue-query allows developers to quickly leverage its benefits without the steep learning curve often associated with similar technologies. Once installed, developers can utilize various hooks like `useQuery` to fetch data and `useMutation` to handle data mutations, all while maintaining a clean and reactive component architecture.

The benefits of using @tanstack/vue-query extend beyond just technical enhancements. By incorporating this module, applications become more efficient and user-friendly. The caching mechanism reduces the need for frequent data fetching, which in turn decreases network traffic and lowers server load. This efficiency gain not only boosts the performance of the application but also enhances the user experience by providing faster load times and a more responsive interface. Additionally, @tanstack/vue-query’s built-in mechanisms for updating stale data and synchronizing data across components ensure that users always view the most current information, which is crucial for applications dealing with real-time data.

TanStack npm packages

Find the best node modules for your project.

Search npm

@tanstack/react-query

Hooks for managing, caching and syncing asynchronous and remote data in...

@tanstack/react-query-devtools

Developer tools to interact with and visualize the TanStack/react-query...

@tanstack/vue-query

Hooks for managing, caching and syncing asynchronous and remote data in...

Dependencies

Core dependencies of this npm package and its dev dependencies.

@arethetypeswrong/cli, @cspell/eslint-plugin, @solidjs/testing-library, @tanstack/config, @testing-library/jest-dom, @testing-library/react, @types/eslint, @types/node, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vitest/coverage-istanbul, cpy-cli, esbuild-plugin-file-path-extensions, eslint, eslint-config-prettier, eslint-import-resolver-typescript, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, husky, jsdom, knip, lint-staged, nx, prettier, prettier-plugin-svelte, publint, react, react-dom, rimraf, sherif, solid-js, tsup, typescript, vite, vitest

Documentation

A README file for the @tanstack/vue-query code repository. View Code

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