Error with Vue 2 - No queryClient found in Vue context

Hello,

Tried this out with my Vue 2 codebase.

This is how I am mounting app

import { QueryClient, VUE_QUERY_CLIENT } from "vue-react-query";

import VueCompositionApi from "@vue/composition-api";
import { createApp, h } from "@vue/composition-api";

Vue.use(VueCompositionApi);
const queryClient = new QueryClient();
queryClient.mount();
createApp({
  provide: {
    [VUE_QUERY_CLIENT]: queryClient
  },
  router,
  store,
  render: () => h(App)
}).mount("#app");

And this is how I am using it in my component

export default {
  setup() {
    const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
      "todos",
      todoFetcher,
      {
        retry: 0,
        staleTime: 1000,
        cacheTime: 2000
      }
    );
    return { isLoading, isError, isFetching, data, error, refetch };
  },
  name: "home"
};

Here are my dependencies

"dependencies": {
    "@vue/composition-api": "^1.0.0-rc.7",
    "core-js": "^3.4.4",
    "vue": "^2.6.11",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0",
    "vue-react-query": "^0.4.0",
  },

And this is the error I am getting

Also, getting this warning in a different codebase.

Thank you!

[DamianOsipiuk]

It’s hard to tell if it’s an anti-pattern since Vue3 / composition API is pretty fresh. However, composition API can handle all of the things that were previously available as component parts (data, computed, lifecycle, etc.). Therefore I would say, that if you can, you should rewrite it with composition API, which should reduce the need for boilerplate.

Also, you could create your own hook that will contain the useQuery inside and will hide all of this additional logic, exposing only parts that are needed outside. You just need to make sure that you are calling the useQuery inside the setup function for the provide/inject to work.

Glad it’s working 🥇

[DamianOsipiuk]

Then it depends from where do you get those parameters.

If those are set via data, computed, watch, then those can be converted to the compositionAPI and composed with useQuery in the same closure.

If those are fetched from somewhere or converting is not an option then you have few options. Basically they would boil down to exposing a ref from setup function and use it in the queryKey. Then whenever you will update the value of a ref it should refetch the data with updated parameters.