› Forums › How to solve › I just created an vue file in which i used Apollo vue and it shows me nothing
Tagged: apollo vue, graphql, vue, vue after refresh, vue not showing anything, vue.js
- This topic has 1 reply, 1 voice, and was last updated 7 months ago by Acenollari.
-
AuthorPosts
-
April 1, 2024 at 6:44 am #9370AcenollariParticipant
I just created an vue file in which i used Apollo vue and it shows me nothing but when i change a little thing on console.log and the file autosaves in web it shows results.If i refresh the page again it won’t show me anything and i don’t know why?
This is the code.<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 } 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(loading, result, ‘result’)
console.log(result.value?._value?.categories,’=-= result value’)// 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’)
}
return {
categories
}
}
})
</script>April 1, 2024 at 6:59 am #9371AcenollariParticipantIf 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> -
AuthorPosts
- You must be logged in to reply to this topic.