Hooks for managing, caching and syncing asynchronous and remote data in Vue
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.
Hooks for managing, caching and syncing asynchronous and remote data in...
Read moreDeveloper tools to interact with and visualize the TanStack/react-query...
Read moreHooks for managing, caching and syncing asynchronous and remote data in...
Read moreCore 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
A README file for the @tanstack/vue-query code repository. View Code
Hooks for fetching, caching and updating asynchronous data in Vue.
Support for Vue 2.x via vue-demi
Visit https://tanstack.com/query/latest/docs/vue/overview
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,
})