How to couple Gatsby.js and WordPress
Developers love Jamstack and are increasingly using it in their work. But WordPress remains a very popular CMS: it has an excellent admin panel, which provides ample opportunities for content management. So why not take the very best from two different approaches, especially since there is such an opportunity now?
Why would you want to combine WordPress and Jamstack at all? Well, maybe the developer would like to use the JAMstack approach together with, for example, React and Gatsby, but client-side content managers are used to using WordPress. In this case, the company's management may consider that it is unjustified to retrain employees for a new, albeit more convenient, CMS.
Fortunately, there is a way out of this situation that is acceptable to all. We can take the best of the Jamstack approach, but use WordPress as the interface for editing content on the site. This article will show you how to set up such an environment.
The material is in no way a comprehensive guide, but rather a short overview. You will find more detailed step-by-step instructions if you follow the links that we left for you in the sections of the article. So, let's begin.
Headless version of WordPress
Not all developers know that WordPress CMS also has its own REST API. The API greatly facilitates the work of separating the frontend and backend: we can load all the data on the client (that is, in the browser) and use those frontend technologies that are familiar and convenient to us. Working with the API, we are implementing the JAMstack approach (remember that A in JAM means API). As a result, we get a huge range of WordPress capabilities, but at the same time on the frontend we use a fast framework or SSG, for example, Gatsby.js or NextJS.
Short overview of how to couple Gatsby.js with WordPress
First step. Setting up WordPress.
Set up WordPress as usual. You can even connect all the necessary plugins. Don't worry about the speed of the site - in such a bundle, Gatsby will still provide a quick response from the frontend. To deploy WordPress, you can use your own hosting or cloud hosting provided by the creators of the CMS.
Second step. Connecting WPGraphQL Plugin on WordPress side.
It is necessary to install the WPGraphQL plugin through the plugin installation tool available in the WordPress frontend.
Details can be found in the plugin documentation.
Third step. Connecting the gatsby-source-wordpress plugin on the Gatsby side.
Now, in the gatsby-config.js file, connect the gatsby-source-wordpress plugin.
All plugin options can be viewed on this page .
You can also use the ready-made Gatsby Wordpress Starter if you want.
Fourth step. Create your beautiful and accessible app.
At this point, you need to write your project code using Gatsby. You are free to use your favorite front-end technologies and libraries.
Fifth step. Retrieving data.
Now you can fetch data in the usual manner, but using GraphQL queries. You don't need to connect anything extra - Gatsby already has all the necessary tools for working with GraphQL. Data sources connect to other Gatsby source plugins in a similar way. Refer to this gatsby-source-wordpress documentation page for more details
Final step. Set up deployment on Netlify or another hosting platform.
It's easy to do, but here's a quick guide.
Hurrah! Everything works! We have successfully befriended Gatsby and WordPress and now use the Jamstack approach.
Conclusion
Again, this brief isn't meant to be a detailed guide to setting up Gatsby + WP, but it should be a good start. Now that you know the basic steps, the only thing left is to study the documentation and combine WordPress and JAMstack approach!
Next.js Crash Course
Another popular tool in the JAMstack is the Next.js React framework. To learn how to Integrate WordPress and Next.js, please check out this fresh course from James Perkins, which is only about 40 minutes long. The author talks about using Next.js as a frontend, WP as a backend, and setting up GraphQL to get data.