Greetings to the Vue.js community! As a newcomer to Vue.js, I am seeking guidance on fetching data using vue-query, Vue.js 3, and the composition API. The data returned to me is ObjectRefImpl, but when I try to print the values, I encounter the error: "Property 'isLoading' was accessed during render but is not defined on the instance." Any help or advice on how to resolve this issue would be greatly appreciated!
Dependencies:
"vue": "^3.2.12", "vue-query": "^1.11.0"
Todo.vue
import {onMounted} from 'vue';
export default {
setup() {
const fetcher = async () => {
await fetch('https://jsonplaceholder.typicode.com/todos').then(response =>
response.json()
);
};
onMounted(() => {
const {data, isError, error, isLoading} = useQuery('todos', fetcher);
console.log(data);
return {isLoading, isError, data, error};
});
}
};
App.vue
<script>
import {defineComponent} from 'vue';
import {useQueryProvider} from 'vue-query';
import {VueQueryDevTools} from 'vue-query/devtools';
export default defineComponent({
components: {VueQueryDevTools},
name: 'App',
setup() {
useQueryProvider();
}
});
</script>
<template>
<VueQueryDevTools :initialIsOpen="true" />
<router-view />
</template>
main.js
import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './index.scss';
createApp(App)
.use(store)
.use(router)
.mount('#app');