Comments: Effortless Pagination with GraphQL and Relay? Really!

[mzikherman]

It's the year 2020. You use a modern front-end stack of Relay, GraphQL, React and TypeScript. You can build an infinite scroll 'feed' type UI totally out of the box with these tools, by mostly putting together boilerplate (proper connections, along with a pagination container). You have a design system, and are rapidly building up a component library. Things are great!

Then you take a look at the latest design comps for a 'browse' type page, and you see that the controversial infinite scroll has been replaced by a more traditional pagination bar.

---

Comment thread for windowed pagination post!

[terrisgit]

It's the year 2021. Does relay-hooks change anything?

[ashfurrow]

@terrisgit it only changes some client-side implementation code. The fundamentals remain unchanged imo.

[andre-krueger]

How do you deal with these types of errors? Unexpected after cursor `THE_CURSOR`, edges must be fetched from the end of the list At least react-relay (using the usePaginationFragment hook) doesn't allow choosing an after cursor that is different from the endCursor, so how could one implement the skipping of pages?

[litewarp]

I got it to work by adding "after" as an argument to the filters option which causes it to refetch the entire query with the after arg.

fragment Example_query on Query 
@argumentDefinitions(
  first: { type: "Int", defaultValue: 20 }
  after: { type: "String" }
)
@refetchable(queryName: "ExamplePaginationQuery") {
  someConnection(first: $first, after: $after) 
    # <----- add "after" to the filters array
    @connection(key: "Example_someConnection", filters: ["after"]) {
    edges: {
       ...
    }
  }
}