问题描述: 在使用 Apollo GraphQL 进行分页时,分页功能无效,无法正确限制返回结果的数量。
解决方法:
type PageInfo {
hasNextPage: Boolean!
hasPreviousPage: Boolean!
startCursor: String
endCursor: String
}
type User {
id: ID!
name: String!
...
}
type UserConnection {
edges: [UserEdge]
pageInfo: PageInfo!
}
type UserEdge {
cursor: String!
node: User!
}
type Query {
getUsers(first: Int, after: String): UserConnection!
}
getUsers
resolver 中,根据传入的 first
和 after
参数,正确限制返回的用户数量,并根据查询结果生成正确的 pageInfo 和 edges。const resolvers = {
Query: {
getUsers: (_, { first, after }) => {
// 根据 first 和 after 参数限制返回的用户数量
// 根据查询结果生成 pageInfo 和 edges
// 返回 UserConnection 对象
},
},
};
first
参数来限制返回的用户数量,同时可以使用 after
参数来实现分页功能。import { gql } from 'apollo-boost';
import { useQuery } from '@apollo/react-hooks';
const GET_USERS = gql`
query GetUsers($first: Int, $after: String) {
getUsers(first: $first, after: $after) {
edges {
cursor
node {
id
name
...
}
}
pageInfo {
hasNextPage
hasPreviousPage
startCursor
endCursor
}
}
}
`;
const MyComponent = () => {
const { data, loading, error } = useQuery(GET_USERS, {
variables: {
first: 10, // 限制返回的用户数量为 10
after: '', // 根据需求传入正确的 after 参数
},
});
// 处理查询结果
};
通过以上步骤,可以正确设置 Apollo GraphQL 的分页功能,并限制返回结果的数量。