Strapi Graphql and Nuxt

Viewed 19

This is driving me nuts as should be easy

I have in nuxt

<template>
<div>
<!-- Events are displayed here -->
    <div 
        v-for='organisation in organisations' 
        :key='organisation.id' 
    >
       test {{ organisation }}
    </div>
</div>
</template>
<script>
import gql from "graphql-tag";

export default {
   data() {
        return {
            organisations: {
                data: [],
            },
        };
    },
  apollo: {
    organisations: gql`
      query organisations {
        organisations {
            data {
            attributes {
                name
            }
            id
            }
        }
    }`
  }
};
</script>

this returns

    { "data": [ { "id": "1", "attributes": { "name": "Organisation 1", "__typename": "Organisation" }, "__typename": "OrganisationEntity" }, { "id": "2", "attributes": { "name": "test2", "__typename": "Organisation" }, "__typename": "OrganisationEntity" }, { "id": "3", "attributes": { "name": "test3", "__typename": "Organisation" }, "__typename": "OrganisationEntity" } ], "__typename": "OrganisationEntityResponseCollection" }
{ "data": [ { "id": "1", "attributes": { "name": "Organisation 1", "__typename": "Organisation" }, "__typename": "OrganisationEntity" }, { "id": "2", "attributes": { "name": "test2", "__typename": "Organisation" }, "__typename": "OrganisationEntity" }, { "id": "3", "attributes": { "name": "test3", "__typename": "Organisation" }, "__typename": "OrganisationEntity" } ], "__typename": "OrganisationEntityResponseCollection" }

so far so good

now if i try

{{ organisation.name }} 

I get no results

I tried changing my v-for to

v-for='organisation in organisations.data'

and

{{ organisation.name }}

the original high level query still works adding .name returns no results but no error.

{{ organisation.attributes.name }} 

generates an error

TypeError: Cannot read properties of undefined (reading 'name')
at eval (organisations.vue?1a5e:7:1)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2001:1)
at Proxy.render (organisations.vue?1a5e:4:1)
at Vue._render (vue.runtime.esm.js?2b0e:2654:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:3833:1)
at Watcher.get (vue.runtime.esm.js?2b0e:3415:1)
at Watcher.run (vue.runtime.esm.js?2b0e:3491:1)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4090:1)
at Array.eval (vue.runtime.esm.js?2b0e:3113:1)
at flushCallbacks (vue.runtime.esm.js?2b0e:3035:1)
0 Answers
Related