DEV Community

loading...
Cover image for Headless WordPress with GatsbyJS 101

Headless WordPress with GatsbyJS 101

abmsourav profile image Keramot UL Islam Originally published at blog.abmsourav.com ・2 min read

WordPress has built-in support for Rest API. So Making WordPress headless is possible with many tools. In this article, I will show “how you can fetch data from WordPress site with GatsbyJS”.

Why GatsbyJS?
Making dynamic routes are easy and also customizable. Gatsby has some plugins that work out of the box to make WordPress headless easily and their documentation is also amazing. Gatsby also has default support for Graphql.

What do you need to know before you start following this article?

  • WordPress, WordPress plugin installation
  • Better knowledge of JavaScript
  • Familiar with ReactJS, GatsbyJS, Graphql

captain


At first install WordPress on a local environment or on a live server, then install these two plugins: WP Graphql, WP Graphiql
WP Graphql will create graphql API for WordPress and WP Graphiql will create a user interface for that. Give some time and get familiar with the interface.

Now install Gatsby CLI globally: npm install -g gatsby-cli
Then install a Gatsby starter:
gatsby new wp-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world
It will install a Gatsby starter project in wp-gatsby directory. Now cd into that folder and run: gatsby develop

Now you can see your new Gatsby site running on: http://localhost:8000/
Install “Gatsby Source WordPress” plugin: npm install gatsby-source-wordpress. And change gatsby-config.js file like below:

module.exports = {
  plugins: [
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            baseUrl: `siteUrl`, // site url without http/https
            protocol: `http`,
            hostingWPCOM: false,
            useACF: false,
        },
    },
  ]
}

This Gatsby plugin will help to fetch data from your WordPress site with Graphql. Now again run gatsby develop, and go to: http://localhost:8000/___graphql. Here you will see almost the same Graphql IDE which you have seen earlier in your WordPress site... ..

Read the original full article on my blog

Discussion (2)

pic
Editor guide
Collapse
ilearnbydoing profile image
Durgesh Gupta • Edited

Very nice explanation to fetch list of posts, you can please also guide for creating individual pages from post data? also how about working with WordPress.com (hostingWPCOM) ?
thanks

Collapse
abmsourav profile image
Keramot UL Islam Author

Thanks a lot :)
It's going to be a series, I'll cover more things in the next articles.