This site runs best with JavaScript enabled.

Using Airtable with Gatsby to List Talks

First Published: April 30th, 2020


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:

1npm install --save gatsby-source-airtable

Then, add API key, base ID, and table name to your .env file and update your plugins array in gatsby.config.js:

1plugins: [
2 {
3 resolve: 'gatsby-source-airtable',
4 options: {
5 apiKey: process.env.AIRTABLE_API_KEY,
6 tables: [
7 {
8 baseId: process.env.AIRTABLE_BASE,
9 tableName: process.env.AIRTABLE_TABLE_NAME,
10 },
11 ],
12 },
13 },
14]

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

1{
2 allAirtable(
3 filter: {
4 table: { eq: "YOUR_TABLE_NAME" }
5 data: { Field_1: { eq: "YOUR_VALUE" } }
6 }
7 ) {
8 edges {
9 node {
10 data {
11 Field_1
12 }
13 }
14 }
15 }
16}

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:

1const data = useStaticQuery(graphql`
2 query AirtableQuery {
3 allAirtable(sort: { fields: data___Start_Date, order: DESC }) {
4 group(field: data___Year) {
5 fieldValue
6 nodes {
7 data {
8 Content
9 End_Date(formatString: "MM/DD/YYYY")
10 Event_Link
11 Event_Name
12 Location
13 Slides
14 Start_Date(formatString: "MM/DD/YYYY")
15 Topic
16 Type
17 Year
18 }
19 }
20 }
21 }
22 }
23`)

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:

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

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


← Back to writing
Share article

I send emails about getting better at coding and life.

I'm on a path to become a better human and developer and I want to bring as many friends with me as possible. Want to join me? Sign up below. 👇



Sam Julien © 2020