vue-query via CDN

[levi-knaepkens]

Hi,

Is it possible to use vue-query through CDN properly? I saw in the documentation that it is possible for react-query, but not for vue-query.

However, there is a CDN via https://www.jsdelivr.com/package/npm/@tanstack/vue-query, I tried it but it doesn't seem to work as it should.

I am building a vue app with no build step, so each package must be delivered via CDN instead of NPM. The imports are collected via an import folder in my html root. I also use vue3-sfc-loader, to use Single File Components and its benefits as much as possible.

I managed to use the CDN, import vue-query into my root and initialize it:

    <script type="importmap">
        {
          "imports": {
           "vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm-browser.js",
            "@tanstack/vue-query": "https://cdn.jsdelivr.net/npm/@tanstack/vue-query@latest/+esm"
          }
        }
    </script>

    <script type="module">
        import * as Vue from 'vue';
        import { loadModule } from 'vue3-sfc-loader';
        import createOptions from '@/Vue3LoaderOptions.js';
        import { VueQueryPlugin } from '@tanstack/vue-query';

        const loaderOptions = createOptions();

        Vue.createApp({
            components: {
                app: Vue.defineAsyncComponent(() =>
                    loadModule('/Areas/Ambureg/Scripts/InterventionFiche/App.vue', loaderOptions)
                ),
            },
        })
            use(VueQueryPlugin)
            .mount('#app');
    </script>

When I try to retrieve data in my app component with useQuery, this is the part where I get stuck. The data is retrieved, but the reactivity of the result object does not seem to be correct. When I look at the logs, the correct values are logged, but the UI does not update. Also, when I destructure the result object, the reactivity is completely lost:

<template>
    <div class="amber-container">
        <h1>User List</h1>
        <span v-if="result.isPending">Loading...</span>
        <span v-else-if="result.isError">Error: {{ result.error.message }}</span>
        <ul v-else-if="result.data">
            <li v-for="user in result.data" :key="user.name">{{ user.name }}</li>
        </ul>
    </div>
</template>

<script setup>
    import {  watchEffect } from 'vue';
    import { useQuery } from '@tanstack/vue-query';

    const fetchUsers = async () => {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
            throw new Error('Failed to fetch users');
        }
        return response.json();
    };

    const result = useQuery({ queryKey: ['users'], queryFn: fetchUsers });

    watchEffect(() => {
        console.log('isPending:', result.isPending);
        console.log('data:', result.data);
        console.log('error:', result.error);
    });
</script>

Am I missing something here, or is it just not possible to use vue-query in this way?