airtable-loader

This is a webpack loader that will load data from an Airtable table at build time using the settings provided in a .airtable file. This then "packs" in the data into the Javascript that is produced.

This can be useful for data you want to inject at build time from Airtable.

Updates

01/09/2021: The latest version of this project has been updated to work with Webpack 5 and I have not tested it on older versions. See the updated example for details: example webpack project

Install

yarn add -D airtable-loader

or

npm install --save-dev airtable-loader

The .airtable File

The .airtable file contains the settings that will be used to generate the data to pack. Referencing the file (i.e. import myData from 'mydata.airtable';) will create a Javascript object that contains the data from the Airtable table(s).

Params

| Parameter Name | Description | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------- | | baseId | The Airtable base id (can be found in the API documentation for the Workspace) | | tableName | The name of the Airtable table | | maxRecords | The maximum number of records limit the Airtable API request | | includeFilterFieldName | The mapToName field (a boolean value) to filter what the data is produced | | cacheTables | Array of cacheTables that the loader will pre-fetch and cache in an effort to reduce the number of requests to Airtable | | fields | Array of field mappings from Airtable to the Javascript object that's produced |

cacheTables

| Parameter Name | Description | | -------------- | ------------------------------------------------------------------------------ | | baseId | The Airtable base id (can be found in the API documentation for the Workspace) | | tableName | The name of the Airtable table |

fields

| Parameter Name | Description | | -------------- | ------------------------------------------------------------------------------------- | | name | The exact name of the column in Airtable | | mapToName | The name that will be used in the Javascript object that's produced | | resolve | Used to resolve fields that have arrays of Airtable Ids that reference another table. |

resolve

| Parameter Name | Description | | ---------------------- | ------------------------------------------------------------------------------ | | baseId | The Airtable base id (can be found in the API documentation for the Workspace) | | tableName | The name of the Airtable table | | maxRecords | The maximum number of records limit the Airtable API request | | includeFilterFieldName | The mapToName field (a boolean value) to filter what the data is produced | | fields | Array of field mappings from Airtable to the Javascript object that's produced |

Example webpack configuration

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.airtable/,
        loader: 'airtable-loader',
        options: {
          apiKey: 'AIRTABLE_API_KEY'
        }
      }
    ]
  }
};

Example .airtable file

The .airtable file should be in JSON format

contacts.airtable

{
  "baseId": "<TABLE BASE ID>",
  "tableName": "Contacts",
  "maxRecords": 200,
  "fields": [
    {
      "name": "Name",
      "mapToName": "name"
    },
    {
      "name": "Phone",
      "mapToName": "phone"
    }
  ]
}

Joining tables (resolving ids)

{
  "baseId": "appmtqyIlK7hZ4kwL",
  "tableName": "Contacts",
  "maxRecords": 2,
  "fields": [
    {
      "name": "Name",
      "mapToName": "name"
    },
    {
      "name": "Phone",
      "mapToName": "phone"
    },
    {
      "name": "Skills",
      "mapToName": "skills",
      "resolve": {
        "tableName": "Contacts",
        "baseId": "appmtqyIlK7hZ4kwL",
        "fields": [
          {
            "name": "Skill Name",
            "mapToName": "skillName"
          }
        ]
      }
    }
  ]
}

Caching complete tables

To save on requests to Airtable, you can have the loader retrieve the whole table and cache it. The loader will then look in the cache before making a request to Airtable for the individual record.

{
    "baseId": "appmtqyIlK7hZ4kwL",
    "tableName": "Contacts",
     "cacheTables": [
         {
             "tableName": "Contacts",
             "baseId": "appmtqyIlK7hZ4kwL"
         }
     ],
    "fields": ...
}

Use in code

import React from 'react';
import ReactDOM from 'react-dom';
import contacts from './contacts.airtable';

const Contacts = () => {
  return contacts.map((contact, i) => (
    <li key={i}>
      {contact.name}: {contact.phone}
    </li>
  ));
};

const App = () => {
  return (
    <div>
      <h1>Contacts</h1>
      <ul>
        <Contacts />
      </ul>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

Typescript

If you are using this loader in a project writen in Typescript, you will need to create a module definition for the airtable (or what ever you name it) file type. Something like this in your @types directory:

// airtable.d.ts
declare module '*.airtable' {
  const content: any;
  export default content;
}

TODOs

• [ ] Convert loader code to Typescript