Airtable as a Database: Getting some Air in the stack

Airtable is not my typical data layer for a web app, but recently I've found great potential in the "spreadsheet-database hybrid" that functions as a "low-code platform for building collaborative apps". Its nature combining the ease of use and familiarity of spreadsheets with the power of relational databases lands it in a particularly interesting niche. Today I'll be talking about the stack I used, the benefits, and the potential of Airtable as an API-data layer.

Airtable's logo echoes its modern look and feel, also it's a nice linebreak!

The Stack In Question: Airtable + Gatsby(React-GraphQL) + Netlify:

The use case for Airtable-as-data-layer came to me when I learned a friend was using Airtable to host its prototypical model/asset, a table, of helpful resources. My tendency is always to see if a service I like -- and I like AIrtable, I've used it before for various purposes -- has an API to hook into and explore when it's being used or could be used in a cool project. I've been really into coding Discord Bots in Python recently, and noodling on a productivity/collaboration suite where I think I'll be using Discord as the convenient main place for communication as well as to call other APIs/services. However, my first attempts at using Discord.py to interface with Airtable's API(s) (technically, Airtable considers each "base" you interact with programmatically to be its own API, an interesting way of looking at resources) were basically just making web requests that required aligning with very specific endpoints. I give credit to Kaleb Nyquist's awesome blogs on using Airtable with Python for getting anywhere at all with it quick, really. Airtable has a great URL encoder included in its docs that helped, but I ended up deciding on the official JavaScript library which is also woven into the documentation. Getting that going was much easier, including with the JS equivalent for Discord being used as an intermediary. However, I took my experimentation in a different direction while working with Gatsby, the super-fast, easy to start with but (in my opinion) hard, if fruitful, to master React.js-based framework for web frontends.

Gatsby: it's fast, it's familiar to React developers, and it has an Airtable plugin!

I've worked with Gatsby before, creating static sites with rapid prototyping like a portfolio (once upon a time, now my portfolio mostly lives on GitHub.) Gatsby uses React and GraphQL along with lots of hyper-modern web tricks to deliver blazingly performant front-ends, usually hooked to a CMS. Here, it's safe to say that Airtable makes a pretty decent CMS. Credit to this starter utilizing Airtable for being, well, a starter and base for my prototype. Starters are one of the best elements of the large Gatsby ecosystem, to me, allowing for spinning up quickly a variety of types of sites. I worked with that starter and with some bumbling around, having not worked with JavaScript much recently, let alone the abstractions of React and Gatsby in an opinionated starter, got together a listing of elements from a small table of sample data regarding a personal interest in graph data:

Behold, a data layer! (The Airtable In Question, that is.)

I'm sure you've been chomping at the bit to hear about hosting and get to see the results. For hosting, I used Netlify, a suggested method for deploying Gatsby apps and a favorite for hoisting up quick little projects onto the net for me with its GitHub integration and easy-to-use interface.

Netlify is great, it's so easy and fun, it's worth getting your own first-hand experience, maybe with Gatsby!

Moment of truth, here is the little, humble listing app of resources around graph data that I tossed together as a proof of concept. (Ignore the badly cropped logos, or don't and roast me, that's still engagement with content, I'll take it.) Take a look, see how it lines up with the table above!

Why's this stack cool? The benefits:

Let's get down to why I find this pretty darn neat. First of all, data literacy not required! Airtable is a potent platform for end-users without say, SQL chops, WHERE they don't know a WHERE from a HAVING for example. It's good for quick data entry and manipulation or management. This allows for users driving an application, owners and such, to work with a developer (like say, me) in curating the data with little toil.

Secondly, I keep saying: rapid development. This was all quick to put together once I figured out/decided on the stack, as fast as a Gatsby site with all its SEO powers, one might say.

I can't overstate the value addition of these two factors. Being able to spin up a quick site that can be collaborated on or even given over to owners of data who aren't relational database wizards has great potential. However, there is a drawback: at least with how I did it using that starter, there's not real-time data reflection on changes. That's to say, the Airtable can be out of sync with the app, requiring an oh-so-hard(it's really quick and easy) trigger to deploy over on Netlify. Moving forward, I'm going to be looking into ways to resolve this should I continue exploring this stack.

To reiterate a bit, the potential:

Time to wax a bit poetic and hammer home what the potential is here. The first big win is easy data entry and management by end-users without much technical skill required. This leads to the second big win, easy cooperation between technical and non-technical creators and/or stakeholders. Finally, I encourage you to think about the extensibility of the stack -- Gatsby has a great ecosystem as mentioned, Airtable in addition to being easy to work with has a lot of features(many of which I haven't even touched, let alone the ones I'd have to pay money for, which I'm sure are super awesome.)

Some final hot(spicy) Air(table):

To wrap up, Airtable makes a great, friendly data layer in its own unique way. I've seen very little about this use for it, a quick Google did turn up this short article you might want to look at, which includes some caveats I may have glossed over in my excitement to using Airtable as an API. Thanks for following out this atypical approach to a data layer and use of Airtable, hopefully, you can apply some of this in your own work, or at least found it neat!

You can connect with me via. LinkedIn as well as other social media I have listed here! (Cover photo by Alex on Unsplash)