Popularity
3.3
Growing
Activity
1.7
Growing
1,082
9
48

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

:warning: Package migration :warning:

This package was migrated to be a part of https://github.com/TanStack/query.

If you are still on v1 make sure to follow migration guide first and then switch to @tanstack/vue-query.

If you are already on v2, just swap vue-query for @tanstack/vue-query in both of your package.json and import statements. Everything should still work as before.

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.