Page layout: how to initialize the value after?

Question

So, based on this comment, I was able to crack a simple “pagination” component / container: https://github.com/facebook/graphql/issues/4#issuecomment-118162627

I say hack because that’s exactly what I did.

I got it to work by looking at the edge cursors in the /graphql in my browser. The problem is .. how do I do this work for the first "page" of elements when I don't have a "previous request" to work?

I tried to leave after as undefined in my request, but I received only the following error:

Inactive invariant violation: callsFromGraphQL (): the declared value of the variable is expected, $ curs.

It seems that if you define first and after in your container fragment, then these are the required parameters. But I have no value for after , since in the world is it worth initializing this?

In this example, the error above is thrown:

 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 1

Good question. Relay should specify a default value for all variables. If the value is unknown, you can use null : in this case, it means specifying curs: null in initialVariables . We require explicit null to ensure that the developers have not forgotten to specify a value.