frandiox / vue-query

Hooks for fetching, caching and updating asynchronous data in Vue

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

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. Attach Vue Query to the root component of your Vue application

   import { defineComponent } from "vue";
   import { useQueryProvider } from "vue-query";
   
   export default defineComponent({
     name: "App",
     setup() {
       useQueryProvider();
     },
   });

2. Use query

   import { defineComponent } from "vue";
   import { useQuery } from "vue-query";
   
   export default defineComponent({
     name: "MyComponent",
     setup() {
       const query = useQuery("todos", getTodos);
   
       return {
         query,
       };
     },
   });

3. If you need to update options on your query dynamically, make sure to pass it as reactive property

   const id = ref(1);
   const queryKey = reactive(["todos", { id }]);
   const queryFunction = () => getTodos(id);
   const options = reactive({
     enabled: false,
   });
   
   const query = useQuery(queryKey, queryFunction, options);