GraphQL Import

Import data into your Airtable base from any GraphQL endpoint!

Comment

Inspiration

I've been working with GraphQL recently, and have found it to be such a powerful self-documenting way to retrieve and make sense of data and it's structure. And Airtable is a great destination for data for further sharing, analysis, visualization, presentation, and more. Connecting the "graph" of data from a query response to the notion of tables and related records in Airtable inspired me to create an interface that connected the two!

What it does

This custom Airtable block allows you to import data by hitting any GraphQL endpoint. After choosing an endpoint, and copying in any required headers to authorize the request (if not a public endpoint), you can browse the data, it's docs, and play with any queries in GraphiQL. Once you've settled on a query and shape of the response, you can import this data through guided prompts, which have you confirm the tables/fields that would be created (or have conflict with existing tables) and the data that would be inserted into those tables. Test your query, validate the schema, import the data... profit!

How I built it

This block is built with Typescript, and React (by virtue of the Blocks SDK). It heavily leverages Javascript libraries like graphql, graphiql, jsonpath, lodash.

Challenges I ran into

Overall, the Airtable SDK was pretty smooth to use. It would have been useful to be able to delete tables via API (with the user's confirmation) and make linked records as part of creating or updating a table.

Accomplishments that I'm proud of

How quickly I got something up & running! (and released!)

What I learned

How much you can do with Airtable! I was familiar with it from some use cases in previous work experiences, but building something w/the Airtable API helped me understand the powerful primitives Airtable is built on (and how to make a great React platform). Using Blocks SDK through this hack reinforced ideas that "low code" platforms can be a force multiplier.

What's next for GraphQL Import

  • feedback! and bug bashing!
  • better types (not just "single line text" for all fields)
  • improve error handling / error messaging for the end user
  • support for Relays spec

Built With

Share this project:

Updates