CODEWITHSUNDEEP
javascriptpaginationgraphqlrelayjs
jackncoke
jackncoke

Reputation: 2020

Relay pagination(Not infinite scroll)

I am trying to code pagination without infinite scroll. I want to be able to click on a page number and update the before and after cursors accordingly. When the cursor of the last record on that page. I am not sure if this is the best way to go about this. First time with relay. I am not sure how i can i change my container dynamically based on conditionals. Sometimes i wont have a after or a before. I was passing empty strings but relay complains about that where graphql query tool does not. 

1] Warning: GraphQLRange cannot find a segment that has the cursor:
[1] GraphQLRange cannot find a segment that has the cursor:

export default Relay.createContainer(Search,{
  initialVariables: {
    pageSize: 20,
    lastRecord:""

  },
  fragments: {
    Viewer: () => Relay.QL`
      fragment on Viewer {
          User_Email,
     Books (first: $pageSize, after: $lastRecord) {
              totalCount
              pageInfo {
                hasNextPage
                hasPreviousPage
                startCursor,
                endCursor
              }
              edges{
              cursor,
              node{
                  Title,

                  id,
                  Pub_Date,

                }
              }
            }
      }
    `
  }
});

Is this a good approach? Has anyone else trying to do this. Every article you read on pagination for relay is infinite scroll.

Upvotes: 3

Views: 585

Answers (1)

Mike Antoniadis
Mike Antoniadis

Reputation: 677

To avoid this error, set the lastRecord variable as null instead of an empty string.

    initialVariables: {
      pageSize: 20,
      lastRecord:null
    }

Upvotes: 1

Related Questions