Vuejs + vue-apollo повторные запросы graphql не отображаются при просмотре

Question

Я следую руководству YouTube по vuejs, использующему laravel в качестве сервера graphql и vue-apollo для внешнего интерфейса, и я застрял в одном моменте, который, как мне кажется, может сработать, у репетитора на видео естьта же проблема, но это не остановило его демо-версию, но для меня это так.

Демо-версия отображает список книг, книги разделены по категориям, есть также некоторые книги, помеченные (булевы) как "избранные"".

На первой странице загрузки показаны все книги (это работает нормально).

В верхней части страницы есть меню для отображения" книг по категориям "," все "книга и "избранные" книги.

"Книги по категориям" работают, возвращая только книги в выбранной категории.Но ссылка «все» и «избранные» книги возвращают «Ошибка типа: невозможно прочитать свойство« книги »с неопределенным значением».

Я удалил страницу и проверил ссылки «все» и «избранные», и ониделать работу, и когда у меня есть полная страница, данные возвращаются, я вижу это в консоли.

Я новичок в vuejs, так что это может быть что-то простое, но я просто не могу видеть это!

<template>
<div class="hello">
    <ApolloQuery :query="query">
    <template slot-scope="{ result: { data, loading }, isLoading }">
        <div v-if="isLoading">Loading...</div>
        <div v-else>
            <a href="#"  @click="selectCategory('all')"  class="link-margin">All</a>
            <a href="#"  @click.prevent="selectCategory('featured')"  class="link-margin">Featured</a>
            <a href="#" v-for="category of data.categories" :key="category.id" @click.prevent="selectCategory(category.id)"  class="link-margin">
        {{ category.name }}. {{ category.id }}
      </a>
        </div>
    </template>
</ApolloQuery>
<div v-if="selectedCategory === 'all'">
    debug all
    <ApolloQuery :query="query">
        <template slot-scope="{ result: { data, loading }, isLoading }">
            <div v-if="isLoading">Loading...</div>
            <div v-else>
                <div v-for="book1 of data.books" :key="book1.id">
                    <router-link :to="`/books/${book1.id}`"> {{ book1.id }} : {{ book1.title }} </router-link>
                    <div> {{ book1.author }}</div>
                    <img :src="book1.image" alt="cover image">
            </div>
                </div>
        </template>
    </ApolloQuery>
</div>

<div v-else-if="selectedCategory === 'featured'">
    debug featured
    <ApolloQuery :query="booksFeaturedQuery" :variables="{ featured: true }">
        <template slot-scope="{ result: { data, loading }, isLoading }">

            <div v-if="isLoading">Loading...</div>
            <div v-else>
                <div v-for="bookf of data.booksByFeatured" :key="bookf.id">
                    <router-link :to="`/books/${bookf.id}`"> {{ bookf.id }} : {{ bookf.title }} </router-link>
                    <div> {{ bookf.author }}</div>
                    <img :src="bookf.image" alt="cover image">
            </div>
                </div>
        </template>
    </ApolloQuery>
</div>
<div v-else>
    <ApolloQuery :query="query" :variables="{ id: selectedCategory }">
       debug not all
        <template slot-scope="{ result: { data, loading }, isLoading }">
            <div v-if="isLoading">Loading...</div>
            <div v-else>
                <div v-for="book of data.category.books" :key="book.id">
                    <router-link :to="`/books/${book.id}`"> {{ book.id }} : {{ book.title }} </router-link>
                    <div> {{ book.author }}</div>
                    <img :src="book.image" alt="cover image">
                </div>
            </div>
        </template>
    </ApolloQuery>
</div>
    </div>
</template>

<script>
import categoryQuery from '@/graphql/queries/Category.gql'
import categoriesQuery from '@/graphql/queries/Categories.gql'
import booksQuery from '@/graphql/queries/Books.gql'
import booksFeaturedQuery from '@/graphql/queries/BooksFeatured.gql'

export default {
    name: 'app',
    components: {
},
data() {
    return {
        selectedCategory: 'all',
        query: booksQuery,
        categoryQuery,
        categoriesQuery,
        booksQuery,
        booksFeaturedQuery
    }
},
methods: {
    selectCategory(category) {
        if (category === 'all') {
            this.query = booksQuery
        } else if (category === 'featured') {
            this.query = booksFeaturedQuery
        } else {
            this.query = categoryQuery
        }
        this.selectedCategory = category
    }
}
}
</script>