vue-query (original) (raw)

1.26.0 • Public • Published 3 years ago

• Readme
• Code Beta
• 4 Dependencies
• 11 Dependents
• 78 Versions

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

1. 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 2. 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"); 3. Use query
import { defineComponent } from "vue";
import { useQuery } from "vue-query";
export default defineComponent({
name: "MyComponent",
setup() {
const query = useQuery("todos", 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(["todos", id], () => getTodos(id), { enabled });