Package Exports

vue-query
vue-query/esm/index.js
vue-query/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-query) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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
(depending on features imported)

Quick Start

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

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

Use query

import { defineComponent } from "vue";
import { useQuery } from "vue-query";

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

    return {
      query,
    };
  },
});

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