假设有一个名为“GET_ITEMS”的查询,需要分别基于不同过滤器(例如“category”和“status”)分页。
首先,在客户端中修改查询,增加对应的过滤器参数:
const GET_ITEMS = gql`
query getItems($category: String!, $status: String!, $limit: Int!, $offset: Int!) {
items(category: $category, status: $status, limit: $limit, offset: $offset) {
id
name
...
}
}
`
然后,创建高阶组件来根据所需的查询变量构建查询:
import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { GET_ITEMS } from './queries'
const withPaginatedItems = (WrappedComponent) => {
class PaginatedItems extends Component {
constructor(props) {
super(props)
this.state = {
limit: 10,
offset: 0,
category: null,
status: null
}
}
fetchMoreItems = () => {
this.props.fetchMore({
variables: {
limit: this.state.limit,
offset: this.state.offset,
category: this.state.category,
status: this.state.status
},
updateQuery: (prevResult, { fetchMoreResult }) => {
if (!fetchMoreResult) { return prevResult }
return {
items: [
...prevResult.items,
...fetchMoreResult.items
]
}
}
})
this.setState(prevState => ({ offset: prevState.offset + prevState.limit }))
}
updateFilters = (category, status) => {
this.props.refetch({ category, status })
this.setState({
category,
status,
offset: 0
})
}
render() {
return (
)
}
}
return graphql(GET_ITEMS, {
options: ({ limit