Airtable & Gatsby Apollo GraphQL with Typescript

julee
9 min readJul 5, 2020

Part one: Reading in Airtable data with Gatsby’s implementation of Apollo GraphQL server.

I’ve spent way too hours trying to find the right toolchain and starters just to create a playground to try out some features. So I’m hoping that this article will help others get to coding and combining components more efficiently.

Where to start?

You can create a react app from many different starter files. A good question I saw on the React site is to ask up front is “do I need a toolchain?” But in reality, most experiences are easier to create, test, publish, update, integrate when you find the right tools. Folks are working on these amazing tools to optimize designing and coding, so it’s worth learning about them.

I chose Gatsby because it provided nice UI for a static site, and even more with V3, looks like it wants to be a total solution. But if I wanted a robust app, I found that the starters with tools all along the stack contained packages I didn’t want. (Thank goodness, I found Ben Awad’s simple video, Gatsby Dynamic App Tutorial, and starter package that demonstrates how to add a dynamic app to in a Gatsby-style static project.)

Just because it’s promoted on Gatsby’s home page, I’m going to try out a workflow starting with a Gatsby Cloud instance and add the tools I know I want.

On the cloud

There’s no reason to set your app up on the cloud to begin with. But isn’t it going to be up there at some point anyway? So I decided to check out the Gatsby Cloud. I didn’t even have a project ready. I just signed up for the Cloud with my GitHub account, and let the site drag me along as it created a container project, a repo, and default settings for previewing, building, and deploying.

But, voila! There’s my GitHub repo all ready to clone locally:

>> git clone https://github.com/theship/test-org-logos.git
>> cd test-org-logos
>> npm install
>> gatsby develop
>> code .

I’ll stop the server with Ctrl-C and add some more tools.

Other tools

I need to add to make sure I have the dev playground I need to test out different features.

julee

...a queer man, Captain Ahab- so some think- but a good one. Oh, thou'lt like him well enough; no fear, no fear. He's a grand, ungodly, god-like man...