Relay Pagination: How to initialize "after" value?
So based on this comment here, I've been able to hack together a simple "paginating" component/container: https://github.com/facebook/graphql/issues/4#issuecomment-118162627
I say "hack" because that's just what I did.
I got it to work by taking a look at the edge cursors on the /graphql
response in my browser. Problem is.. how do I make this work for the first "page" of items, when I have no "prior query" to work from?
I tried leaving after
as undefined
in my query, but I only got the following error:
Uncaught Invariant Violation: callsFromGraphQL(): Expected a declared value for variable, $curs.
It seems, if you define first
and after
in your container's fragment, then they're required parameters. But I have no value for after
, so how in the world does one go about initializing this?
This example throws the error above:
export default Relay.createContainer(Widgets2, {
initialVariables: {
pageSize: 2
},
fragments: {
viewer: () => Relay.QL`
fragment on User {
widgets(
first: $pageSize,
after: $curs
) {
edges {
cursor,
node {
id,
name,
},
},
},
}
`,
},
});
//And in the React component:
nextPage () {
let lastIndex = this.props.viewer.widgets.edges.length - 1
this.props.relay.setVariables({
curs: this.props.viewer.widgets.edges[lastIndex].cursor
})
}
Answer
Good question. In Relay, a default value must be provided for all variables. If the value isn't known you can use null
: in this case that would mean specifying curs: null
in initialVariables
. We require an explicit null
to help ensure that developers haven't forgotten to specify a value.
Related Questions
- → Laravel - input request handling for global pagination
- → Laravel 5.0 URL change for pagination
- → Relay Pagination: How to initialize "after" value?
- → Adding data to Paginated Results
- → Kaminari How to process routes as javascript
- → Get last activated data after clicked on button by jquery
- → Javascript pagination and SEO
- → How to force Restangular's getList to work with Laravel 5's pagination object?
- → How do I loop through all the products of a store using Liquid (Shopify)?
- → seo url rewrite rule - make last parameter optional
- → How to add pagination in a list on a frontend view?
- → infinite scroll with pagination demo
- → how to create pagination links from json data in laravel blade