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.
