No data shown on frontend

[bastianhilton]

Environment

Nuxt 3 "latest" Windows 11 @nuxtjs/apollo

Describe the bug

I'm able to see that the data is coming through in the Dev Console however nothing is showing on the frontend no matter what graphql endpoint I use.

Expected behaviour

Data to be shown on the frontend.

<template>
    <div>
        <v-expansion-panels variant="accordion">
            <v-expansion-panel title="Departments" expand-icon="fas fa-plus" collapse-icon="fas fa-minus" elevation="0">
                <v-expansion-panel-text>
                    <div v-for="departments in departments" :key="departments.id">
                        <v-list-item :title="departments.name" :value="departments.name"
                            :href="`/departments/${departments.id}`">
                        </v-list-item>
                    </div>
                </v-expansion-panel-text>
            </v-expansion-panel>
        </v-expansion-panels>
    </div>
</template>

<script>
    export default {

    }
</script>

<script setup>
const query = gql`
  query Departments {
    departments {
        data {
        attributes {
            Name
        }
        id
        }
  }
  }
`
const { data: departments } = await useAsyncQuery(query)
</script>

Reproduction

Install nuxt Install @nuxtjs/apollo module within a .vue page, add details as seen above.

in my nuxt.config.js file:

modules: ['@nuxtjs/apollo',]

apollo: {
    clients: {
      default: {
        httpEndpoint: process.env.GQL_HOST,
      },
    },
  },

Additional context

No response

Logs

No response

[bastianhilton]

So I found the issue to my problem:

Basically my v-for statement wasn't correct

I just had v-for "departments in departments" :key="departments.id"

it should read v-for="departments in data.departments.data" :key="departments.id"

Because my query is this:

query {
      departments {
        data {
            id 
            attributes {
                Name
            }
        }
    }

I'm using Strapi + Strapi's Graphql Plugin btw