Popularity
3.1
Growing
Activity
7.5
Declining
926
9
41

Programming language: TypeScript
License: MIT License
Tags: API    

Vue Query alternatives and similar libraries

Based on the "API" category.
Alternatively, view vue-query alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of Vue Query or a related project?

Add another 'API' Library

README

[Vue Query logo](./media/vue-query.png)

npm version npm license bundle size npm

build status codecov

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
  • npm bundle size (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");
  1. Use query
   import { defineComponent } from "vue";
   import { useQuery } from "vue-query";

   export default defineComponent({
     name: "MyComponent",
     setup() {
       const query = useQuery("todos", getTodos);

       return {
         query,
       };
     },
   });
  1. 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 });


*Note that all licence references and agreements mentioned in the Vue Query README section above are relevant to that project's source code only.