我第一次在 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>
品种.gql 看起来像这样:
query Breeds($page: Int!) {
breeds(page: $page) {
id
name_nl
slug_nl
full_overview_image
total_posts
is_activated
total_dogs
}
}
但是,当我查看我的网络选项卡时,响应是这样的:
无法在类型“BreedPaginator”上查询字段“id”
我在这里做错了什么?
对于我的后端,我使用这个https://github.com/nuwave/lighthouse。
架构如下所示:
"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
}
请帮帮我!