Gatsby + Apollo + GraphCool + Netlify: The Web’s Promised Land

… and it’s a road sign. *sigh*

My Project’s Goals: Fast and Intuitive

We Need Static Site Generators #becausewordpress

<html><body><div id=“app”></div></body></html>
<html>
<head>
// minified css // minified js

<script>
window.__APOLLO_STATE__=
{ “apollo”: { “data”: { “allVehicles”: [{id: 1 … }, …]}}}
</script>
</head> <body> <div id=“app”> <figure>2014 Nissan GTR</figure> </div>
</body>
</html>

Now How to Make the Damn Thing Work

Gatsby: Create Pages Programmatically

The Gatsby tutorial road felt nice until…

Apollo SSR + Gatsby

// gatsby-ssr.js
gatsby build // error: client not found. Wrap component in Apollo Provider
Even statue Jesus likes a good hack
 fetchPolicy: ‘cache-and-network’
  • Don’t conditionally render on data.loading. When Apollo fetches the new data, it will set the loading flag to true causing your UI to hide the SSR data.
  • If the Apollo query is only useful at runtime, e.g. user specific data, pass the option: `ssr: false` That tells Apollo to skip the query during server side rendering. The component will be in its loading state at runtime.

What Just Happened?

Netlify to the Next Level

It’s a jam… stack. I mean, I get it. It’s not funny… but I get it.
<div data-reactid=”15">
<! — react-text: 16 →0<! — /react-text →<! — react-text: 17 → mi<! — /react-text →
</div>
… or just great work from the MDG / Apollo team!

Is This the Promised Land?

Patent / IP Attorney |> Software Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

RxJS debounce vs throttle vs audit vs sample — Difference You Should Know

React vs. Angular: The Ultimate Showdown

useResponsive: Writing Your Own React Hook for Handling Responsive Display Sizes

Lessons learned from “Data Structures with ES6 & Functional Programming”: Topic Linked List Types

Get Started With Node Js For Beginners

Podcast Episode 7: Validate Password Input for a Special Character

Architecture in Angular projects

Building My First React App in the Summer holidays.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dennis Walsh

Dennis Walsh

Patent / IP Attorney |> Software Developer

More from Medium

Autocomplete and Verify Address With React Components

ReactJs and Webpack Bundle Optimizations

[React] Event Capturing and Event Bubbling

Styled Components React Typescript