Running Pagination Queries on the GraphQL API

Sebastian (00:03)
Hey everyone. This is Sebastian. Today, we're going to be looking at how you use the GraphQL API to accomplish pagination queries.

Sebastian (00:11)
Here I am in a workspace where I have a table called Invoices. As we can see from this query I ran, we have about 152 invoices in this table. Now of course, if you were showing these in the table, you could query all 152 records and just list them out and then handle pagination from the front-end.

Sebastian (00:29)
However, as you start to have more and more records, you scale that up. It doesn't really become that efficient to load all that data, instead, you want to load that data at the cadence in which the user is asking for it. There's a million different ways that you might manifest this in the front-end, such as infinite scroll, pagination in a table, so on, so forth.

Sebastian (00:50)
However, we're going to need a way of doing, is essentially saying, "Hey, give me a batch of records, maybe 25 at a time or five at a time," and then when you're ready for the next batch of records, load those. There is two different ways that we're enabled to do this really easily on 8base GraphQL API. What I'm going to do is I'm going to open up the ability to pass an argument to this query.

Sebastian (01:14)
The first strategy we're going to look at is using skip. Essentially, there's an argument you can pass called skip. Skip will allow you to tell the graphical API how many records you want to skip and then you can specify how many you want in return. What does that look like?

Sebastian (01:34)
When you first run the query, skip 0, because we're not actually going to any other chunk of records, we're starting right at the beginning of whatever list we're fetching. This will stand true also if we're filtering this list or we're having just a subset of records rather than the entire table. We're going to start at skip 0 and then we're going to ask for the first, in this case, five records back; we only want five records.

Sebastian (02:02)
As soon as I run this query, there's two things that we can see, first off is that the count is still 152 because we still want to know how many records would be returned in this query overall. However, it only gave us back the first five records. These are the five records that you would show your user.

Sebastian (02:20)
Now let's say that whatever action in the front-end the user takes, that triggers the reload of a new batch of records, a new batch of five, you would then want to say how many records you want to skip to get the next batch. In this case, we got the first five, we skipped 0. We'd actually just want to skip five now. We can see the record ID here for the last one is ghq.

Sebastian (02:51)
If I run this again, we can see that we got a new batch of records coming in, and so now we skipped to the next five records. You could just keep incrementing the skip as many times as you need to to just keep iterating through that list. Once again, however you're handling this in your front-end of passing this argument to the query, that's totally up to you based on the framework and tools that you're using for your front-end.

Sebastian (03:20)
That's the skip methodology. One thing that I'll add to this as well is this is asking for the first five records in the list. You could also ask for the last five records, so you could paginate backwards if you needed to. For example, if we wanted to paginate from the back of whatever list we are querying, we can still skip 0, and instead of first, we can say the last five records in that list.

Sebastian (03:48)
Here we get the last five. Then if we start skipping from this direction, we're going to start getting it off the back of that record set. Two different ways of approaching this using the first or last argument as well as the skip argument. Now I'm just going to return this back to skip 0 first. Run that.

Sebastian (04:12)
Now we actually have another strategy by which you can paginate, and that is by using the before or after argument. Here what we can see is that we are getting back to this list of five records. However, instead of saying skip, we could say that instead we want a certain number of records after a specific record in this ordered list. By default, this list is ordered by the created at timestamp.

Sebastian (04:40)
However, you could manually order this list using the order or the sort argument, either one would work for yourself, so whatever custom ordering you come up with, you could then paginate by that order. The difference with the after or before argument is here we're going to specify a unique or mandatory value on the record. In this case, we're just going to do it with the ID.

Sebastian (05:05)
Here, instead of skip, I'm going to say after. What we know is the first record in our list was this one. Here, I'm just going to say after this record ID give me the first five. If we run that, we can see that this is not including that record because we're going after that record, but these four records were in that list that we just had and then this is the fifth record, so it would be like the sixth based on the skip, if we're using the skip argument.

Sebastian (05:41)
It's not inclusive of the record that we're giving you the idea of. If we wanted to get the next five after the last record in that list or any record in that list, for example, here we can see that the last record is 3vf, so I'm going to use the one before it and I'm going to say give me the next five. We can see that the first record in that next set is 3vf because that was the record after it. It's giving me five more after that point.

Sebastian (06:12)
Once again, this is almost like saying, "Hey, this record is the bookmark after which we are going to query a certain number of records." Once again, the first or last argument would work here as well, so that's the same. For example, I'm going to swap this ID out, get the next one. Now, unlike the skip, where skip is always saying, "Hey, skip this many," in this style, pagination, we have the ability to use after or before. If I wanted the next five before or the first five before this record, I could use the before argument and then get that list going backwards.

Sebastian (06:53)
I hope this video gave you some helpful context on how you can use the before and after arguments for the GraphQL queries as well as the skip, first, and last arguments. Really, these are all different ways of achieving pagination or paginating through records when querying the GraphQL API.

Sebastian (07:12)
If you have any questions, feel free to leave them in the comments below. Looking to seeing you in future videos. If you like these videos, please subscribe to the channel. Thank you.