November: Procrastination Month

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

    1.25.2 • 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 });

    Install

    npm i vue-query

    DownloadsWeekly Downloads

    12,962

    Version

    1.25.2

    License

    MIT

    Unpacked Size

    641 kB

    Total Files

    103

    Last publish

    Collaborators

    • tannerlinsley
    • damianosipiuk