Gatsby: Wordpress tutorial is broken?

[joshuacox]

Description

Following the wordpress tutorial results in errors.

Steps to reproduce

follow this tutorial exactly from a fresh start:
https://www.gatsbyjs.org/tutorial/wordpress-source-plugin-tutorial/

Expected result

the tutorial should use the gatsby-source-wordpress to source content from the default wordpress site.

Actual result

here is the results from a gatsby build after adding the tutorials example gastsby-config.js:

https://gist.github.com/joshuacox/22a34a8b88c64842438ebec1a09a604d

Environment

  System:
    OS: Linux 5.4 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.19.2 - ~/.nvm/versions/node/v10.16.3/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Languages:
    Python: 3.8.0 - /usr/bin/python
  Browsers:
    Firefox: 71.0
  npmPackages:
    gatsby: ^2.18.8 => 2.18.8 
    gatsby-image: ^2.2.34 => 2.2.34 
    gatsby-plugin-manifest: ^2.2.31 => 2.2.31 
    gatsby-plugin-offline: ^3.0.27 => 3.0.27 
    gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16 
    gatsby-plugin-sharp: ^2.3.5 => 2.3.5 
    gatsby-source-filesystem: ^2.1.40 => 2.1.40 
    gatsby-source-wordpress: ^3.1.53 => 3.1.53 
    gatsby-transformer-sharp: ^2.3.7 => 2.3.7 
  npmGlobalPackages:
    gatsby-cli: 2.8.14

[joshuacox]

Following https://github.com/gatsbyjs/gatsby/issues/2621
I also tried installed a fresh wordpress and tried pulling from it, but the exact same results.
And also tried
useACF: false,
same results.

[joshuacox]

Maybe the same issue as this comment

In which case, would it be possible to list the plugins that are necessary to get a default install of wp functioning for this example?

The list of test plugins here is not a list of required plugins.

Also, possibly the permalinks needs to change to "post name" as described here. Though I still have errors at this point:

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "siteMetadata" on type "Site".

GraphQL request:4:9
3 |       site {
4 |         siteMetadata {
  |         ^
5 |           title

File: src/components/layout.js:19:9


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "siteMetadata" on type "Site".

GraphQL request:4:11
3 |         site {
4 |           siteMetadata {
  |           ^
5 |             title

File: src/components/seo.js:18:11

[TylerBarnes]

@joshbuchea , I just went through the steps in the tutorial and ran into the same problem. The issue was that my natural inclination was to copy/paste the entire gatsby-config.js file from the tutorial, but I needed to only copy in the WordPress plugin into my config, which is counter intuitive. I think either the tutorial should include a full working config for the example or it should just have the code that needs to be copied in to the existing config.

@gatsbyjs/learning curious what you guys think!

[shannonbux]

Usually the code snippet will just show the lines that you need to change
in highlighted format. Is that not the case?
https://www.gatsbyjs.org/contributing/gatsby-style-guide/#code-formatting-line-highlighting

On Thu, Dec 12, 2019 at 11:38 AM Tyler Barnes [e-mail]
wrote:

@joshbuchea https://github.com/joshbuchea , I just went through the
steps in the tutorial and ran into the same problem. The issue was that my
natural inclination was to copy/paste the entire gatsby-config.js file from
the tutorial, but I needed to only copy in the WordPress plugin into my
config, which is counter intuitive. I think either the tutorial should
include a full working config for the example or it should just have the
code that needs to be copied in to the existing config.

@gatsbyjs/learning https://github.com/orgs/gatsbyjs/teams/learning
curious what you guys think!

—
You are receiving this because you are on a team that was mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/20080?email_source=notifications&email_token=AHXWRWU5426RTV2A5PTLCO3QYKHLDA5CNFSM4JZVGNTKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGXZAAQ#issuecomment-565153794,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHXWRWXGYXL6RYW4B5SA3T3QYKHLDANCNFSM4JZVGNTA
.

[joshuacox]

I think a full working example gatsby-config.js file would be the best thing for a tutorial, and I reiterate that a list of necessary plugins would be a very good addition to the gatsby-source-wordpress readme as well as the tutorial.

Inserting those lines into the downloaded gatsby-config still produces these errors:

Path: /wp-json/wp/v2/users/me?per_page=100&page=1
The server response was "401 Unauthorized"
Inner exception message: "You are not currently logged in."
 -> wordpress__wp_comments fetched : 0

Path: /wp-json/wp/v2/settings?per_page=100&page=1
The server response was "403 Forbidden"
Inner exception message: "Sorry, you are not allowed to do that."

here is my complete gatsby-config.js at that point:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    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`, // This path is relative to the root of the site.
      },
    },
    {
      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: `dev-gatbsyjswp.pantheonsite.io`,
        // 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,
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

[gillkyle]

My inclination is that some version of working code is most important whether it's highlighted lines or the full file. Since tutorials are more step by step and hand-holding it might make sense to include the full working config file in my opinion.

There is a note in the using-wordpress README that says this:

This is an example which contains sample code for demonstrating how to source data from WordPress using the gatsby-source-wordpress plugin. This example is not a starter or working site.

Which does seem a little unhelpful 🤔

[joshuacox]

so trying this again, the pantheon site returns json:

http://dev-gatbsyjswp.pantheonsite.io/wp-json

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    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`, // This path is relative to the root of the site.
      },
    },
    {
      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: `dev-gatbsyjswp.pantheonsite.io`,
        // 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,
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

throws this error:

gatsby develop                                                                                      master!
success open and validate gatsby-configs - 0.049s
success load plugins - 0.363s
success onPreInit - 0.004s
success initialize cache - 0.008s
success copy gatsby files - 0.021s
success onPreBootstrap - 0.009s
success createSchemaCustomization - 0.004s

Path: /wp-json
The server response was "504 Target not responding."

 ERROR #11321  PLUGIN

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

Cannot read property 'data' of undefined

But I can clearly see the json is working from the first link above. Does someone have a working gatsby-config.js for the dev-gatbsyjswp.pantheonsite.io example site?

[joshuacox]

running through everything a second time seems to have worked, so there is maybe an intermittent error that is plaguing this as well?

By working I mean the only errors left are:

Path: /wp-json/wp/v2/users/me?per_page=100&page=1
The server response was "401 Unauthorized"
Inner exception message: "You are not currently logged in."
 -> wordpress__wp_comments fetched : 0

Path: /wp-json/wp/v2/settings?per_page=100&page=1
The server response was "403 Forbidden"
Inner exception message: "Sorry, you are not allowed to do that."

Which this should be noted in the tutorial, because if you are a n00b like me who is plagued with tons of other errors, once you clear the rest out these leftovers still look like borkage and does not give comfort that you have everything correct.

[TylerBarnes]

@joshuacox I agree, that's a great point. Definitely looks like there's room for improvement here. Glad to hear you got it working though!

@shannonbux the tutorial does have the relevant code highlighted. I think the problem here is that the full snippet looks like it should work at first glance, but it doesn't work within the context of the tutorial. For someone who's going through this without having used Gatsby much or ever before I can see it being really confusing.

@gillkyle do you want me to open a PR or would the learning team prefer to handle this?

[MaxwellKendall]

Perhaps the plugin assumes one has a non-free-tier wordpress plan?

[gillkyle]

Sorry @TylerBarnes, I'm just seeeing this now. I wouldn't want to put more on your plate but a PR making updates or even just clarifying more of what's going on based on the configurations in the config would be fantastic.

I think you probably have some of the best context if there's a more "right" way to structure a WordPress example.

[Lc0rE]

I'm glad I'm not the only one having those issues trying to use WP along with Gatsby.
I'd really appreciate a step-by-step tutorial on how to integrate WP with gatsby because this is driving me nuts!

Also, it looks like someone is solving the 401 errors by editing the .htaccess file. For those who, like me, are using Valet to start a local WP this is not a solution. Maybe this could be also part of a reviewed tutorial.

Looking forward to updates about this issue (and migrating to another CMS till then :P)!

[TylerBarnes]

@Lc0rE I'm working on updating the tutorial today.
It sounds like your other issue is unrelated though. Is there an issue open I can take a look at? I'd love to help you get unstuck!

[Lc0rE]

I'll wrap up my previous attempts to make it work, and I'll report back (if the issue is still there). Thanks for the PR with the updated tutorial!