jmolivas / gatsby-recipe-headless-wordpress

Two Gatsby.js Recipes for easy headless WordPress setup and configuration

Gatsby Recipes: Headless WordPress

This repository contains two Gatsby recipes for the following use cases:

1. Using WordPress REST API as a source via the gatsby-source-wordpress plugin.
2. Using WPGraphQL as a source via the gatsby-source-graphql plugin.

Installation and Usage

To use Gatsby Recipes, make sure you have the latest version of gatsby-cli by running either of the following commands.

npm i -g gatsby-cli

or

yarn global add gatsby-cli

Next, in either an existing Gatsby site or a brand new Gatsby site, you can run the following command depending on the data source you choose.

REST API

gatsby recipes https://raw.githubusercontent.com/crock/gatsby-recipe-headless-wordpress/master/headless-wordpress-restapi.mdx

WPGraphQL

gatsby recipes https://raw.githubusercontent.com/crock/gatsby-recipe-headless-wordpress/master/headless-wordpress-wpgraphql.mdx

These command will create some rudimentary styles and basic templates in your Gatsby installation and add an example gatsby-node.example.js for you to reference. It will not overwrite your existing gatsby-node.js file. Be sure to rename gatsby-node.example.js to gatsby-node.js after copying over your existing code.

As of Gatsby CLI v2.11.11, the Gatsby Recipes do not support adding default options to a plugin defined in gatsby-config.js. As soon as it does, this repo will be updated to include some default options.

However, for now you will have to replace the inserted object in gatsby-config.js with these options if you want some default data.

REST API

{
    resolve: "gatsby-source-wordpress",
    options: {
        baseUrl: `cms.learnjam.org`,
        protocol: `https`,
        hostingWPCOM: false,
        useACF: true,
        includedRoutes: [
            "**/posts",
            "**/pages",
            "**/users",
            "**/categories",
            "**/tags",
        ]
    }
}

WPGraphQL

{
    resolve: 'gatsby-source-graphql',
    options: {
        typeName: 'WORDPRESS',
        fieldName: 'wordpress',
        url: 'https://cms.digipresence.org/admintuts/graphql',
    }
}

Resources

Gatsby Recipes Docs

Gatsby Recipes Umbrella Issue ⛱

Gatsby Recipes RFC