Vue Hooks For Fetching, Caching And Updating Asynchronous Data

Description:

vue-query is a collection of hooks for fetching, caching and updating asynchronous data in Vue applications.

Basic Usage:

1. Import the vue-query.

import { defineComponent } from "vue";
import { useQueryProvider } from "vue-query";
export default defineComponent({
  name: "App",
  setup() {
    useQueryProvider();
  },
});

2. Use the query.

import { defineComponent } from "vue";
import { useQuery } from "vue-query";
export default defineComponent({
  name: "MyComponent",
  setup() {
    const query = useQuery("todos", getTodos);
    return {
      query,
    };
  },
});

3. Simple example.

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

Preview:

Vue Hooks For Fetching, Caching And Updating Asynchronous Data

Changelog:

v1.19.0 (01/22/2022)

  • plugin: replace useQueryProvider with VueQueryPlugin

v1.18.1 (01/21/2022)

  • bugfix

v1.18.0 (01/18/2022)

  • useQuery, useInfiniteQuery: deep watch for reactive arguments, deep unref options

v1.17.0 (01/18/2022)

  • useQuery: make query options reactive by default

v1.16.2 (01/11/2022)

  • Bugfix: useQueries: fix handling of queries update. Accept Ref as an argument

v1.16.1 (01/10/2022)

  • Bugfix: query: make queries work with Refs in queryKey array

v1.16.0 (01/09/2022)

  • export UseQueryReturnType, UseQueriesOptions, UseQueriesResults types

Download Details:

Author: DamianOsipiuk

Live Demo: https://vue-query.vercel.app/#/examples/simple

Download Link: https://github.com/DamianOsipiuk/vue-query/archive/refs/heads/main.zip

Official Website: https://github.com/DamianOsipiuk/vue-query

Install & Download:

# Yarn
$ yarn add vue-query

# NPM
$ npm i vue-query --save

You Might Be Interested In:

Tags:

Add Comment