Airtable provides a powerful spreadsheet-like Backend-as-a-Service for many kinds of data.
Their REST API works quite nicely with Composer, and in this tutorial, we'll show you how to bring in data from your Airtable workspace into Composer.
Generate an API key
To access your data in Airtable, you need to generate an API key. Do this in your account page at https://airtable.com/account.
Note that the Airtable API key you gives full access to your API, and it will get packaged as plaintext in your app config. As such, the steps here are only suitable for private use – a malicious attacker could download your app binary from Google Play / App Store or access the web app's source code, extract the API key and wreck havoc on your data.
The secure way would be to code a separate middleware backend that houses the API key secret and has per-user authentication, or else limits the possible operations to just reading data – so users first connect to your middleware, which then connects to Airtable.
Click the generated API key and copy it.
Set up the REST API direct integration data resource
Next, open the data configurator via the Data button in the global toolbar at the top, and create a new REST API direct integration data resource.
In this example, we'll use the Stories resource – you can view the full Airtable API documentation by clicking Help > API documentation when signed in to Airtable.
Base configuration
Correct base configuration for the Airtable Stories resource
Resource ID
Give your resource a descriptive ID, such as AirtableStories.
Resource URL
The resource URL will include the Airtable base URL, your unique workspace/project ID, and the target resource. It will look something like
https://api.airtable.com/v0/<ID>/Stories
with <ID> replaced by your workspace/project ID.
The easiest way to get the ID is to open the Airtable API documentation via Help > API documentation when logged in to Airtable, then copying the URL from the Authentication section example.
Headers
Finally, we need to set up the Authorization header. As is typical for token-based authentication, the value takes the format Bearer your_api_key, so just replace your_api_key with your API key from the previous step.
Get (all) route configuration
Since our base configuration already matches the URL for getting a collection of records from the Stories endpoint (as is typical for REST APIs), we can simply head over to the Test tab and try it out.
Our initial test gets some data, but gives an error:
This is because the data we want is nested under the records key.
To fix this, we go back over to the Config tab, enter records under the Response key path field, and try again. Now the API call succeeds, and we can use Set schema from response to finalize our integration.
After this, it's simply the matter of adding a data variable for AirtableStories onto a page and making a view component repeat based on the fetched data.
Note that if you modify your schema in Airtable, you need to refresh the REST API direct integration resource's schema too.
Next steps
Airtable supports multiple query parameters that you can use to further refine your query, as well as API routes to read a single record and create, update and delete records.
Note that the Stories API documentation shows a way to create/update/delete multiple records at once by sending an array to the endpoint. While you can do this, Composer works better with the single record type actions – click the link at the bottom of the method description in Airtable API to see the example.