Connect to an API with GraphQL Cursor Pagination in Airtable

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.

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

2. Select Custom on the Application list.

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

4. Change the Method to POST and add GitHub’s API URL (https://api.github.com/graphql) under URL.

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

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.

7. Switch to the Body tab and click GraphQL.

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 {
        createdAt
        number
        title
      }
      pageInfo {
        endCursor
        hasNextPage
        hasPreviousPage
      }
    }
  }
}

GraphQL variables:

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

8. Copy and paste the GraphQL query under Query. 

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

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.

Click Continue on the dialog that opens.

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.

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

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”.

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.

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

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

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

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

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).

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

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.

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.