Using Airtable with Gatsby to List Talks

First Published: April 30, 2020
If you're looking to learn Gatsby from scratch, I have a 90+ video course called Up and Running with Gatsby. Check it out!

Historically, all of my previous talks and podcasts have been a big blob of markdown that I manually edit and add to. It's been that way for years. With the advent of Airtable, this can get a lot easier. I'm migrating all of my data over there so I can make the Talks page read in that data at build time. Airtable also allows me to add new talks or podcasts via their website, their iOS apps, or the API. It's awesome!

Here's the first stream adding this new feature:

I'm using gatsby-source-airtable for this (which you can read about here);

To get started, run this command in your Gatsby repo:

npm install --save gatsby-source-airtable

Then, add API key, base ID, and table name to your .env file:

AIRTABLE_API_KEY=your_api_key
AIRTABLE_BASE=your_base_name
AIRTABLE_TABLE_NAME=your_table_name

Next, update your plugins array in gatsby.config.js:

plugins: [
{
resolve: 'gatsby-source-airtable',
options: {
apiKey: process.env.AIRTABLE_API_KEY,
tables: [
{
baseId: process.env.AIRTABLE_BASE,
tableName: process.env.AIRTABLE_TABLE_NAME,
},
],
},
},
]

That's it! You can then write a query in one of your pages or components like this:

{
allAirtable(
filter: {
table: { eq: "YOUR_TABLE_NAME" }
data: { Field_1: { eq: "YOUR_VALUE" } }
}
) {
edges {
node {
data {
Field_1
}
}
}
}
}

I decided to build a Talks component and use a static query. I'm also grouping the talks by year (this is a bonus Gatsby provides) and formatting the dates in GraphQL:

const data = useStaticQuery(graphql`
query AirtableQuery {
allAirtable(sort: { fields: data___Start_Date, order: DESC }) {
group(field: data___Year) {
fieldValue
nodes {
data {
Content
End_Date(formatString: "MM/DD/YYYY")
Event_Link
Event_Name
Location
Slides
Start_Date(formatString: "MM/DD/YYYY")
Topic
Type
Year
}
}
}
}
}
`)

My only issue is that Gatsby can't yet sort groups. Apparently this is a feature request that comes up every so often on GitHub. In the meantime, I just sort them myself:

const { group } = data.allAirtable
const sortedGroups = group.sort((groupA, groupB) =>
groupA.fieldValue > groupB.fieldVaue ? 1 : -1,
)

I'm still tinkering with the UI and adding all of the data, so the changes aren't yet live. Stay tuned!

Practical, actionable ways to improve each week.

Join 1150+ other devs and dev advocates on the Developer Microskills newsletter. Each week, I send out a practical, actionable way to grow in your career. No BS, no hand-waving, but with some fun thrown in for good measure. Sign up and I'll send you the Tiny Experiments framework and worksheet. It's a simple process to help you finish what you start.

Sam Julien © 2015 - Present