vuejs community I'm a newbie on vue.js, to fetch data with vue-query, vue.js 3, and composition API, the returned data is ObjectRefImpl. When I print the values It returns me: Property "isLoading" was accessed during render but is not defined on the instance. So much thanks!
"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');
You should make it work if you modify your component a little bit.
const fetcher = async () => {
await fetch('https://jsonplaceholder.typicode.com/todos').then(response =>
response.json()
);
};
export default {
setup() {
const {data, isError, error, isLoading} = useQuery('todos', fetcher);
console.log(data.value);
return {isLoading, isError, data, error};
}
};
All values returned by vue-query are refs, so you have to access them by accessing .value. This is due to Vue reactivity system, and it is necessary, so you can get automatic updates on those values.
Also you need to place your useQuery calls directly in setup. They will run and update whenever necessary without any action from your side.
You have a working example for this following this link: https://github.com/DamianOsipiuk/vue-query/tree/main/examples/simple