Apollo-module: Apollo data is only available after the page is refreshed

[Teeoo]

apollo: {
    ArticlebyID: {
      query: gql`
        query($id: Int) {
          ArticlebyID(id: $id) {
            id
            title
            slug
            text
            html
            order
            cover
            summary
            category {
              label
            }
          }
        }
      `,
      prefetch: true,
      fetchPolicy: 'cache-and-network',
      update(data) {
        return data.getQuotationWithRepliesRanked
      },
      variables() {
        return {
          id: Number.parseInt(this.$route.params.id)
        }
      }
    }
  }

When I add category { Label } The page needs to be refreshed, otherwise it is Cannot read property 'label' of undefined. Why is this?

_{This question is available on Nuxt community (#c199)}

[cmty[bot]]

This issue as been imported as question since it does not respect apollo-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/apollo-module/issues/c199.

[kieusonlam]

On the server side, it will wait for the data before rendering. But on client side, doesn't like nuxt asyncData or fetch (load before changing the route), vue-apollo start loading after the route is changed. Therefore you should check for the loading status before you using the data.

There are couple of way to do that. For example you can use the loadingKey property in smart query. Read more on this document https://vue-apollo.netlify.com/api/smart-query.html#options

[Teeoo]

On the server side, it will wait for the data before rendering. But on client side, doesn't like nuxt asyncData or fetch (loading before changing the route), vue-apollo is loading after the route is changed. Therefore you should check for the loading status before you using the data.

There are couple of way to do that. For example you can use the loadingKey property in smart query. Read more on this document https://vue-apollo.netlify.com/api/smart-query.html#options

thank

[abhip167]

On the server side, it will wait for the data before rendering. But on client side, doesn't like nuxt asyncData or fetch (load before changing the route), vue-apollo start loading after the route is changed. Therefore you should check for the loading status before you using the data.

There are couple of way to do that. For example you can use the loadingKey property in smart query. Read more on this document https://vue-apollo.netlify.com/api/smart-query.html#options

Add v-if="!this.$apollo.queries.restaurant.loading on the component you want to load the data.
It worked for me.