Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error with Vue 2 - No queryClient found in Vue context

See original GitHub issue


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";

const queryClient = new QueryClient();
  provide: {
    [VUE_QUERY_CLIENT]: queryClient
  render: () => h(App)

And this is how I am using it in my component

export default {
  setup() {
    const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
        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 image

Also, getting this warning in a different codebase. image

Thank you!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

DamianOsipiukcommented, Apr 22, 2021

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 🥇

DamianOsipiukcommented, Apr 21, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Usage with jest · Issue #63 · DamianOsipiuk/vue-query - GitHub
No queryClient found in Vue context, use 'useQueryProvider' to set one in the root component. Any ideas how to approch this issue besides ......
Read more >
No QueryClient set, use QueryClientProvider to set one
As the error suggests, you need to wrap your application in a QueryClientProvider . This is on the first page of the docs:...
Read more >
vue-query - npm
Hooks for fetching, caching and updating asynchronous data in Vue. ... Start using vue-query in your project by running `npm i vue-query`.
Read more >
Vue3 + TS + Vue Query + Express + tRPC: setup example
The following code shows the router, which contains the access points: 2 query endpoints (similar to a rest GET endpoint):. greetings ...
Read more >
State Management | Vue.js
It is a self-contained unit with the following parts: The state, the source of truth that drives our app;; The view, a declarative...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found