Vue Query

Hooks for fetching, caching and updating asynchronous data in Vue.

Install vue-query

npm install vue-query
# or
yarn add vue-query

If you are using Vue 2.x, make sure to also setup @vue/composition-api

Initialize Vue Query via VueQueryPlugin

import { createApp } from "vue";
import { VueQueryPlugin } from "vue-query";

import App from "./App.vue";

createApp(App).use(VueQueryPlugin).mount("#app");

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 them as reactive variables

const id = ref(1);
const enabled = ref(false);

const query = useQuery(["todos", id], () => getTodos(id), { enabled });