Beyond Static

Gatsby + Apollo for Fully Dynamic Apps

by Jason Lengstorf
@jlengstorf  ·  jason@gatsbyjs.com

Slides: git.io/beyond-static

• Developer 🥑
• Currently: Gatsby
• Formerly: IBM
• Portland, OR

You should use GraphQL for everything and serve your entire app as static assets

Development today isdifferent

The monolithic CMS is dying

The future is thecontent mesh

This is amazing

• Manage data using purpose-built tools
• Load data from anywhere using APIs
• Build custom UIs that combine multiple data sources

This is terrible

• Atrocious performance pitfalls
• Complex business logic to combine data sources
• UIs can become tightly coupled to back-ends
• State management leads to nightmarish complexity

Also: async is hard

How to tame the Content Mesh

• Centralize data access with GraphQL
• Serve only optimized static assets

Centralize data with GraphQL

• Better explorability
• Single source of truth
• More scalable & team-friendly
• Consistent, shareable dev workflow

Go Static for everything

• Blazing fast performance
• Simpler deployment flow
• Reduced DevOps overhead

How this works in Gatsby

• Node APIs to load any data source into GraphQL
• “Early bind” data at build time
• Generate static assets
• Automate performance tuning
• Deploy to a CDN (e.g. Netlify)
• Rehydrate to a React app in the browser

Make the Right Thingthe Easy Thing

Design your tools so the laziest, shortcuttiest,
under-the-gunniest decisions a developer can make
will still result in an excellent user experience.

But...

“Isn’t Gatsby a static site generator?
My app has dynamic data!”

static assets !== static apps

React apps are dynamicGatsby sites are React apps

Something something transitive property...Gatsby sites are dynamic

Example: Gatsby’s Swag Store

Static Data Loaded at Build Time

Dynamic Data Loaded at Run Time

Client-Only Routes for User Pages

Data Loads Asynchronously

🤔 How easy is it to set up a @gatsbyjs app with GraphQL for data on the back-end + @apollographql for GraphQL client-side?

✅ 5 files
✅ 88 lines of code
✅ Use both build-time and runtime GraphQL queries in the same component

😎 Repo: https://t.co/lrEg41iGgx pic.twitter.com/OuKChDpIFN — Jason Lengstorf @ #GraphQLSummit (@jlengstorf) November 6, 2018

💻 Live Demo

Let’s build a dynamic app in Gatsby.

Try it yourself:
gatsbyjs.org

You should use GraphQL for everything and serve your entire app as static assets

Thanks!

Jason Lengstorf
Follow me on Twitter: @jlengstorf