vue-query
TypeScript icon, indicating that this package has built-in type declarations

1.26.0 • Public • Published

Vue Query logo

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");
  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 });

Package Sidebar

Install

npm i vue-query

Weekly Downloads

9,731

Version

1.26.0

License

MIT

Unpacked Size

641 kB

Total Files

103

Last publish

Collaborators

  • tannerlinsley
  • damianosipiuk