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 https://react-query.tanstack.com/reference/useQuery as most of the concepts and API 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

Attach Vue Query to the root component of your Vue application

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

export default defineComponent({
  name: "App",
  setup() {
    useQueryProvider();
  },
});

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 it as reactive property

const id = ref(1);
const queryKey = reactive(["todos", { id }]);
const queryFunction = () => getTodos(id);
const options = reactive({
  enabled: false,
});

const query = useQuery(queryKey, queryFunction, options);