Getting Started with GatsbyJS + WordPress
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
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.
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
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:
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.
- Use the g
raphiqltool to debug and check your queries are valid. Graphiqlis 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.