Error with Gatsby plugin Gatsby-Source-Wordpress

Question

I'm trying to setup my first gatsby + wordpress site. I'm following this tutorial.

I get the site running but at the point where I should get the data from WP I get stuck. I added Gatsby-Source-Wordpress plugin. After I restarted site it throws this error:

success open and validate gatsby-configs - 0.102 s
success load plugins - 0.631 s
success onPreInit - 0.019 s
success initialize cache - 0.053 s
success copy gatsby files - 0.161 s
success onPreBootstrap - 0.040 s
info Creating GraphQL type definition for File

Path: /wp-json
The server response was "404 Not Found"

 ERROR #11321  PLUGIN

"gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:

Cannot read property 'data' of undefined



  TypeError: Cannot read property 'data' of undefined

  - fetch.js:141 fetch
    [gatsby-wordpress]/[gatsby-source-wordpress]/fetch.js:141:21

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7


warn The gatsby-source-wordpress plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes - 0.327 s
success building schema - 0.404 s
success createPages - 0.019 s
success createPagesStatefully - 0.090 s
success onPreExtractQueries - 0.022 s
success update schema - 0.079 s
success extract queries from components - 0.595 s
success write out requires - 0.103 s
success write out redirect data - 0.032 s
success Build manifest and related icons - 0.263 s
success onPostBootstrap - 0.308 s
⠀
info bootstrap finished - 6.617 s
⠀
success run static queries - 0.105 s — 3/3 36.11 queries/second
success run page queries - 0.044 s — 5/5 230.97 queries/second
 DONE  Compiled successfully in 4851ms                                                           10:46:42 AM
⠀
You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use npm run build
⠀
ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.

I run WP locally with Mamp and I'm able to see JSON data here: http://localhost:8888/GatsbyWP/wp-json/ .

Here's my gatsby-config.js file:

module.exports = {
  siteMetadata: {
    title: `Gatsby wordpress test`,
    description: `Testing...`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
    {
      resolve: "gatsby-source-wordpress",
      options: {

        baseUrl: `localhost:8888`,

        protocol: `http`,

        hostingWPCOM: false,

        useACF: true,
      },
    },
    `gatsby-plugin-sitemap`,
  ],
}

I'm stuck and don't have any clue what to do now. I found that other people had similar issue than this but didn't find any good answers or direction where to try figure out my problem.

Thanks in advance!

Answer 1

The options of gatsby-source-wordpress require...

the base URL of the Wordpress site without the trailing slash and the protocol. This is required.
Example : 'gatsbyjsexamplewordpress.wordpress.com' or 'www.example-site.com'

module.exports = {
  siteMetadata: {
    title: `Gatsby wordpress test`,
    description: `Testing...`,
    author: `@gatsbyjs`,
  },
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: `localhost:8888/GatsbyWP`,
        protocol: `http`,
        hostingWPCOM: false,
        useACF: true,
      },
    },
  ],
}

Answer 2

When Sourcing on hosting from Services Like Godaddy The axios/node clients can be dubious about them and reject the https crt, I have seen this rectified in two ways

1) With adding a third party go daddy crt bundle for example https://ssl-ccp.godaddy.com/repository?origin=CALLISTO, if you have your own server that's fine. So adding this to axios:

var agent = new https.Agent({ 
  ca: fs.readFileSync('ca.pem') 
});

axios.get(url, { agent: agent });

// or

var instance = axios.create({ agent: agent });
instance.get(url);

or node

export NODE_EXTRA_CA_CERTS=[your CA certificate file path]

2) But what if you are on Netlify or hosting through gitlab or other, What worked for me was changed my gatsby config protocol to http, this allowed me to source from my site just fine and provided all assets are https anyway, even when I deployed to my https site it all still worked. This stumped me for days, hope this helps someone

 {
    resolve: `gatsby-source-wordpress`,
    options: {
      /*
       * The base URL of the WordPress site without the trailingslash and the protocol. This is required.
       * Example : 'dev-gatbsyjswp.pantheonsite.io' or 'www.example-site.com'
       */
      baseUrl: `example.com`,
      // The protocol. This can be http or https.
      protocol: `http`,
      // Indicates whether the site is hosted on wordpress.com.
      // If false, then the assumption is made that the site is self hosted.
      // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
      // If your site is hosted on wordpress.org, then set this to false.
      hostingWPCOM: false,

Answer 3

Hey you need to make sure you query the post types you pull in and you also need to make sure theres data there to be consumed but here's what you config should look like.

{
      resolve: `gatsby-source-wordpress`,
      options: {
        baseUrl: process.env.API_URL,

        protocol: process.env.API_PROTOCOL,

        hostingWPCOM: false,

        useACF: true,

        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
          "**/menus",
          "**/portfolio",
          "**/services",
          "**/qualifications",
          "**/gallery",
          "**/logo",
          "**/location",
        ],
      },
    },

Answer 4

This may be of help to someone in case all the recommended solutions above do not solve your problems.

1. It may be that you are using the later version of gatsby and so little changes were made to the way gatsby-source-wordpress plugin works

https://www.gatsbyjs.com/docs/how-to/sourcing-data/sourcing-from-wordpress/

this site was helpful. Check it out too.