If you import watchEffect from vue and use it to check if one of the values changes, this method will check every time if the value changes, and if it does you will notice. Before i didn’t use this method the values stayed loading and not showing on my localhost.
<template>
<v-container>
<v-row v-for=”category in categories”>
<v-col>
<v-card :key=”category.category_id” class=”mx-auto card-category” max-width=”400″>
<v-img
class=”align-end text-white”
height=”200″
:src=”category?.photos[0]?.photo_path”
cover
>
<v-row class=”d-flex justify-center title-row”>
<v-card-title class=”card-title”>{{ category.name }}</v-card-title>
</v-row>
</v-img>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script lang=”ts”>
import { defineComponent, ref, watchEffect } from ‘vue’
import { useQuery } from ‘@/api/apollo/apolloClient’
import { apolloClient } from ‘@/api/apollo/apolloClient’
import { GET_CATEGORIES } from ‘../api/gql/queries’
// Define the shape of the category object directly in the component
interface Category {
category_id: string
code: string
name: string
photos: Array<any>
}
// Define a type/interface for the data returned by the GET_CATEGORIES query
interface CategoryData {
categories: Category[]
}
export default defineComponent({
name: ‘CategoryList’,
setup() {
let categories = ref<Category[]>([])
const { loading, error, result } = useQuery(GET_CATEGORIES)
console.log(result.value,’=-= result value’)
console.log(loading, result, ‘result’)
// Ensure data is available and not loading
if (!loading.value && result.value) {
console.log(result.value, ‘result’)
categories.value = result.value?.categories ?? []
console.log(categories, ‘categorieeeeeeeees’)
}
watchEffect(() => {
if (!loading.value && result.value) {
categories.value = result.value.categories ?? []
}
})
return {
categories
}
}
})
</script>