Connect to an API with GraphQL Cursor Pagination in Airtable

Jun 16, 2024Andy Cloke

In this tutorial, you’ll learn how to fetch multiple pages of data from a GraphQL API in Airtable using the Data Fetcher extension. We’ll use GraphQL cursor-based pagination on GitHub’s GraphQL API to fetch pull request data from Redux’s repository. Redux is a popular state management library for React, so there’s enough pull request data to work with. You can follow the steps in this tutorial for any GraphQL API that supports cursor-based pagination.

Add Data Fetcher

Add the Data Fetcher extension to your Airtable base. 

Once you’ve added the extension, sign in to Data Fetcher or sign up if you don’t have an account.

Data Fetcher Sign Up

How to Connect to a GraphQL API

Once you’re signed in to Data Fetcher, you’ll be taken to the homepage where you’ll create a request. Requests are what Data Fetcher uses to import data into Airtable.

1. Click Create your first request

click create your first request on home screen.png

2. Select Custom on the Application list.

select custom request.png

3. Rename the request to something meaningful and descriptive, like “Import Redux Pull Requests”.

rename to import redux pull requests.png

4. Change the Method to POST and add GitHub’s API URL ( under URL.

change method and url to github api graphql.png

5. Switch to the Authorization tab and select Bearer Token under Type.

github bearer token authentication.png

6. Before you can continue, you’ll need to generate a personal access token on GitHub. Copy and paste the token in the Token field immediately after you generate it.

github pat bearer token.png

7. Switch to the Body tab and click GraphQL.

body tab graphql tab.png

At this point, we’ll put in the GraphQL query and variables we’ll need to make the request.

GraphQL query:

query ($owner: String!, $name: String!, $after: String, $first: Int) {
  repository(owner: $owner, name: $name) {
    pullRequests(first: $first, after: $after) {
      nodes {
      pageInfo {

GraphQL variables:

  "name": "redux",
  "first": 10,
  "owner": "reduxjs"

8. Copy and paste the GraphQL query under Query. 

github graphql query.png

9. Copy the GraphQL variables and paste them under Variables (JSON)

github graphql variables.png

The above query fetches pull requests from the repository we specify in the variables. In this case, we’re fetching the first 10 pull requests from the redux repository under reduxjs (repository owner). You can read GitHub’s GraphQL pagination guide for more examples. 

10. Click Save and Run at the bottom right of the dialog.

github graphql save and run.png

Click Continue on the dialog that opens.

This will update records warning.png

Map the Response Fields to Your Table

Once you’ve completed the previous steps, Data Fetcher will run the request and open Response field mapping. This is where you’ll map the data you fetched from the API to the fields in your table and select the data you want to keep from the request.

girhub graphql requests response field mapping.png

After running the request, Data Fetcher returns six fields. However, you’ll only need four of them for this tutorial. You can map each field to an existing field in your table using the Existing field option, or create a new field with the New field option.

All the fields start with “Repository pull requests” so you might want to rename them to something shorter.

1. Use this mapping for the fields:

  • Repository pull requests nodes created → New field Created at
  • Repository pull requests nodes number → New field Number
  • Repository pull requests nodes title → Existing field Name
  • Repository pull requests page info end cursor → New field Cursor
github graphql map fields.png

2. Scroll to the right of the screen and uncheck the last two fields: “Repository pull requests info has next page” and “Repository pull requests info has previous page”.

removed github graphql field mappings.png

3. Click Save and Run in the bottom right corner.

Check your output table, and you should see the new fields created and populated with pull request data.

github prs first page imported into table.png

Set up GraphQL Cursor Pagination in Airtable

We’ll now modify the request to get five pages of pull requests, with each page containing ten records. When we run the request after adding pagination, we should expect 50 records (5 pages x 10 records) in the table.

1. Open Advanced settings in the Data Fetcher request, and scroll down to Pagination

advanced settings pagination.png

2. Set the pagination type to GraphQL Cursor and number of pages to 5.

graphql cursor pagination type and number of pages.png

3.Set Cursor variable to after and Cursor field to “Cursor”.

graphql cursor cursor variable and field.png

4. Set Page size variable to first and Page size to 10.

graphql cursor page size variable and field.png

Because we’ve added the page size variable and value here, we’ll have to remove them from the request body.

5. Scroll up to the Body tab and remove the line “first: 10,” under Variables (JSON).

github graphql updated variables.png

6. Finally, scroll down to Update Based on Field(s) under Advanced settings and select “Number”. 

github update based on field number.png

We’re using Update Based on Field(s) to prevent any conflicts that may occur when we update existing records in the table. You can learn more about this setting in the Data Fetcher Help Center.

Click Save and Run in the bottom right corner. 

Your table should now have 50 records in total.

github pr pages imported into table.png

That's how to import data from a GraphQL API with Airtable and Data Fetcher using GraphQL cursor pagination.

You can read more about other pagination types in Data Fetcher’s Help Center.

Related Posts

How to Connect to a GraphQL API in Airtable

How to Connect to a GraphQL API in Airtable

Jul 27, 2021

Andy Cloke