Gatsby.js — Render Data from WordPress and REST API

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Rendering Content form WordPress

We can render content from WordPress on our Gatsby site.

To do this, we install the gatsby-source-wordpress plugin by running:

npm install gatsby-source-wordpress

Then we add the following code into our Gatsby project:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        baseUrl: `wpexample.com`,
        protocol: `https`,
        hostingWPCOM: false,
        useACF: false
      }
    },
  ]
}

The baseUrl should be set to the WordPress site’s URL.

hostingWPCOM sets whether the site is hosted on wordpress.com or self-hosted.

useACF sets whether the site uses the Advanced Custom Fields plugin.

gatsby-node.js

const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allWordpressPost {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)
  const postTemplate = path.resolve(`./src/templates/post.js`)
  result.data.allWordpressPost.edges.forEach(edge => {
    createPage({
      path: edge.node.slug,
      component: slash(postTemplate),
      context: {
        id: edge.node.id,
      },
    })
  })
}

We get the data from the WordPress API by making the GraphQL query.

Then we call createPage to create the pages.

We set the path to the slug.

The component prop is set to the template path, which is src/templates/post.js

And the context has any extra data.

src/template/post.js

import React, { Component } from "react"
import { graphql } from "gatsby"
import PropTypes from "prop-types"
class Post extends Component {
  render() {
    const post = this.props.data.wordpressPost
    return (
      <>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </>
    )
  }
}
Post.propTypes = {
  data: PropTypes.object.isRequired,
  edges: PropTypes.array,
}
export default Post
export const pageQuery = graphql`
  query($id: String!) {
    wordpressPost(id: { eq: $id }) {
      title
      content
    }
  }
`

post.js has the template component.

We render the content with post.content .

And post.title has the title.

Pulling Data from an External Source and Creating Pages without GraphQL

We can get data straight from an API and create pages from them.

To do this, we write:

gatsby-config.js

module.exports = {
  plugins: []
}

gatsby-node.js

const axios = require("axios")
const get = endpoint => axios.get(`https://pokeapi.co/api/v2${endpoint}`)
const getPokemonData = names =>
  Promise.all(
    names.map(async name => {
      const { data: pokemon } = await get(`/pokemon/${name}`)
      return { ...pokemon }
    })
  )
exports.createPages = async ({ actions: { createPage } }) => {
  const allPokemon = await getPokemonData(["mew", "ditto", "squirtle"])
  createPage({
    path: `/pokemon`,
    component: require.resolve("./src/templates/all-pokemon.js"),
    context: { allPokemon },
  })
}

all-pokemon.js

import React from "react"
export default function AllPokemon({ pageContext: { allPokemon } }) {
  return (
    <div>
      <ul>
        {allPokemon.map(pokemon => (
          <li key={pokemon.id}>
            <img src={pokemon.sprites.front_default} alt={pokemon.name} />
            <p>{pokemon.name}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

In gatsby-node.js , we get the data from the Pokemon API.

Then we create the createPages function by getting the data from the API.

And then we call createPage on the resolved value of the promise returned by getPokemonData .

We set the path for the page, the component to render the data in, and the context with the data that we want to render.

Then in src/templates/all-pokemon.js , we render the data that we get from the API.

Conclusion

We can render data from WordPress or from a REST API directly with Gatsby.