gatsby develop > error The "path" argument must be of type string. Received an instance of Object

[steve-dilate]

Description

After running gatsby develop in VS Code, I receive an error

error The "path" argument must be of type string. Received an instance of Object

Steps to reproduce

1. Install WordPress on WampServer @ http://www.wp.local
2. Install "WP GraphQL" plugin
3. Install "WP Gatsby" plugin
4. npm install -g gatsby-cli
5. gatsby new gatsby-wp-local https://github.com/gatsbyjs/gatsby-starter-hello-world
6. cd gatsby-wp-local
7. edit gatsby-config.js as:

module.exports = {
  plugins: [
    {
      options: {
        url: `http://www.wp.local/graphql`,
        develop: {
          //caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          hardCacheMediaFiles: true,
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },
  ]
}

6. gatsby develop

Expected result

I was hoping to receive a success message from gatsby-develop, and be able to run the Gatsby site @ http://localhost:8000/__graphql

Actual result

Received terminal error:

error The "path" argument must be of type string. Received an instance of Object

Environment

System:
OS: Windows 10 10.0.18363
CPU: (6) x64 Intel(R) Core(TM) i5-8500T CPU @ 2.10GHz
Binaries:
Node: 12.19.0 - C:\Program Files\nodejs\node.EXE
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.9.0
Browsers:
Edge: Spartan (44.18362.449.0)
npmPackages:
gatsby: ^2.24.85 => 2.24.85
npmGlobalPackages:
gatsby-cli: 2.12.113

[LekoArts]

Your gatsby-config.js is incorrect.

It must be:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        url: `http://www.wp.local/graphql`,
        develop: {
          //caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          hardCacheMediaFiles: true,
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },
  ]
}

And obviously you'll need to install gatsby-source-wordpress-experimental, too.

I couldn't reproduce your problem with a correct setup, please try above.

[steve-dilate]

Thanks @LekoArts

I've run npm install gatsby-source-wordpress-experimental,

I had to install a few missing Gatsby plugins too. Running gatsby develop now allows me to view 'hello world' @ http://localhost:8000/

How do I populate my Gatsby site with content?

I tried running npm run develop but this didn't populate the site.

Help appreciated.

[LekoArts]

You'll need to write GraphQL queries and take that data to your src/pages/index.js file. Here's a short tutorial specific to WordPress: https://github.com/gatsbyjs/gatsby-source-wordpress-experimental/blob/master/docs/tutorials/building-a-new-site-wordpress-and-gatsby.md

This is the more general tutorial about this: https://www.gatsbyjs.com/tutorial/part-five/