TASIOMIND.DEV — OPERATIONAL▸▸▸FULL STACK DEVELOPER @ GWQ SERVICEPLUS AG▸▸▸FOUNDER — K8SGPT.AI▸▸▸OPEN SOURCE: ACTIVE▸▸▸DISTRIBUTED SYSTEMS / KUBERNETES / AI▸▸▸RUST + GO + PYTHON▸▸▸FIELD TESTED / STATUS — NOMINAL▸▸▸LOCATION: EUROPE/BERLIN▸▸▸TASIOMIND.DEV — OPERATIONAL▸▸▸FULL STACK DEVELOPER @ GWQ SERVICEPLUS AG▸▸▸FOUNDER — K8SGPT.AI▸▸▸OPEN SOURCE: ACTIVE▸▸▸DISTRIBUTED SYSTEMS / KUBERNETES / AI▸▸▸RUST + GO + PYTHON▸▸▸FIELD TESTED / STATUS — NOMINAL▸▸▸LOCATION: EUROPE/BERLIN▸▸▸
← javascript

Using Gatsby with the WordPress API

September 20, 2019

Install and setup

code
# install Gatsby
npm i -g gatsby-cli

# Disable sending usage stats to Gatsby, because i don't like sending stats even if anon
gatsby telemetry --disable

# Create new Gatsby project
gatsby new myProjectName && cd myProjectName

# install WordPress plugin
npm i gatsby-source-wordpress

# Open the project in VS Code
code .

# Start development server
gatsby develop

You can now view gatsby-starter-default in the browser.

code
http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

code
http://localhost:8000/___graphql

Configure Gastby plugin

code
module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // Your WordPress source.
        baseUrl: `demo.wp-api.org`,
        protocol: `https`,
        // Only fetches posts, tags and categories from the baseUrl.
        includedRoutes: ["**/posts", "**/tags", "**/categories"],
        // Not using ACF so putting it off.
        useACF: false,
      },
    },
  ],
};

Environment variables

dotenv is already a dependency of Gatsby so you don't need to install it. You can use it in gatsby-config.js or gatsby-node.js like so:

code
// gatsby-config.js
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
});
code
require("dotenv").config();

module.exports = {
  // ...
  auth: {
    jwt_user: process.env.JWT_USER,
    jwt_pass: process.env.JWT_PASSWORD,
  },
};

Querying data with GraphQL

You need to use the <StaticQuery> component in order to use GraphQL inside a component (as opposed to a page, for tyhat you use a page query). The main difference is that page queries can accept variables while StaticQuery does not.

The StaticQuery takes two

code
import React from "react";
import { StaticQuery, graphql, Link } from "gatsby";

const Posts = ({ data }) => (
  /*
`query` from `graphql` only works at the page level
to use `graphql` inside components, you have to use the
<StaticQuery> component
*/
  <StaticQuery
    // The result of the query is automatically inserted into your React component on the data prop.
    query={graphql`
      query {
        allWordpressPost {
          edges {
            node {
              id
              slug
              title
              content
              excerpt
              date
              modified
            }
          }
        }
      }
    `}
    render={(data) => (
      <div>
        <h1>Posts</h1>

        <ul>
          {data.allWordpressPost.edges.map((post) => {
            return <li>{post.node.title}</li>;
          })}
        </ul>
      </div>
    )}
  />
);

export default Posts;

Links