Vue Hooks For Fetching, Caching And Updating Asynchronous Data

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.26.0 (08/23/2022)

  • unref useQueries options

v1.25.2 (07/17/2022)

  • bugfixes

v1.25.1 (07/14/2022)

  • bugfixes

v1.25.0 (05/25/2022)

  • bugfixes
  • update query/core

v1.24.0 (05/19/2022)

  • context sharing

v1.23.1 (05/15/2022)

  • use generic TQueryKey in useQuery and useInfiniteQuery parameters

v1.23.0 (05/04/2022)

  • use onScopeDispose instead of onUnmount in composables

v1.22.3 (04/08/2022)

  • bugfixes

v1.22.2 (04/04/2022)

  • use queryClient wrapper for provider and plugin

v1.22.1 (04/03/2022)

  • bugfix

v1.22.0 (04/02/2022)

  • update query core package

v1.20.1 (04/01/2022)

  • bugfix

v1.20.0 (03/18/2022)

  • reactivity aware wrappers for queryClient, queryCache and mutationCache

v1.19.3 (03/06/2022)

  • bugfixes

v1.19.2 (03/05/2022)

  • bugfixes

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
Tags:

Add Comment