Press "Enter" to skip to content

Hooks To Fetch, Cache, And Update Asynchronous Data in Vue

Vue Query is hooks to fetch, cache, and update asynchronous data in Vue.

vue query, vue fetch data from api, react query for vue, vue js cache, swrv vue, vue fetch api, vue demi, vue 3 composition api fetch

Quick Features

  • Fetching transport/protocol/background neutral data (REST, GraphQL, Promises, whatever!)
  • Auto caching + re-fetch (re-validation of the old, refocusing window, polling/real-time)
  • Parallel + dependent queries
  • Mutations + re-fetching interactive query
  • Multi-layer cache + automatic waste collection
  • Numbered queries + cursor-based
  • Load More + Infinite scroll queries with scroll recovery
  • Cancellation request
  • (Beta) Thriller + Query Prefetch
  • (Beta) SSR Support
  • Custom dev tools
  • npm package size (depending on imported features)

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-query

# NPM
$ npm i vue-query --save

1. Import a 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. A 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);

Vue Hooks For Fetching, Caching And Updating Asynchronous Data, Vue Query Plugin/Github


See Demo And Download

Official Website(DamianOsipiuk): Click Here

This superior jQuery/javascript plugin is developed by DamianOsipiuk. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *