如何解决尝试使用 nuxt、apollo 和 wp-graphql 对组件进行分页时出现不可迭代的实例错误
我在这个项目中使用了 nuxt、wordpress graphql 和 apollo。我正在尝试在我的 CategoryProps.vue 文件中编写一个 Show More 按钮。我有一个 weight-loss.vue 页面,它将类别传递给 CategoryProps.vue 组件内的 apollo 查询变量“$category”。
从一开始就自动显示三个帖子,点击“显示更多”按钮将呈现另外 3 个帖子。
我不断收到“传播不可迭代实例的无效尝试。为了可迭代,非数组对象必须具有 Symbol.iterator 方法”错误。
/CategoryProps.vue
export default {
props: {
chosenCategory: {
type: String,default: ''
}
},data() {
return {
category: [],postQuantity: 3,showMoreEnabled: true
}
},apollo: {
category: {
prefetch: true,query: ArticlesByCategoryQuery,variables() {
return {
category: this.chosenCategory,first: this.postQuantity,after: null
}
}
}
},methods: {
showMore() {
this.$apollo.queries.category.fetchMore({
variables: {
first: this.postQuantity,after: null
},updateQuery: (existing,{ fetchMoreResult }) => {
if (!fetchMoreResult) return existing
const hasMore = fetchMoreResult.category.posts.pageInfo.hasNextPage
this.showMoreEnabled = hasMore
console.log(fetchMoreResult.category.posts.pageInfo.endCursor)
console.log(existing.category.__typename)
return {
...existing,category: {
...existing.category,// Update the cursor
after: fetchMoreResult.category.posts.pageInfo.endCursor,// Combine incoming posts to existing posts
posts: [
...existing.category.posts,...fetchMoreResult.category.posts
],hasMore
}
}
}
})
}
}
}
</script>
/myquery.gql
query MyQuery($category: ID!,$first: Int!,$after: String) {
category(id: $category,idType: NAME) {
posts(first: $first,after: $after) {
edges {
cursor
node {
slug
id
title
featuredImage {
node {
sourceUrl
altText
}
}
}
}
pageInfo {
endCursor
hasNextPage
}
}
name
id
}
}
//weight-loss.vue
<CategoryProps chosenCategory="Weight Loss" />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。