GraphQL not displaying Airtable data connection

Other Questions Airtable
1

I’m having trouble getting my Airtable integration to appear in GraphQL. I installed the necessary plugin using yarn and configured my gatsby-config file properly, but the data source isn’t showing up.

Here’s my current configuration:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-airtable`,
      options: {
        apiKey: process.env.GATSBY_AIRTABLE_KEY,
        concurrency: 3,
        tables: [
          {
            baseId: process.env.GATSBY_AIRTABLE_BASE,
            tableName: `Portfolio`,
            mapping: {photo: `fileNode`}
          }
        ]
      }
    }
  ]
}

I’ve already tried clearing the Gatsby cache and restarting the development server with elevated permissions. However, the allAirtable query still doesn’t appear in GraphiQL. Any ideas what might be causing this issue?

2

I had the same issue when my environment variables weren’t loading right. Log process.env.GATSBY_AIRTABLE_KEY and process.env.GATSBY_AIRTABLE_BASE at the top of your gatsby-config file to see if they’re actually there. Sometimes dotenv fails, especially if your .env file name doesn’t match your NODE_ENV value. Try hardcoding the values temporarily to test if that fixes the connection. Also check if your Airtable API key has the right permissions for that base.

3

I’ve hit this exact problem before. Gatsby gets weird with data source connections.

First, add some debugging to see what’s going on. Drop this in your gatsby-node.js:

exports.onPreInit = () => {
  console.log("API Key:", process.env.GATSBY_AIRTABLE_KEY ? "Found" : "Missing")
  console.log("Base ID:", process.env.GATSBY_AIRTABLE_BASE ? "Found" : "Missing")
}

Also double-check your Airtable base sharing permissions. Those get screwed up sometimes.

But honestly? I gave up on Gatsby + Airtable after dealing with this crap repeatedly. Now I just use Latenode to pull from Airtable and push it wherever. Way more reliable than fighting plugin bugs, plus you can transform the data however you want.

Just set up an automation that syncs your Airtable data to your database or static files. Takes 10 minutes and actually works.

4

make sure your Portfolio table has some data in it - if it’s empty, gatsby won’t create the queries. also double-check your .env file for any typos in the api key or base id, those can be tricky!

5

Your plugin config looks fine, but here’s what trips everyone up.

The query name in GraphiQL isn’t allAirtable - it’s based on your table name. You’re using tableName: 'Portfolio', so look for allAirtablePortfolio instead.

This confuses tons of developers. The plugin creates queries like this: allAirtable{TableName}.

Still not showing up? It’s probably your API credentials. Before you debug env vars, just paste your actual API key and base ID directly into the config file temporarily. If it works, you’ve got an environment variable problem.

Also check your Airtable API key permissions. Go to Airtable Web API, select your base, and make sure the key can actually read that specific base. I’ve wasted hours on this before realizing the key was generated for a different workspace.