Out of the box, Vue does not provide an opinionated way of interacting with server data. So developers end up building custom solutions that tend to end up either over-complicated, features lacking, or using global state management libraries that are not designed for this kind of usage. While most traditional state management libraries are great for working with client states, they are not so great at working with async or server states. This is because the server state is totally different.

So Damian Osipiuk introduced a new package called Vue Query that provides hooks for fetching, caching, and updating asynchronous data in Vue. Vue Query is hands down one of the best libraries for managing server states. It works amazingly well out-of-the-box, with zero-config, and can be customized to your liking as your application grows. Vue Query allows you to defeat and overcome the tricky challenges and hurdles of server state and control your app data before it starts to control you.

On a more technical note, Vue Query will likely:

• Help you remove many lines of complicated and misunderstood code from your application and replace them with just a handful of lines of Vue Query logic.
• Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
• Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.
• Potentially help you save on bandwidth and increase memory performance

Main Features

• Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
• Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
• Parallel + Dependent Queries
• Mutations + Reactive Query Refetching
• Multi-layer Cache + Automatic Garbage Collection
• Paginated + Cursor-based Queries
• Load-More + Infinite Scroll Queries w/ Scroll Recovery
• Request Cancellation
• (experimental) Suspense + Fetch-As-You-Render Query Prefetching
• (experimental) SSR support
• Dedicated Devtools
• npm bundle size (depending on features imported)

Installation

You can install this package via npm or yarn by running this command:

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

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

Quick Startup

After the installation, you have to 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 });

Above is the quick startup and basic information about this package, If you want to learn more about this package you can visit its detailed documentation and source code on Github.