0

I'm trying to set up Gatsby to create a headless Wordpress site. I have a local Wordpress environment set up and working with the following plugins installed and active:

  • ACF: 5.9.5
  • ACF Pro 5.8.12
  • WP GraphiQL 1.0.1
  • WP GraphQL 1.3.5 WP
  • GraphQL Gutenberg 0.3.8
  • WP GraphQL Gutenverg ACF 0.3.0
  • WPGraphQL for Advanced Custom Fields 0.4.1

Everything seems to be working as expected on the Wordpress end. I've now been trying to set up my local Gatsby site to work and pull from Wordpress using the Gatsby Source GraphQL plugin, however the wordpress scheme just isn't appearing in my GraphiQL interface at http://localhost:8000/___graphql/.

Here is my gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: "Portfolio Site",
  },
  plugins: [
    {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "WPGraphQL",
        fieldName: "wpgraphql",
        url: "http://local.test/graphql",
        refetchInterval: 60,
      },
    },
  ],
};

And here is the contents of my package.json:

{
  "name": "portfolio-site",
  "version": "1.0.0",
  "private": true,
  "description": "Portfolio Site",
  "author": "jsaget",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@fontsource/syne-mono": "^4.2.2",
    "gatsby": "^2.32.3",
    "gatsby-source-graphql": "^2.14.0",
    "gatsby-source-wordpress": "^4.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "typewriter-effect": "^2.17.0"
  }
}

When I run npm run develop in the terminal to spin up my local Gatsby, I get the following error and warning in the console:

 ERROR #11321  PLUGIN

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



warn The gatsby-source-graphql plugin has generated no Gatsby nodes. Do you need it?

A colleague has set up this Gatsby environment in the exact same way as me (same versions of all dependencies etc.), and it works fine on his machine but not on mine. Could some global npm modules or something else be interfering? Or could it be something on the Wordpress end?

Just for extra clarity, my expectation would be that a dropdown field would appear here titled wpgraphql (as in the gatsby-config.js): GraphiQL screenshot

LaikaTheSpaceDog
  • 105
  • 9
  • 1
    internal playground works with admin rights ... check API externally - using Postman ... why not `gatsby-source-wordpress` ? – xadm Apr 15 '21 at 10:38
  • Why are not using `gatsby-source-wordpress` as suggested previously? – Ferran Buireu Apr 16 '21 at 05:03
  • First time setting up a Gatsby project and I'd been following this tutorial, which advises using `gatsby-source-graphql`: https://www.youtube.com/watch?v=VIMFx0niV08&list=PL0TiIcOKyEAkDLsLsFc8BYzHXi3DEhKCe&index=11 – LaikaTheSpaceDog Apr 16 '21 at 12:41

2 Answers2

0

Same here, but I found something!

Go to WordPress dashboard > GraphQL > Settings: Tick the box "Enable GraphQL Debug Mode"

Go back to your terminal: gastby clean, then npm run develop

wpgraphql should now appear in http://localhost:8000/___graphql

Pénélope
  • 1
0

gatsby clean && gatsby develop worked for me!

Bashid
  • 433
  • 5
  • 15