v-for in b-nav-item not rendering

Question

This is quite weird but simple :

I have a navbar b-nav from bootstrap-vue in which I want to populate dynamic b-nav-items. The template of my vuejs component looks as follow :

<template>
  <b-nav vertical class="px-2">
    <b-nav-item
      v-for="application in applications"
      :key="application.id"
      to="#">
      {{ application.verboseName }}
    </b-nav-item>
    <b-nav-item :to="{ name: 'BaseSettings' }">
      <font-awesome-icon :icon="['fas', 'cogs']" class="fa-fw mr-1"/>
      Settings
    </b-nav-item>
  </b-nav>
</template>

The second b-nav-item is static but the first one should be populated dynamically with applications which I retrieve like this in my component :

<script>
  // ...
  apollo: { applications: INSTALLED_APPLICATIONS_QUERY },
  // ...
</script>

The problem is that it doesn't work at all. I've already done other lists populated with graphql retrieved content in other components and it works fine. Furthermore when I try to give some local data to test it :

data () {
  return {
    apps: [ // used for tests
      { id: '1', verboseName: 'Test1' },
      { id: '2', verboseName: 'Test2' },
      { id: '3', verboseName: 'Test3' },
      { id: '4', verboseName: 'Test4' }
    ]
  }
}

<b-nav vertical class="px-2">
  <b-nav-item
    v-for="application in apps"
    :key="application.id"
    to="#">
    {{ application.verboseName }}
  </b-nav-item>
  ...
</b-nav>

It works perfectly... And when I try my graphql query on the /graphql interface of my application, it returns desired data correctly too. I admit this time I don't know where to look at ..

With the graphql query that I call in my component with `apollo: { applications: INSTALLED_APPLICATIONS_QUERY }` — lbris, Feb 05 '20 at 08:11

lbris · Accepted Answer · 2021-12-23T08:25:50.500

Ok I suddenly had some kind of illumination after several hours and I noticed something I wasn't aware of :

When populating data with apollo, the variable in which we put the data has to wear the name of the query that is called underneath.

So I was trying to do : apollo: { applications: INSTALLED_APPLICATIONS_QUERY } while my query is :

const INSTALLED_APPLICATIONS_QUERY = gql`
  query {
    installedApplications {
      id
      verboseName
    }
  }
`

so what I HAD to do is apollo: { installedApplications: INSTALLED_APPLICATIONS_QUERY }. I wasn't aware of this and it's pretty funny that in all my others components I did it unconsciously.

v-for in b-nav-item not rendering

1 Answers1