Laravel Vue.js与GraphQl分页

我第一次在vue.js中使用Graphql，但无法获得分页 工作

vue组件如下所示：

    <template>
        <ApolloQuery :query="require('./breeds.gql')" :variables="{ page }" v-slot="{ result: { loading, error, data }, query }">
            <div v-if="data">
                <div class="flex flex-wrap lg:-m-2" v-if="data.breeds">
                    <breed class="gutter-three-items h-64" :breed="breed" :key="breed.id" v-for="breed in data.breeds"></breed>
                </div>

                <div v-if="data.breeds && !isLoading">
                    <h3 class="text-primary p-2 md:p-0">
                        Geen resultaat
                    </h3>
                </div>

                <div class="flex justify-start w-full">
                    <load-more container="scroll-breeds" :loading="isLoading" @load="page++"> </load-more>
                </div>
            </div>
        </ApolloQuery>
    </template>

<script>
export default {
    data() {
        return {
            page: 1,
        };
    }
</script>

query Breeds($page: Int!) {
    breeds(page: $page) {
        id
        name_nl
        slug_nl
        full_overview_image
        total_posts
        is_activated
        total_dogs
    }
  }

"A datetime string with format `Y-m-d H:i:s`, e.g. `2018-01-01 13:00:00`."
scalar DateTime @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTime")

"A date string with format `Y-m-d`, e.g. `2011-05-23`."
scalar Date @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date")

type Breed {
    id: ID,
    name_nl: String
    slug_nl: String
    full_overview_image: String
    total_posts: String
    is_activated: Boolean
    total_dogs: String
}

type Query {
    breeds: [Breed] @paginate
}

{
   posts(first: 10) {
       data {
           id
           title
       }
       paginatorInfo {
           currentPage
           lastPage
       }
   }
}

但是，当我查看我的网络选项卡时，回答是：

无法在类型BreedPaginator上查询字段id

我在这里做错了什么

对于我的后端，我使用这个

架构如下所示：

    <template>
        <ApolloQuery :query="require('./breeds.gql')" :variables="{ page }" v-slot="{ result: { loading, error, data }, query }">
            <div v-if="data">
                <div class="flex flex-wrap lg:-m-2" v-if="data.breeds">
                    <breed class="gutter-three-items h-64" :breed="breed" :key="breed.id" v-for="breed in data.breeds"></breed>
                </div>

                <div v-if="data.breeds && !isLoading">
                    <h3 class="text-primary p-2 md:p-0">
                        Geen resultaat
                    </h3>
                </div>

                <div class="flex justify-start w-full">
                    <load-more container="scroll-breeds" :loading="isLoading" @load="page++"> </load-more>
                </div>
            </div>
        </ApolloQuery>
    </template>

<script>
export default {
    data() {
        return {
            page: 1,
        };
    }
</script>

query Breeds($page: Int!) {
    breeds(page: $page) {
        id
        name_nl
        slug_nl
        full_overview_image
        total_posts
        is_activated
        total_dogs
    }
  }

"A datetime string with format `Y-m-d H:i:s`, e.g. `2018-01-01 13:00:00`."
scalar DateTime @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTime")

"A date string with format `Y-m-d`, e.g. `2011-05-23`."
scalar Date @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date")

type Breed {
    id: ID,
    name_nl: String
    slug_nl: String
    full_overview_image: String
    total_posts: String
    is_activated: Boolean
    total_dogs: String
}

type Query {
    breeds: [Breed] @paginate
}

{
   posts(first: 10) {
       data {
           id
           title
       }
       paginatorInfo {
           currentPage
           lastPage
       }
   }
}

请帮帮我

通过使用@paginate指令，可以将字段类型转换为特定于原始字段类型的分页器类型。下文对此进行了解释：

此指令用于根查询字段：

type Query {
   posts: [Post!]! @paginate
}

架构定义将自动转换为：

type Query {
   posts(first: Int!, page: Int): PostPaginator
}

"A paginated list of Post items."
type PostPaginator {
   "A list of Post items."
   data: [Post!]!

   "Pagination information about the list of items."
   paginatorInfo: PaginatorInfo!
}

可以这样查询：

    <template>
        <ApolloQuery :query="require('./breeds.gql')" :variables="{ page }" v-slot="{ result: { loading, error, data }, query }">
            <div v-if="data">
                <div class="flex flex-wrap lg:-m-2" v-if="data.breeds">
                    <breed class="gutter-three-items h-64" :breed="breed" :key="breed.id" v-for="breed in data.breeds"></breed>
                </div>

                <div v-if="data.breeds && !isLoading">
                    <h3 class="text-primary p-2 md:p-0">
                        Geen resultaat
                    </h3>
                </div>

                <div class="flex justify-start w-full">
                    <load-more container="scroll-breeds" :loading="isLoading" @load="page++"> </load-more>
                </div>
            </div>
        </ApolloQuery>
    </template>

<script>
export default {
    data() {
        return {
            page: 1,
        };
    }
</script>

query Breeds($page: Int!) {
    breeds(page: $page) {
        id
        name_nl
        slug_nl
        full_overview_image
        total_posts
        is_activated
        total_dogs
    }
  }

"A datetime string with format `Y-m-d H:i:s`, e.g. `2018-01-01 13:00:00`."
scalar DateTime @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTime")

"A date string with format `Y-m-d`, e.g. `2011-05-23`."
scalar Date @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date")

type Breed {
    id: ID,
    name_nl: String
    slug_nl: String
    full_overview_image: String
    total_posts: String
    is_activated: Boolean
    total_dogs: String
}

type Query {
    breeds: [Breed] @paginate
}

{
   posts(first: 10) {
       data {
           id
           title
       }
       paginatorInfo {
           currentPage
           lastPage
       }
   }
}

---

嗨，丹尼尔，谢谢，我已经在文档中看到了，但是我仍然不知道为什么我的代码不起作用。因为你没有正确地查询你的模式。通过应用该指令，品种现在只有两个字段-数据和paginatorInfo。您试图查询的id等字段现在将位于数据下，如上面的示例所示。在前端代码中使用查询之前，您应该将查询写入GraphQL、GraphiQL、Altair或其他类似工具中。