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:

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 {
          first: $pageSize,
          after: $curs
        ) {
          edges {
            node {
//And in the React component:
nextPage () {
    let lastIndex = this.props.viewer.widgets.edges.length - 1
        curs: this.props.viewer.widgets.edges[lastIndex].cursor


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.