Данные Nuxt JS Apollo доступны только после обновления страницы - PullRequest
Новая
       44

Данные Nuxt JS Apollo доступны только после обновления страницы

1 голос
/ 18 марта 2019

Я получаю некоторые данные, используя Apollo внутри Nuxt. Почему-то при переходе на эту страницу я получаю ошибку 

Cannot read property 'image' of undefined

Когда я обновляю страницу, все работает как положено.

Я нашел несколько тем людей, имеющих похожие проблемы, но мне кажется, что решение не работает: /

Это мой шаблонный файл прямо сейчас:

/ продукты / _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 остается пустым, если я не обновлю страницу. Любые идеи будут высоко ценится

EDIT Подошёл на шаг ближе (я думаю). Раньше все (image.url и name) было бы неопределенным при первом переходе на страницу.

Я добавил: 

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

в верхней части моего экспорта, и теперь, по крайней мере, имя всегда определено, поэтому, если я удаляю изображение, все работает как положено. Просто image.url остается неопределенным.

Одна вещь, которую я заметил (не уверен, насколько она актуальна), заключается в том, что эта проблема возникает только при использовании тега: если я использую обычный тег, он работает, но, конечно, убирает магию vue.

EDIT-2 Так или иначе, если я понижаю версию Nuxt до версии 1.0.0, все работает отлично

1 Ответ

1 голос
/ 19 марта 2019

Я думаю, что это только проблема синхронизации загрузки страницы.

Вам следует либо выполнить итерации по продуктам, если у вас их более одного, либо указать v-if="product != null" в контейнере продукта, который будет отображаться только после извлечения данных из GraphQL.

Таким образом, вы будете использовать объект в своем HTML только тогда, когда он действительно выбран, и избегать чтения свойств из неопределенного.

...