Gatsby meets Airtable
Who am I?
This Webinar is about
Building a working, blazing fast and quick mvp with state of the art and easy to use tech tools
But before we get into the definitions, let's explore the choices we have
Let's keep in mind that you are a React developer and you have limited knowledge about the backend
Most React developers will just run create-react-app myApp and start coding which is the wrong approach imo
The best approach is what we're doing now, exploring the options we have, their pros/cons in order to choose the right one
Our 3 options:
So What's Gatsby and why is it the right choice?
Gatsby is a new Static Site Generator - Built with React, webpack & GraphQL.
It creates hybrid websites: think of it as a mixture of a static website and a React app.
- It generates HTML pages (files) at build time
- Navigates between pages with pushState just like a SPA using @reach/router
- Lets you build Static & Dynamic apps quickly.
What’s so awesome about it?
- You can build both static and dynamic apps.
- Use different Data sources or file formats to manage content.
- Implement different services easily like search/auth/cart/payments etc... using Gatsby plugins.
Pros & cons
Pros
- Secured as it’s static (not applicable for dynamic apps)
- Cacheable
- Cheap to host
- Out of the box good performance, pwa & best practices.
- Loads blazing fast
- SPA look alike
- Hot reload
Cons
- Does Not generate new files on demand but does it during build time & for only predicted pages. But we don't have to worry about this one anymore as Google and the other crawlers can crawl JavaScript now!
How Gatsby renders the content?
Step 1
- It opens & validates gatsby config, then it loads the plugins after deleting the html/css files of the previous build.
Step 2
- Gets the content (if there is any) from your files or platforms such as Airtable, Contentful, Wordpress etc...
Step 3
- Extracts & runs the queries, then it generates necessary pages if you used their APIs to do so on gatsby-node file.
Page & Static queries
Yup, Gatsby has an internal GraphQL API built in
Gatsby has templates, pages & components
- Page queries do accept variables via pageContext in gatsby-config but can only be added to page components & templates (meaning that templates are basically pages that get generated during build time).
- Static queries do not accept variables and are meant to be used on components.
Gatsby plugins
- Add external data or content (e.g. your CMS, static files, a REST API) to your Gatsby GraphQL data.
Source plugins
- Transform data from other formats (e.g. Markdown, YAML, CSV) to JSON objects.
Transformers
- Add different third-party services to your Gatsby site like (GA, Mixpanel, Sentry, Algolia, Auth0…).
Services
Let's move on to Airtable!
Airtable is simply a better Google spreadsheet that can be used like an admin panel to manage your content.
Bases
What are Airtable bases and how to query them?
There is always a Gatsby plugin
Exploring Gatsby source Airtable
Different approaches to interact with Airtable API
- Using the source plugin, you can fetch the content during build time but you cannot perform any CRUD operation
- Sending requests directly to the API to perform CRUD operations
Approach 1
Pros
- The content is static and no request to the API will be performed on run time.
- The API key is not exposed to the client.
- Fast as it's static
- Cheap as all the requests will be performed only when you re-deploy your website.
Cons
- No CRUD operations
- Not Suitable for few use cases
Approach 2
Pros
- Basically the cons of Approach 1
Cons
- Your API key gets exposed to the client, there are workarounds to avoid this though.
Demo time: Videography app
- Gatsby app with static/dynamic content
- CRA app with dynamic only content