Nuxt JS Apollo数据仅在页面刷新后可用

Question

我在Nuxt中使用Apollo获取一些数据。不知何故，当导航到该页面时，我收到错误

Cannot read property 'image' of undefined

当我刷新页面时，一切都按预期工作。

我找到了一些人有类似问题的线程，但没有解决方案似乎适合我：/

这是我的模板文件：

/products/_slug.v UE

<template>
  <section class="container">
    <div class="top">
      <img :src="product.image.url"/>
      <h1>{{ product.name }}</h1>
    </div>
  </section>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    product: {
      query: gql`
        query Product($slug: String!) {
          product(filter: { slug: { eq: $slug } }) {
            slug
            name
            image {
              url
            }
          }
        }
      `,
      prefetch({ route }) {
        return {
          slug: route.params.slug
        }
      },
      variables() {
        return {
          slug: this.$route.params.slug
        }
      }
    }
  }
}
</script>

基本上$ apolloData保持为空，除非我刷新页面。任何想法将不胜感激

编辑更进一步（我认为）。之前，在第一次导航到页面时，所有内容（image.url和name）都是未定义的。

我补充说：

data() {
    return {
      product: []
    };
  }

在导出的顶部，现在至少始终定义名称，因此如果我删除图像，一切都按预期工作。只是image.url一直未定义。

我注意到的一件事（不确定有多相关）是这个问题只发生在使用，如果我使用普通的标签它可以工作，但当然会带走vue魔法。

EDIT-2所以不知何故，如果我将Nuxt降级到版本1.0.0，一切正常

Answer 1

我认为这只是页面加载时间问题。

您应该迭代产品，如果您有多个产品，或者在产品容器上有v-if="product != null"，那么只有在从GraphQL获取数据时才会呈现。

这样，只有在真正获取HTML时才会使用HTML中的对象，并避免从undefined中读取属性。