DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Graham Vasquez
Graham Vasquez

Posted on • Updated on • Originally published at blog.gvasquez.dev

Making interacting with the Airtable API even easier

I am not sure how many of you are familiar with Airtable, but it's an easy to use pseudo database that you can manage like Excel. It supports tons of ways to store different types of data, and allows you to make links between records ala RDBMS. I use it all the time for quick prototyping, or in places where database performance is not a priority and I want an easy way to manage data outside of my application.

They also have a fairly robust API which gives you access to your usual CRUD interface. While this API is pretty easy to use, you can always make it easier right?

Enter the Airtable.js library from Airtable. It makes talking to their API from javascript really easy and quick. The problem is that it's call-back based ๐Ÿคฎ. Now I know that this is more of a matter of opinion, but I love me some promises and more so async/await.

Thus I built AsyncAirtable. I just wanted a really easy way to deal with the Airtable API and keep my code nice and clean.

Let's take a quick look at what it looks like to get some data using Airtable.JS"

let results = [];
base('TEST').select({})
  .eachPage(function page(records, fetchNextPage) {
    records.forEach(function(record) {
        results.push(record);
    });
    fetchNextPage();
  }, function done(err) {
    if (err) { console.error(err); return; }
    done();
});
Enter fullscreen mode Exit fullscreen mode

Seems pretty long and verbose. How about if we want to accomplish the same thing with AsyncAirtable?

const results = await asyncAirtable.select('TEST');
Enter fullscreen mode Exit fullscreen mode

These blocks of code will net us the same data. See how easy that is!?

We have built this with all the basic functionality of the Airtable API and a few extra bells and whistles, namely:

  • Built in pagination
  • Built in upsert method for you MySQL afficiandos.
  • Fully typed with declaration files
  • A handy retry feature that will retry a query if you are rate limited

Now I still have some more ideas for this project to make it even more fun to work with. Let's take a look at some of these:

โœจ A QUERY BUILDER โœจ

Anyone who has dealt with the Airtable API in the past is probably familiar with filter formula strings. If you are, you are probably just as excited about this as me. The Airtable filter formula strings can get really weird REALLY fast, and can sometimes be hard to follow.

I am working on a query builder that will be more like your traditional ORM such a Sequelize. So you can go from something like:

"AND({name} = 'Graham', {age} > 18, {hungry} = TRUE())"
Enter fullscreen mode Exit fullscreen mode

Now take that and make it something like:

{
  $and: [
    {name: 'Graham'},
    {age: {$gt: 18}},
    {hungry: true}
  ]
}
Enter fullscreen mode Exit fullscreen mode

See? Look at how nice that is!

Let's put it in the context of using a Javscript library to talk to the API.

Here is what that might look like with the Airtable.JS library:

let results = [];
base('TEST').select({
    filterByFormula: "AND({name} = 'Graham', {age} > 18, {hungry} = TRUE())"
}).eachPage(function page(records, fetchNextPage) {
    records.forEach(function(record) {
        results.push(record);
    });
    fetchNextPage();
}, function done(err) {
    if (err) { console.error(err); return; }
    done();
});
Enter fullscreen mode Exit fullscreen mode

Now let's compare that to how you would do the same thing in AsyncAirtable:

const results = await asyncAirtable.select('TEST', {
  where: {
    $and: [
      {name: 'Graham'},
      {age: {$gt: 18}},
      {hungry: true}
    ]
  }
});
Enter fullscreen mode Exit fullscreen mode

It makes query building so much easier. Plus building it programmatically is simpler because it just uses a standard Javascript object instead of having to use messy template strings or worse, string concatenation.

Another feature I am excited to be adding in an upcoming release is data modeling. It won't be as robust as the models used by ORMs like Sequelize, but it will give you some type safety and help you catch errors while you are writing your code, similar to Typescript.

Thanks for reading and I hope you get a chance to test out AsyncAirtable. Be sure you check us out on Github. It is completely open source, so feel free to take a look around, and contribute!

GitHub logo GV14982 / async-airtable

A lightweight npm package to handle working with the Airtable API.

Async Airtable

Build: Tests Build: Tests npm npm (tag) MIT License

AsyncAirtable is a lightweight npm package to handle working with the Airtable API.

They have an existing library, but it is callback based and can get a little klunky at times, so I wrote this one that is promise based to make your life easier ๐Ÿ˜Š.

I also wrote a query builder so, instead of having to write those really annyoying filter formula strings you can just use an object like:

{
  where: {
    name: 'AsyncAirtable'
    $gte: {stars: 13}
  }
}

which will generate the following filterFormula string for you: AND({name} = 'AsyncAirtable', {stars} >= 13)

Requirements

Installation

  • Be sure get your API key

  • To get the base ID of your new base. You can do this by heading over to Airtable's API page and selecting that base from the list, you should see:

    The ID of this base is BASE_ID

  • Installโ€ฆ

Cheers ๐Ÿป

Top comments (2)

Collapse
makingthings profile image
James Grubb

Hi thank you for creating AsyncAirtable. Before I try it I am hoping to get my head round Airtable.js. In your code eaxample above

let results = [];
base('TEST').select({})
  .eachPage(function page(records, fetchNextPage) {
    records.forEach(function(record) {
        results.push(record);
    });
    fetchNextPage();
  }, function done(err) {
    if (err) { console.error(err); return; }
    done();
});
Enter fullscreen mode Exit fullscreen mode

if I console.log(results) i get []
Do i need to create a promise?
Thanks in advance

Collapse
thebravehouse profile image
thebravehouse

THANK YOU. Really looking forward to trying this out!

If you figure out a clever way to autogenerate typescript models from airtable tables, let me know. For now, I've been hardcoding the models which is ... fine... but far from ideal

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.