What is Gatsby?

Gatsby is a React based framework which utilises the powers of Webpack and GraphQL to bundle real React components into static HTML, CSS and JS files. Gatsby can be plugged into and used straight away with any data source you have available, whether that is your own API, Database or CMS backend (Spoiler Alert!).

Gatsby has deservingly received a large boost in popularity over the past year. In the span of the last 12 months gatsbycli has seen more than three times as many daily downloads on npm and when coupled with the rising number of courses/online materials available it’s not surprising to learn of Gatsbys rapid growth.

Why use WordPress?

Um, why not use WordPress?! It’s simple, intuitive and has a hugeeeeeeeee unrivalled community following of dedicated developers.

As of WordPress version 4.7, WordPress exposes your sites public facing data over a REST API. This means it is easier than ever to make requests to the WordPress back end, manipulate data and present it using a detached front end such as Gatsby.

Making Gatsby work with WordPress

I won’t cover the quick start steps of getting Gatsby up and running as the Gatsby docs themselves are dead easy to follow along with and provide most of the info you could ever need. There’s no need for me toreinvent the wheel, especially when my wheel would be square and not joined to the wagon.
https://www.gatsbyjs.org/docs/quick-start

Once you have a fresh canvas of an Gatsby application, we then need to include a package specifically created to help with the fetching of data from WordPress. You can install this package to your project by using the command below:

npm install –save gatsby-source-wordpress

Now we can move onto the configuration. It’s worth taking a quick peek over gatsby-config.js before we append the WordPress config to it. You might recognise some of the stuff inside E.g. siteMetadata{} (yes, Gatsby is SEO friendly – it is part of the JAMStack after all!). At the bottom of this file, we need to resolve the package we just installed and pass an “options” JavaScript object which will hold the configuration we would like Gatsby to use. The base URL property is just the URL of your site, ignore the “/API” at the end of my link – that is because I have my WordPress setup in a subfolder on my web server. UseACF is for the advanced custom fields plugin on WordPress, if you have this plugin installed you will need to set this to true.

Once this config has been added, Gatsby will now look at www.yourdomain.com/wp-json and make GraphQL queries to all the relevant REST endpoints. This is all well and good but we’re not actually doing anything with the data just yet – we now need to add some config to gatsby-node.js which will tell Gatsby what to do with the data returned from the GraphQL queries. I highly recommend copying the configuration from the official Gatsby WordPress repository and tweaking it to your own preferences. You can find this the repository here:
https://github.com/gatsbyjs/gatsby/blob/master/examples/using-wordpress/gatsby-node.js

Gotchas & Tips

  • GATSBY RUNS ON THE SERVER SIDE – Okay I’m sorry for shouting, but this is a really important point. While you’re working on your app using gatsby develop you are viewing a “mock-up” of your site within the browser – this means you will have access to browser objects; as you’d normally expect whilst working with React. However when you run gatsby build and place your public folder contents on your server, you will no longer be able to access these browser objects. I ran into this problem whilst I was trying to use window.innerWidth to dynamically re-render my views based on screen size. Annoyingly and taking me longer than I’d like to admit, this will not work because the server side has no idea what window is because it lives on the client side. My workaround? Use React life cycle hooks to create and remove an event listener which listens for window size changes and conditionally render views based on the state stored width.
Ooops! Line 25 should be the lifecycle hook “componentDidUnmount()”
  • Use the graphiql tool to debug and check your queries are valid. Graphiql is a GUI form which accepts a GraphQL query or mutation and returns the necessary data back to you. You can find at this link of your app: http://localhost:8000/___graphiql.
  • Use gatsby serve to locally host your application and mimic it’s behaviour on a production environment.
  • Don’t be scared to experiment. I found Gatsby to be pretty similar to a roller coaster – super fast and cause me to feel a little sick in places but overall an enjoyable experience.