Vue Query
Hooks for fetching, caching and updating asynchronous data in Vue.
Support for Vue 2.x via vue-demi
Based on react-query
Documentation
Visit https://vue-query.vercel.app
Visit https://vue-query-next.vercel.app for V2 documentation
For topics not covered in vue-query docs
visit react-query docs as most of the concepts and APIs are the same.
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 install vue-query # or yarn add vue-query
If you are using Vue 2.x, make sure to also setup @vue/composition-api
-
Initialize Vue Query via VueQueryPlugin
import { createApp } from "vue"; import { VueQueryPlugin } from "vue-query"; import App from "./App.vue"; createApp(App).use(VueQueryPlugin).mount("#app");
-
Use query
import { defineComponent } from "vue"; import { useQuery } from "vue-query"; export default defineComponent({ name: "MyComponent", setup() { const query = useQuery("todos", 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(["todos", id], () => getTodos(id), { enabled });