Airtable As A Minimum Viable Database For Your ReactJs Project
In this guide, I’ll show you how to use Airtable as a minimum viable database for your ReactJs project.
First, what’s Airtable?
Airtable is a souped up version of Google sheets with a robust API. Airtable is built for teams and is used to organize data rather than calculate things.
You can make API calls to Airtable endpoints to push and fetch data to and from your Airtable base (spreadsheet).
I’ll assume you’re starting with a brand new ReactJs project. Here’s the companion Github repo for this project that demonstrates how you can integrate Airtable into your React app.
First install fetch (
npm install whatwg-fetch –save).
Fetch lets you make clear and concise API calls inside your react components. They’re structured like so:
As is to be expected, we can specify the method, headers, and body. The line
resp => resp.json specifies that the response should be converted to a JSON.
We will make the API call to Airtable using fetch inside the componentWillMount() lifecycle component.
Now when you reload the page and check the console, you’ll see your Airtable records printed.
You wouldn’t want to do this in production because it would expose your API key to anyone who felt like viewing source.
The workaround is to make the final API calls to Airtable on the server-side.
For this example, we’ll assume you’re running Express with your ReactJs App.
Install node-fetch, express, and bodyParser:
In your project directory:
Add the following to
This enables us to make the request to Airtable server side, in our express config file.
Now inside our React component, we make a get request to our same-origin ‘/get’ endpoint, using fetch:
- We’re making our API call to Airtable using node-fetch (don’t forget to install it with
npm install node-fetch –save).
- We’re making a same-origin request to our custom defined endpoint ‘/get’ (this is arbitrary - it could be ‘/sandwiches’). This allows the client-side to access our Airtable records that have been fetched server side.
- So far, all we’ve done is console.log our Airtable records. Here you may want to store you records in state.
To store your Airtable records in state, you would just define a new initial state as follows:
And then inside your fetch request in
componentWillMount() replace the line
console.log(records); with something like this:
Now this.state.records is a an array objects, where each object corresponds to a row in your Airtable.
It looks something like this:
Since the records are an array of objects where each object corresponds to an Airtable row, we will use the map function to iterate through the array.
Here’s an example:
Checkout the complete working example here.