GraphQL Connection arguments — a quick summary

Note: It took me a while to wrap my head around the GraphQL Connection arguments used for pagination. These are basically notes of some of my conclusions afterwards.

These are the four arguments for a GraphQL Connection:

first: Int
after: String
last: Int
before: String

Both after and before represent cursors, like an id or pointer to a place in a list.

first represents the number of records you want from the particular cursor moving forward.

last represents the number of records you want from a particular cursor moving backwards.

First and after

The first and after arguments should be used together. You cannot use before with first. You cannot use after with before.

A query with first and after with give you the first n elements after the cursor.

A query with first and after with give you the first n elements after the cursor

If after is not specified, it gives the first n elements from the beginning of the list.

If after is not specified, it gives the first n elements from the beginning of the list.

Last and before

The before and last arguments should be used together. You cannot use before with first. You cannot use after with before.

A query with last and before with give you the first n elements before the cursor.

A query with last and before with give you the first n elements before the cursor.

If before is not specified, it gives the first n elements from the end of the list.

If before is not specified, it gives the first n elements from the end of the list.

Combining them

A query could technically contain all arguments. This will ‘work’ and return results, but not what you are expecting or hoping for. Hence you should not do it. As mentioned above, before with first will not work together. before will be ignored. Same with other combinations. Hence, don’t combine them.

Additional resources

• https://www.apollographql.com/blog/graphql/explaining-graphql-connections/
• https://graphql-ruby.org/pagination/connection_concepts.html#connections
• https://developers.facebook.com/docs/graph-api/results