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

数据仅在页面刷新后可用

关注

发信

关注(28)粉丝(399)

本文介绍了Nuxt JS Apollo 数据仅在页面刷新后可用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

无法读取未定义的属性图像"

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

我发现一些人有类似问题，但似乎没有解决方案对我有用:/

这是我现在的模板文件:

/products/_slug.vue

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

</节></模板><脚本>从'graphql-tag'导入gql导出默认{阿波罗:{产品: {查询:gql`查询产品($slug:字符串！){产品(过滤器:{ slug:{ eq:$slug } }){蛞蝓姓名图片 {网址}}}`，预取({路线}){返回 {slug: route.params.slug}},变量(){返回 {slug: this.$route.params.slug}}}}}

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

编辑更近了一步(我认为).以前，当第一次导航到页面时，所有内容(image.url 和 name)都是未定义的.

我补充说:

data() {返回 {产品: []};}

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

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

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

解决方案

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

虽然与 OP 的回复非常相似，但似乎官方的方法是使用$loadingKey"；财产.

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

<主要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">{{ 页面标题 }}</main><脚本>从~/graphql/page"导入{页面}；导出默认{name: '关于页面',数据:() =>({加载:0}),阿波罗:{$loadingKey: '加载',页: {查询:页面，变量:{slug:大约"}},}}

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

<主要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">{{ 页面标题 }}</main><脚本>从~/graphql/page"导入{页面}；导出默认{name: '关于页面',数据:() =>({加载:0}),阿波罗:{$loadingKey: '加载',页: {查询:页面，变量(){返回 {slug: this.$route.params.slug}}},}}

I am fetching some data using Apollo inside of Nuxt. Somehow, when navigating to that page I get an error of

Cannot read property 'image' of undefined

When I refresh the page, everything works as expected.

I have a found a few threads of people having similar issues but no solution seems to work for me :/

This is my template file right now:

/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>

Basically the $apolloData stays empty unless I refresh the page. Any ideas would be much appreciated

EDITGot one step closer (I think). Before, everything (image.url and name) would be undefined when navigating to the page for the first time.

I added:

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

at the top of my export and now at least the name is always defined so if I remove the image, everything works as expected. Just the image.url keeps being undefined.

One thing I noticed (not sure how relevant) is that this issue only occurs using the , if I use a normal a tag it works but of course takes away the vue magic.

EDIT-2So somehow if I downgrade Nuxt to version 1.0.0 everything works fine

解决方案

I stumbled on this issue as well, and found it hidden in the Vue Apollo documents.

Although quite similar to the OP's reply, it appears the official way is to use the "$loadingKey" property.

It's quite confusing in the documents because there are so many things going on.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>

If you need to use a reactive property within vue such as a slug, you can do so with the following.

<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>

这篇关于Nuxt JS Apollo 数据仅在页面刷新后可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 14:02