I just created an vue file in which i used Apollo vue and it shows me nothing

Forums How to solve I just created an vue file in which i used Apollo vue and it shows me nothing

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #9370
    Acenollari
    Participant

    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>

    #9371
    Acenollari
    Participant

    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>

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.