gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.28k stars 10.31k forks source link

can't get wordpress plugin to work #6670

Closed hadifarnoud closed 6 years ago

hadifarnoud commented 6 years ago

Summary

Cannot get wordpress plugin to work. I get errors about author, I deleted author section from graphql. then I got error about ACF, deleted that too. anything I do, it seems like there is something else broken. I feel like there is more serious issues. I followed official documentation.

ps: I'm using gatsby-starter-wordpress but don't believe that is the issue

Relevant information

Wordpress v4.8.7

$ gatsby develop

success delete html and css files from previous builds — 0.014 s
success open and validate gatsby-config — 0.013 s
success copy gatsby files — 0.035 s
success onPreBootstrap — 0.400 s
⠁
=START PLUGIN=====================================

Site URL: http://blog.kamva.ir
Site hosted on Wordpress.com: false
Using ACF: false
Using Auth: undefined undefined
Verbose output: true

Mama Route URL: http://blog.kamva.ir/wp-json

⠁ source and transform nodesRoute discovered : /
Invalid route.
Route discovered : /oembed/1.0
Invalid route.
Route discovered : /oembed/1.0/embed
Invalid route.
Route discovered : /oembed/1.0/proxy
Invalid route.
Route discovered : /akismet/v1
Excluded route from excludedRoutes pattern.
Route discovered : /akismet/v1/key
Excluded route from excludedRoutes pattern.
Route discovered : /akismet/v1/settings
Excluded route from excludedRoutes pattern.
Route discovered : /akismet/v1/stats
Excluded route from excludedRoutes pattern.
Route discovered : /akismet/v1/stats/(?P<interval>[\w+])
Invalid route.
Route discovered : /yoast/v1
Excluded route from excludedRoutes pattern.
Route discovered : /yoast/v1/configurator
Excluded route from excludedRoutes pattern.
Route discovered : /yoast/v1/reindex_posts
Excluded route from excludedRoutes pattern.
Route discovered : /yoast/v1/ryte
Excluded route from excludedRoutes pattern.
Route discovered : /yoast/v1/indexables/(?P<object_type>.*)/(?P<object_id>\d+)
Invalid route.
Route discovered : /yoast/v1/statistics
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2
Invalid route.
Route discovered : /wp/v2/posts
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/posts/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/posts/(?P<parent>[\d]+)/revisions
Invalid route.
Route discovered : /wp/v2/posts/(?P<parent>[\d]+)/revisions/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/pages
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/pages/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/pages/(?P<parent>[\d]+)/revisions
Invalid route.
Route discovered : /wp/v2/pages/(?P<parent>[\d]+)/revisions/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/media
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/media/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/types
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/types/(?P<type>[\w-]+)
Invalid route.
Route discovered : /wp/v2/statuses
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/statuses/(?P<status>[\w-]+)
Invalid route.
Route discovered : /wp/v2/taxonomies
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/taxonomies/(?P<taxonomy>[\w-]+)
Invalid route.
Route discovered : /wp/v2/categories
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/categories/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/tags
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/tags/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/users
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/users/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/users/me
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/comments
Excluded route from excludedRoutes pattern.
Route discovered : /wp/v2/comments/(?P<id>[\d]+)
Invalid route.
Route discovered : /wp/v2/settings
Excluded route from excludedRoutes pattern.

Fetching the JSON data from 0 valid API Routes...

=END PLUGIN=====================================: 1545.867ms
warning The gatsby-source-wordpress plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes — 1.576 s
success building schema — 0.240 s
success createLayouts — 0.051 s
⠁ [ { GraphQLError: Cannot query field "allWordpressPage" on type "RootQueryType". Did you mean "allSitePage"?
    at Object.Field (/Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:65:31)
    at Object.enter (/Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/language/visitor.js:295:29)
    at Object.enter (/Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/language/visitor.js:337:25)
    at visit (/Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/language/visitor.js:227:26)
    at visitUsingRules (/Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/validation/validate.js:75:22)
    at validate (/Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/validation/validate.js:60:10)
    at /Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/graphql.js:69:51
    at initializePromise (/Users/hadifarnoud/playground/new-landing-shop/node_modules/sw-precache/node_modules/es6-promise/dist/es6-promise.js:458:5)
    at new Promise (/Users/hadifarnoud/playground/new-landing-shop/node_modules/sw-precache/node_modules/es6-promise/dist/es6-promise.js:874:33)
    at graphqlImpl (/Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/graphql.js:59:10)
    at graphql (/Users/hadifarnoud/playground/new-landing-shop/node_modules/graphql/graphql.js:48:227)
    at graphqlRunner (/Users/hadifarnoud/playground/new-landing-shop/node_modules/gatsby/dist/bootstrap/index.js:368:22)
    at Promise (/Users/hadifarnoud/playground/new-landing-shop/gatsby-node.js:14:5)
    at Promise._execute (/Users/hadifarnoud/playground/new-landing-shop/node_modules/bluebird/js/release/debuggability.js:303:9)
    at Promise._resolveFromExecutor (/Users/hadifarnoud/playground/new-landing-shop/node_modules/bluebird/js/release/promise.js:483:18)
    at new Promise (/Users/hadifarnoud/playground/new-landing-shop/node_modules/bluebird/js/release/promise.js:79:10)
    at Object.exports.createPages (/Users/hadifarnoud/playground/new-landing-shop/gatsby-node.js:12:10)
    at runAPI (/Users/hadifarnoud/playground/new-landing-shop/node_modules/gatsby/dist/utils/api-runner-node.js:110:36)
    at /Users/hadifarnoud/playground/new-landing-shop/node_modules/gatsby/dist/utils/api-runner-node.js:187:33
    at /Users/hadifarnoud/playground/new-landing-shop/node_modules/async/internal/map.js:27:9
    at replenish (/Users/hadifarnoud/playground/new-landing-shop/node_modules/async/internal/eachOfLimit.js:66:17)
    at iterateeCallback (/Users/hadifarnoud/playground/new-landing-shop/node_modules/async/internal/eachOfLimit.js:50:17)
    message: 'Cannot query field "allWordpressPage" on type "RootQueryType". Did you mean "allSitePage"?',
    locations: [ [Object] ],
    path: undefined } ]
success createPages — 0.020 s
success createPagesStatefully — 0.038 s
success onPreExtractQueries — 0.001 s
success update schema — 0.112 s
GraphQL Error Unknown field `allWordpressPost` on type `RootQueryType`

  file: /Users/hadifarnoud/playground/new-landing-shop/src/pages/index.jsx

   1 |
   2 |   query IndexQuery {
>  3 |     allWordpressPost {
     |     ^
   4 |       edges {
   5 |         node {
   6 |           featured_media {
   7 |             source_url
   8 |           }
   9 |           author {
  10 |             name
  11 |             avatar_urls {
  12 |               wordpress_24
  13 |               wordpress_48

success extract queries from components — 0.137 s
success run graphql queries — 0.110 s
success write out page data — 0.010 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 6.802 s

 DONE  Compiled successfully in 4303ms                                                                                                              2:05:35 PM

You can now view gatsby-starter-advanced 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 gatsby build

Environment

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 9.11.1 - /usr/local/bin/node
    Yarn: 1.5.1 - /usr/local/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Safari: 11.1.1
  npmPackages:
    gatsby: ^1.9.149 => 1.9.277 
    gatsby-link: ^1.6.32 => 1.6.46 
    gatsby-plugin-catch-links: ^1.0.14 => 1.0.24 
    gatsby-plugin-feed: ^1.3.15 => 1.3.25 
    gatsby-plugin-google-analytics: ^1.0.14 => 1.0.31 
    gatsby-plugin-manifest: ^1.0.12 => 1.0.27 
    gatsby-plugin-nprogress: ^1.0.9 => 1.0.14 
    gatsby-plugin-offline: ^1.0.12 => 1.0.18 
    gatsby-plugin-react-helmet: ^2.0.3 => 2.0.11 
    gatsby-plugin-sharp: ^1.6.24 => 1.6.48 
    gatsby-plugin-sitemap: ^1.2.9 => 1.2.25 
    gatsby-plugin-styled-components: ^2.0.4 => 2.0.11 
    gatsby-plugin-twitter: ^1.0.14 => 1.0.20 
    gatsby-remark-autolink-headers: ^1.4.11 => 1.4.19 
    gatsby-remark-copy-linked-files: ^1.5.25 => 1.5.37 
    gatsby-remark-images: ^1.5.36 => 1.5.67 
    gatsby-remark-prismjs: ^1.2.11 => 1.2.24 
    gatsby-remark-responsive-iframe: ^1.4.16 => 1.4.20 
    gatsby-source-filesystem: ^1.5.11 => 1.5.39 
    gatsby-source-wordpress: ^2.0.42 => 2.0.93 
    gatsby-transformer-remark: ^1.7.26 => 1.7.44 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

const config = require('./data/SiteConfig')

const pathPrefix = config.pathPrefix === '/' ? '' : config.pathPrefix

module.exports = {
  pathPrefix: config.pathPrefix,
  siteMetadata: {
    siteUrl: config.siteUrl + pathPrefix,
    rssMetadata: {
      site_url: config.siteUrl + pathPrefix,
      feed_url: config.siteUrl + pathPrefix + config.siteRss,
      title: config.siteTitle,
      description: config.siteDescription,
      image_url: `${config.siteUrl + pathPrefix}/logos/logo-512.png`,
      author: config.userName,
      copyright: config.copyright
    }
  },
  plugins: [
    'gatsby-plugin-styled-components',
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        // The base url to your WP site.
        baseUrl: 'blog.kamva.ir',
        // WP.com sites set to true, WP.org set to false
        hostingWPCOM: false,
        // The protocol. This can be http or https.
        protocol: 'http',
        // Use 'Advanced Custom Fields' Wordpress plugin
        useACF: false,
        auth: {},
        // Set to true to debug endpoints on 'gatsby build'
        verboseOutput: true,
        perPage: 10,
        concurrentRequests: 10,
        excludedRoutes: ["/*/*/comments", "/yoast/**", "/akismet/**", "/oembed/**", "/wp/v2/**"],
      }
    },
    {
      resolve: 'gatsby-plugin-nprogress',
      options: {
        color: config.themeColor
      }
    },
    'gatsby-plugin-sharp',
    'gatsby-plugin-catch-links',
    'gatsby-plugin-twitter',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: config.siteTitle,
        short_name: config.siteTitle,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: 'minimal-ui',
        icons: [
          {
            src: '/logos/logo-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/logos/logo-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    },
    'gatsby-plugin-offline'
  ]
}
pieh commented 6 years ago

In your config you have excludedRoutes: ["/*/*/comments", "/yoast/**", "/akismet/**", "/oembed/**", "/wp/v2/**"],. This "/wp/v2/**" will cause not fetching any wordpress endpoints - try removing that

hadifarnoud commented 6 years ago

@pieh I did not have them excluded before. I was trying to fix the errors so I added this. I get this error without having /wp/v2/**

GraphQL Error Field "author" must not have a selection since type "Int" has no subfields.

  file: /Users/hadifarnoud/playground/new-landing-shop/src/pages/index.jsx

   1 |
   2 |   query IndexQuery {
   3 |     allWordpressPost {
   4 |       edges {
   5 |         node {
   6 |           featured_media {
   7 |             source_url
   8 |           }
>  9 |           author {
     |                  ^
  10 |             name
  11 |             avatar_urls {
  12 |               wordpress_24
  13 |               wordpress_48
  14 |               wordpress_96
  15 |             }
  16 |           }
  17 |           date
  18 |           slug
  19 |           title

As I explained in the issue, removing author won't help

pieh commented 6 years ago

I reproduced this locally and this comes from this:

=== [ Fetching wordpress__wp_users ] === http://blog.kamva.ir/wp-json/wp/v2/users
⠄ source and transform nodesThe server response was "401 Unauthorized"
Inner exception message : "متاسفانه شما اجازه‌ی مرور کاربران را ندارید."
Fetching the wordpress__wp_users took: 279.523ms

(translation of error message - "Sorry, you do not have permission to browse users.")

We don't have access to list of users so we can't expand author field into object leaving user_id (Int) in schema.

To get that list I think we would need to authenticate. @sebastienfi Do You have any experience with this?

octalmage commented 6 years ago

It's probably a WordPress plugin that is blocking access to enumerating users. Some believe it's a security concern. The default for WordPress is to make users public:

https://json.wpengine.com/wp-json/wp/v2/users

The easiest solution would be to find the plugin blocking access to the users endpoint and disabling it.

You might be able to use a WP REST API basic auth plugin to put the endpoint behind auth and configure gatsby-source-wordpress to use those creds, but I don't have any experience with this.

drhitchcockco commented 6 years ago

The WordFence security plugin was blocking this for me. I unchecked the option: Prevent discovery of usernames through '/?author=N' scans, the oEmbed API, and the WordPress REST API

hadifarnoud commented 6 years ago

still can't get this to work even though useACF: false,

GraphQL Error Unknown field `acf` on type `wordpress__POST`

  file: /Users/hadifarnoud/playground/new-landing-shop/src/pages/index.jsx

  13 |               wordpress_48
  14 |               wordpress_96
  15 |             }
  16 |           }
  17 |           date
  18 |           slug
  19 |           title
  20 |           modified
  21 |           excerpt
  22 |           id
> 23 |           acf {
     |           ^
  24 |             project
  25 |             date
  26 |           }
  27 |           categories {
  28 |             name
  29 |           }
  30 |           tags {
  31 |             name
  32 |           }
  33 |           content

success extract queries from components — 0.162 s
success run graphql queries — 0.020 s
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.002 s

info bootstrap finished - 88.913 s

 DONE  Compiled successfully in 6369ms                                                                                     17:34:15
octalmage commented 6 years ago

Did you get this working? Looks like you need to remove the acf keys from your query in src/pages/index.jsx.

sebastienfi commented 6 years ago

You need to attach an ACF field to post type "post" in ACF, and the WordPress plugin acf-to-rest-api. Or remove the ACF field in your query as suggested.

hadifarnoud commented 6 years ago

if I remove acf from all queries, it throws these errors:

×
TypeError: Cannot read property 'date' of undefined
(anonymous function)
src/components/Posts/PostListing/PostListing.jsx:13
  10 | path: postEdge.node.slug,
  11 | cover: postEdge.node.cover,
  12 | title: postEdge.node.title,
> 13 | date: postEdge.node.acf.date,
  14 | excerpt: postEdge.node.excerpt,
  15 | mainCategory: postEdge.node.categories[0].name,
  16 | project: postEdge.node.acf.project,
View compiled
PostListing.getPostList
src/components/Posts/PostListing/PostListing.jsx:8
   5 | class PostListing extends React.Component {
   6 |   getPostList() {
   7 |     const postList = []
>  8 |     this.props.postEdges.forEach(postEdge => {
   9 |       postList.push({
  10 |         path: postEdge.node.slug,
  11 |         cover: postEdge.node.cover,
View compiled
PostListing.getPostList
node_modules/react-proxy/modules/createPrototypeProxy.js:44
PostListing.render
src/components/Posts/PostListing/PostListing.jsx:29
  26 | }
  27 | 
  28 | render() {
> 29 |   const postList = this.getPostList()
  30 |   return (
  31 |     <div>
  32 |       {/* Your post list here. */
View compiled
▶ 45 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
hadifarnoud commented 6 years ago

I think this starter kit should work for standard Wordpress installation out of the box. If I have to go through all these to manage to get it to work, what's the point?

kilinkis commented 6 years ago

I got the same error. It feels like Gatsby + WP is not there yet.

chmac commented 6 years ago

@hadifarnoud @kilinkis Unfortunately there were some fairly simple issues like this with the Gatsby WordPress starter. It's a community starter, not officially part of Gatsby. We've taken over maintenance and have fixed most of the issues you've hit above. We've removed the acf requirements.

There are several different problems being discussed in this issue.

I'm going to close this issue now assuming these problems have been fixed, but please reopen the issue if not, or feel free to create a new issue here or on the starter repo and we'll do our best to help.

sebastienfi commented 6 years ago

@hadifarnoud @kilinkis We welcome your help to create a starter kit for WordPress and Gatsby without ACF. Please create a PR. A good starting point would be to remove all mentions to ACF in the starter kit using-wordpress and publish using-wordpress-raw in the main repo!

chmac commented 6 years ago

@sebastienfi @hadifarnoud @kilinkis Just yesterday we started working on a Gatsby v2 WordPress starter. It doesn't have any reliance on ACF or other stuff. It's based on the Netlify CMS starter but ported to WordPress. Right now posts, categories, tags, and pages work. You can check it out here.

kilinkis commented 6 years ago

Thank you @chmac I'll check it ASAP!

zilahir commented 5 years ago

Take of your env.*. The API needs to authorise. In my case the problem was that I only had .env.development, and the token, and other stuff was not provided for prod build.

Good luck!

louiechristie commented 5 years ago

I've created PR #17317 to update the documentation to recommend using the starter recommended by @chmac - gatsby-starter-wordpress - to work around this issue.

chokeul8r commented 5 years ago

Wasted a whole day trying to make it work on XAMPP. I could easily play with the WP api using postman but gatsby-source-wordpress was not interested.

Searching Google for an answer wasn't really helpful either.

I like the idea. I love Gatsby and I like Wordpress...but I am not good enough at this to figure out how to fix a vexing problem on my own and there doesn't seem to be much support online either.

I'll check back in a year or so.