Fresh Nuxt 3 App: GraphQL data doesnt render

Question

I'm trying to make a Nuxt 3 App which requests data on a local WordPress installation (WPGraphQL)

The object itself does render but when I'm trying to access the nested data in the products object nothing renders

// page/products/index.vue
<template>
  <div v-if="pending === false" >
    <h1>Products</h1>
    <!-- This doesnt render -->
    <v-card v-for="product in products?.nodes" :key="product.databaseId">
      <v-card-text>
        <v-img :src="product.image.sourceUrl">
  
        </v-img>
        {{ product.name }}
      </v-card-text>
      <v-card-actions>
  
      </v-card-actions>
    </v-card>
    <div v-for="product in products?.nodes" :key="product.databaseId">
        <img :src="product.image.sourceUrl" />
        {{ product.name }}
    </div>
    {{ products }} <!-- This renders perfectly the whole object -->
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import FETCH_ALL_PRODUCTS from '@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql'
import products from '@/types/products'

export default defineComponent({
  name: 'products',
  async setup(){
    debugger
    const productVariables = { limit: 99 };
    const result = useAsyncQuery<products>(FETCH_ALL_PRODUCTS, productVariables);
    await result.execute();
    const products = ref(result.data.value);
    const error = ref(result.error);
    const pending = ref(result.pending);
    return {
      products,
      error,
      pending,
    }
  },
  apollo: {},
  async mounted() {
  }

})
</script>
<style scoped>
</style>

// package.json
{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/apollo": "^5.0.0-alpha.5",
    "nuxt": "3.2.0"
  },
  "dependencies": {
    "@mdi/font": "^7.1.96",
    "apollo-boost": "^0.4.9",
    "graphql": "^15.8.0",
    "sass": "^1.58.0",
    "vue-apollo": "^3.1.0",
    "vuetify": "^3.1.4"
  }
}

The data does appear in the console logs and in the vue devtools

It's the first time that I'm trying to fetch data with GraphQL and especially with WordPress heedlessly If something is unclear please feel free to ask

I was expecting that the v-card elements are rendered with the nested data

Fresh Nuxt 3 App: GraphQL data doesnt render

0 Answers0