我在我的一个项目中使用了这个很好的apollo-universal-starter-kit。我有一项任务是向this page添加过滤选项,以过滤包含2条以上评论的帖子。
入门套件使用Apollo graphql-server作为后端。帖子的架构描述如下所示:
# Post
type Post {
id: Int!
title: String!
content: String!
comments: [Comment]
}
# Comment
type Comment {
id: Int!
content: String!
}
# Edges for PostsQuery
type PostEdges {
node: Post
cursor: Int
}
# PageInfo for PostsQuery
type PostPageInfo {
endCursor: Int
hasNextPage: Boolean
}
# Posts relay-style pagination query
type PostsQuery {
totalCount: Int
edges: [PostEdges]
pageInfo: PostPageInfo
}
extend type Query {
# Posts pagination query
postsQuery(limit: Int, after: Int): PostsQuery
# Post
post(id: Int!): Post
}
postsQuery
用于生成帖子的分页结果
以下是postsQuery
解析的方式(完整代码here)
async postsQuery(obj, { limit, after }, context) {
let edgesArray = [];
let posts = await context.Post.getPostsPagination(limit, after);
posts.map(post => {
edgesArray.push({
cursor: post.id,
node: {
id: post.id,
title: post.title,
content: post.content,
}
});
});
let endCursor = edgesArray.length > 0 ? edgesArray[edgesArray.length - 1].cursor : 0;
let values = await Promise.all([context.Post.getTotal(), context.Post.getNextPageFlag(endCursor)]);
return {
totalCount: values[0].count,
edges: edgesArray,
pageInfo: {
endCursor: endCursor,
hasNextPage: values[1].count > 0
}
};
}
并且,这是一个graphql查询,在前端使用React post_list
组件(组件的完整代码为here)
query getPosts($limit: Int!, $after: ID) {
postsQuery(limit: $limit, after: $after) {
totalCount
edges {
cursor
node {
... PostInfo
}
}
pageInfo {
endCursor
hasNextPage
}
}
}
这是一个很长的介绍:-),抱歉
问题:
如何向post_list
组件/页面添加过滤选项?我有点理解问题的React方面,但我不理解graphql。我应该向postsQuery(limit: $limit, after: $after)
添加新变量,使其看起来像postsQuery(limit: $limit, after: $after, numberOfComments: $numberOfComments)
吗?然后以某种方式在后端解决它?或者,我走错了路,应该从不同的方向思考?如果是这样,你能指出我正确的方向吗? : - )
提前谢谢!
答案 0 :(得分:0)
IMO我肯定会在后端解决这个问题。至于它是否应该是一个新的变量,我个人会说是的,你的Post.getPostsPagination可以更新,以支持过滤注释计数,理想情况下,你希望它作为数据库请求的一部分,以便你知道你是获得你想要的N种类型的帖子,否则它将为你的分页打开边门。
另一个选项是CuratedPosts或FilteredPosts的新查询,或任何您想要调用它的已经根据注释数量过滤的内容。