How to get a global isFetching status for queries & mutations with Villus

[juancampuzano]

A query returns statuses like isFetching. but this is on a query level.

But if we have a lot of queries and we would like to monitor if one of them is isFetching, to show a global loading indicator for example.

So now I want to have something like: Displaying Global Background Fetching Loading State

How can I make a global loading indicator when any queries are fetching (including in the background) with Query?

[juancampuzano]

I found a solution:

global-loading-indicator-Plugin.js

import { definePlugin } from "villus";
import { useGlobalStateStore } from "./global-store";

const globalLoadingIndicatorPlugin = definePlugin(({ afterQuery }) => {
  const state = useGlobalStateStore()
  state.loadingState = true
  afterQuery(() => {
    state.loadingState = false;
  });

global-store.js

import { ref } from "vue";
import { createGlobalState } from "@vueuse/core";

export const useGlobalStateStore = createGlobalState(() => {
  const loadingState = ref(false);
 return {
    loadingState,
  };
});