How to Connect Gatsby to WordPress

Gatsby
February 28, 20221 minuteuserVatsal Sakariya
How to Connect Gatsby to WordPress

Gatsby is a blazing-fast website framework for React. It allows developers to build React-based websites within minutes.

WordPress

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

Integrate Gatsby with WordPress

Install gatsby-source-wordpress package

npm install gatsby-source-wordpress

gatsby-config.js file

add the gatsby config file in the following code

 plugins: [
    ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // Specify the URL of the WordPress source
            baseUrl: `localhost:8888/wordpress`,
            protocol: `http`,
            // Indicates if a site is hosted on WordPress.com
            hostingWPCOM: false,
            // Specify which URL structures to fetch
            includedRoutes: [
              '**/posts',
              '**/tags',
              '**/categories'
            ]
        }
    }

Now connect your gatsby website and Wordpress.

Here is an example of the GraphQL API query

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
        </div>
      ))}
  )
}
export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }

Hope this helps.