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.11.2 (10/01/2021)

  • Bugfix: remove react type reference from devtools

v1.11.1 (09/26/2021)

  • Bugfix: useIsMutating overloads

v1.11.0 (09/26/2021)

  • Bugfix: populate queries when opening devtools
  • re-export hydration from react-query/core
  • update react-query

v1.10.1 (09/02/2021)

  • suspense: always return a promise

v1.10.0 (08/21/2021)

  • hydration utilities moved to main package, renamed ssr to nuxt
  • hydration utilities moved to the main package. Import via import {hydrate, dehydrate} from ‘vue-query’

v1.9.1 (08/20/2021)

  • utils: export arguments parsing utils

v1.9.0 (08/17/2021)

  • provide instance of QueryClient to provider and change default key

v1.8.3 (07/30/2021)

  • types: fix unwanted dependency on react types

v1.6.1 (06/16/2021)

  • devtools: devtools available only in development mode

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