gatsby-source-airtable-next

Airtable source plugin, built for modern Gatsby sites

How to install

npm install @abcagency/gatsby-source-airtable-next

or

yarn add @abcagency/gatsby-source-airtable-next

How to use

module.exports = {
  plugins: [
    {
      resolve: "@abcagency/gatsby-source-airtable-next",
      options: {
        apiKey: "AIRTABLE_KEY",
        refreshInterval: 60000 * 5, // (5 minutes) optional
        tables: [
          {
            baseId: "AIRTABLE_BASE_ID",
            tableName: "TABLE_NAME",
            tableView: "TABLE_VIEW_NAME", // optional
            recordLinks: [
              {
                fromField: "LINK_TO_ANOTHER_RECORD_FIELD_NAME",
                toTable: "TABLE_NAME_THAT_fromField_LINKS_TO",
              },
            ], // optional
            downloadLocal: ["ATTACHMENT_FIELDS"], // optional
          },
          // can be multiple tables, even from different bases
        ],
      },
    },
  ],
};

Node key naming

During node creation this plugin will convert your Airtable table field names into camel case strings, using Lodash's _.camelCase() method, and use that as the node key.

For example Phone no. (Cell) will become phoneNoCell, Country of origin will become countryOfOrigin, and Package volume (m³) will become packageVolumeM.

Refresh interval

options: { refreshInterval?: number } optional

If set, time (in milliseconds) to wait between builds for fetching fresh Airtable data. Default: 0

"Link to another Record" type fields

options: { tables: { recordLinks?: { fromField: string; toTable: string; }[]; } optional

If set enables links to records in other tables. If you wish to query data from a linked record, you must specify the from field name and to table name in recordLinks. If not set this will be an array of Airtable record IDs.

Table views

options: { tables: { tableView?: string }[] } optional

If set, only the records in that view will be returned. The records will be sorted according to the order of the view. Fields hidden in this view will be sourced.

For example, if you are creating a blog or documentation site, specify a published field in Airtable, create a filter showing only published posts, and specify this as the (optional) tableView option in your gatsby-config file.

"Attachment" type fields

options: { tables: { downloadLocal?: string[] }[] } optional

Specifically for image attachment fields. If set will add gatsbyImage to nodes that then can be queried using GraphQL and used with, for example, gatsby-image-plugin.

How does this compare to gatsby-source-airtable?

gatsby-source-airtable is a great source plugin. I both use this plugin and have gotten a lot of inspiration from it. But it hasn't been updated in quite some time. The main differences between this source plugin and gatsby-source-airtable are:

• Keys are camelCased.
• Keys are directly on the node and not nested under a data property.
• Node types are per table, so if you source multiple tables you won't have keys with null data. Since keys are based on each table, they cannot clash with each other.
• Works with Gatsby Image CDN.

Example

An example site is available in the demo folder.

This site uses this Airtable base and uses the recordLinks option to connect different Airtable tables, and the downloadLocal option to download "Attachment" type fields from Airtable for use with gatsby-image-plugin.

Questions, Feedback, and Suggestions

If you have any questions, feedback or suggestions head on over to discussions.

Found a bug?

If you find a bug please open an issue and/or create a pull request to fix it.