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

Question

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

Cannot read property 'image' of undefined

当我刷新页面时，一切正常。

我发现一些人有类似问题，但似乎没有解决方案适合我：/

这是我现在的模板文件：

/products/_slug.vue

<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 和名称）都将是未定义的。

我补充说：

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

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

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

EDIT-2 因此，如果我将 Nuxt 降级到 1.0.0 版本，一切都会正常

Answer 1

我也偶然发现了这个问题，发现它隐藏在 Vue Apollo 文档中。

虽然与OP的回复非常相似，但似乎官方的方式是使用“$loadingKey”属性。

文档中的内容非常混乱，因为发生了很多事情。 https://vue-apollo.netlify.com/guide/apollo/queries.html#loading-state

<template>
  <main
    v-if="!loading"
    class="my-8 mb-4"
  >
    <div class="w-3/4 mx-auto mb-16">
      <h2 class="mx-auto text-4xl text-center heading-underline">
        {{ page.title }}
      </h2>
      <div
        class="content"
        v-html="page.content.html"
      ></div>
    </div>
  </main>
</template>
    
<script>
import { page } from "~/graphql/page";
    
export default {
  name: 'AboutPage',

  data: () => ({
    loading: 0
  }),
    
  apollo: {
    $loadingKey: 'loading',
    page: {
      query: page,
      variables: {
        slug: "about"
      }
    },
  }
}
</script>

如果您需要在 vue 中使用响应式属性，例如 slug，您可以使用以下方法。

<template>
  <main
    v-if="!loading"
    class="my-8 mb-4"
  >
    <div class="w-3/4 mx-auto mb-16">
      <h2 class="mx-auto text-4xl text-center heading-underline">
        {{ page.title }}
      </h2>
      <div
        class="content"
        v-html="page.content.html"
      ></div>
    </div>
  </main>
</template>
    
<script>
import { page } from "~/graphql/page";
    
export default {
  name: 'AboutPage',
    
  data: () => ({
    loading: 0
  }),
    
  apollo: {
    $loadingKey: 'loading',
    page: {
      query: page,
      variables() {
        return {
          slug: this.$route.params.slug
        }
      }
    },
  }
}
</script>

Answer 2

要解决此问题，请将 v-if="!$apollo.loading" 添加到您打算在其中使用响应式道具的 HTML 容器中。

Answer 3

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

如果您有多个产品，您应该迭代产品，或者在产品容器上使用 v-if="product != null"，这将仅在从 GraphQL 获取数据后呈现。

这样，您将仅在真正获取 HTML 时在 HTML 中使用该对象，并避免读取未定义的属性。