useQueryProvider not working in <script setup>

[jens-morten-mikkelsen]

Hello, i recently tried using useQueryProvider in my setup, that can have multiple root compontent. It is using vue 2.7, and a normal Vue.use() installation doesn't work (for what ever reason, but this has its own seperate issue). After i switched one of my components over to useQueryProvider, im getting this error in the Browser:

vue.runtime.esm.js:4573 [Vue warn]: provide is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().

(found in <Root>)

this is my component:

<template>
    <transition name="fade"
                mode="out-in"
                tag="div">
        <LoadingSpinner v-if="isLoading"
                        class="max-w-208 w-208"/>
        <section v-else
                 class="flex items-end space-x-24 sm:space-x-32">
            <p>
                show content
            </p>
        </section>
    </transition>
</template>

<script lang="ts" setup>
    import LoadingSpinner from "@/components/shared/LoadingSpinner.vue";
    import { useQueryProvider } from "vue-query";
    import {useCurrentBasket} from '@/core/api/basket/useBasketApi';
    import {watch} from 'vue';

    useQueryProvider();

    const props = defineProps<{
        deliveryDateChanges: number
    }>();

    const { refetch, isLoading } = useCurrentBasket();
    watch(() => props.deliveryDateChanges, () => refetch.value());
</script>

[DamianOsipiuk]

Hi, The error that you provided narrows it down to the exact same issue, why VueQueryPlugin approach does not work for you.

• https://github.com/vuejs/composition-api/blob/main/src/apis/inject.ts#L32
• https://github.com/vuejs/composition-api/blob/5e3fc1e37706c4deaf2ad7f6e3b31ceee145846e/src/utils/helper.ts#L15

This is exactly the same approach as we are using to check if we can get the QueryClient from the context:

• https://github.com/DamianOsipiuk/vue-query/blob/main/src/vue/useQueryClient.ts#L7

It appears that the application instance cannot be found. Why that happens i do not know, but it must be connected with the way you are instantiating Vue application.

[jens-morten-mikkelsen]

okay, thank you