wp-graphql-jwt-authentication icon indicating copy to clipboard operation
wp-graphql-jwt-authentication copied to clipboard

Published 20 hours ago • verified publisher icon wp-graphql

Activating the plugin breaks gatsby-source-wordpress plugin

Open kepi0809 opened this issue 5 years ago • 9 comments

adding this plugin breaks the build and develop via the gatsby-source-wordpress plugin. I have already a JWT Authentication but it didn't seem to work with graphql that's why I wanted to try with this.

Error message it causes to the plugin:

ERROR 

Plugin gatsby-source-wordpress returned an error Cannot read property 'id' of undefined



  TypeError: Cannot read property 'id' of undefined
  
  - normalize.js:247 e.categories___NODE.e.categories.map.c
    /Users/.../gatsby-folder/plugins/gatsby-source-wordpress/normalize.js:247:13
  
  - Array.map
  
  - normalize.js:244 entities.map.e 
    /Users/.../gatsby-folder/plugins/gatsby-source-wordpress/normalize.js:244:42
  
  - Array.map
  
  - normalize.js:231 Object.exports.mapPostsToTagsCategories.entities [as mapPostsToTagsCategories]
    /Users/.../gatsby-folder/plugins/gatsby-source-wordpress/normalize.js:231:19
  
  - gatsby-node.js:108 Object.exports.sourceNodes
   /Users/.../gatsby-folder/plugins/gatsby-source-wordpress/gatsby-node.js:108:24
  
  - task_queues.js:86 processTicksAndRejections
    internal/process/task_queues.js:86:5
  

warn The gatsby-source-wordpress plugin has generated no Gatsby nodes.

kepi0809 avatar Oct 22 '19 10:10 kepi0809

@kepi0809 if you're using gatsby-source-wordpress that means Gatsby is using the WordPress REST API, and not WPGraphQL.

If you're using WPGraphQL, then you want to use gatsby-source-graphql or gatsby-source-graphql-universal as those will allow you to source content from the WPGraphQL API and this plugin (WPGraphQL JWT Auth) is meant to be used with WPGraphQL, not the WP REST API

jasonbahl avatar Oct 22 '19 14:10 jasonbahl

@kepi0809 additionally if there is some reason you have to use both (like a site already built with gatsby-source-wordpress), I'd recommend opening an issue on the Gatsby repo. This PR that was merged this morning may also fix the issue for you https://github.com/gatsbyjs/gatsby/pull/18895. It looks like a new release of Gatsby hasn't been published yet, but we're publishing often.

TylerBarnes avatar Oct 22 '19 16:10 TylerBarnes

@kepi0809 if you're using gatsby-source-wordpress that means Gatsby is using the WordPress REST API, and not WPGraphQL.

If you're using WPGraphQL, then you want to use gatsby-source-graphql or gatsby-source-graphql-universal as those will allow you to source content from the WPGraphQL API and this plugin (WPGraphQL JWT Auth) is meant to be used with WPGraphQL, not the WP REST API

@TylerBarnes assumed it right, I'm kinda migrating a gatsby-source-wordpress repo into gatsby-source-graphql and it would've been good to be able to make small changes and not break the whole thing. But in the end it will be the same anyways.

I'll check that update of gatsby-source-wordpress it will probably fix my issue, thank you! ❤️

EDIT:

I've updated my plugin it indeed gives different errors now, but still doesn't work as it's supposed to be working. The categories are nulled and that causes my gatsby-node to crash. Again if I disable the wp-graphql-jwt-authentication WP-Plugin everything works as it had been working before

kepi0809 avatar Oct 23 '19 07:10 kepi0809

@kepi0809 can you provide details on how to replicate your environment so we can dig in a bit further here?

Like a link to your Gatsby codebase repo would be helpful, and details on what plugins (and their versions) you have active in WordPress would be helpful.

jasonbahl avatar Oct 23 '19 15:10 jasonbahl

Sorry I couldn't find the time to make a reproduce but I'll try to do it this week the active plugins:

  1. acf to rest api – Version 3.1.0 | By Aires Gonçalves
  2. Advanced Custom Fields – Version 5.8.6 | By Elliot Condon
  3. Enable Media Replace – Version 3.3.6 | By ShortPixel
  4. FirePHP / Firebug PHP Integration – Version 1.0.0 | By Evalds Urtans
  5. Regenerate Thumbnails – Version 3.1.1 | By Alex Mills
  6. WP GraphiQL – Version 1.0.0 | By WPGraphQL
  7. WP GraphQL – Version 0.3.3 | By WPGraphQL
  8. WP REST API Controller – Version 2.0.3 | By YIKES, Inc.
  9. WP REST API Menus – Version 1.3.1 | By Fulvio Notarstefano
  10. WPGraphQL for Advanced Custom Fields – Version 0.2.1 | By WPGraphQL, Jason Bahl
  11. WPGraphQL JWT Authentication – Version 0.3.3 | By WPGraphQL, Jason Bahl

EDIT:

Forgot to mention that it is a WordPress Multisite, there are often issues with it (btw wouldn't recommend anybody using multisite). Could it be the root of the issue?

kepi0809 avatar Oct 28 '19 11:10 kepi0809

@kepi0809 do you have a Gatsby repo as well so I can replicate on the Gatsby side?

jasonbahl avatar Oct 29 '19 14:10 jasonbahl

gatsby-config.js:

const postcssPresetEnv = require('postcss-preset-env')
const tailwindcss = require('tailwindcss')
const postcssSimpleVars = require('postcss-simple-vars')

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
  pathPrefix: process.env.PREFIX,
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-plugin-postcss',
      options: {
        postCssPlugins: [
          postcssPresetEnv({ stage: 0 }),
          tailwindcss('./tailwind.js'),
          postcssSimpleVars,
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-purgecss',
      options: {
        printRejected: true,
        // develop: true, // Enable while using `gatsby develop`
        tailwind: true,
        purgeOnly: ['src/styles/global.css'],
      },
    },

    // {
    //   resolve: 'gatsby-source-wordpress',
    //   options: {
    //     baseUrl: process.env.baseUrl,
    //     hostingWPCOM: false,
    //     protocol: 'https',
    //     useACF: false,
    //     cookies: {
    //       pagely_dev_mode: '1',
    //     },
    //     includedRoutes: ['**/media', '**/post'],
    //     // verboseOutput: true, // Set to true to debug endpoints on 'gatsby build'
    //   },
    // },
    {
      resolve: `gatsby-plugin-google-tagmanager`,
      options: {
        id: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
        includeInDevelopment: false,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-graphql',
      options: {
        typeName: 'WPGraphQL',
        fieldName: 'wpgraphql',
        url: `${process.env.WP_URL}/graphql`,
        refetchInterval: 20,
        // headers: {
        //   Authorization: `Bearer ${process.env.JWT_TOKEN}`,
        // }, // https://gist.github.com/yusinto/30bba51b6f903c1b67e0383f4a288269
      },
    },
    'gatsby-plugin-offline',
  ],
}

package.json:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-brands-svg-icons": "^5.7.2",
    "@fortawesome/pro-light-svg-icons": "^5.7.2",
    "@fortawesome/pro-regular-svg-icons": "^5.7.2",
    "@fortawesome/pro-solid-svg-icons": "^5.7.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.2.1",
    "@welldone-software/why-did-you-render": "^3.0.6",
    "axios": "^0.19.0",
    "date-fns": "^2.6.0",
    "gatsby": "2.17.2",
    "gatsby-awesome-pagination": "^0.3.4",
    "gatsby-image": "^2.2.29",
    "gatsby-plugin-feed": "2.3.2",
    "gatsby-plugin-google-tagmanager": "^2.0.13",
    "gatsby-plugin-lodash": "^3.0.5",
    "gatsby-plugin-manifest": "^2.2.0",
    "gatsby-plugin-offline": "2.2.9",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.2.32",
    "gatsby-source-filesystem": "^2.1.33",
    "gatsby-source-graphql": "^2.1.20",
    "gatsby-transformer-sharp": "^2.3.0",
    "he": "^1.2.0",
    "html-react-parser": "^0.6.1",
    "lodash": "^4.17.11",
    "node-sass": "^4.9.2",
    "parcel-bundler": "^1.9.4",
    "photoswipe": "^4.1.3",
    "popper.js": "^1.15.0",
    "react": "^16.8.6",
    "react-dom": "^16.4.1",
    "react-facebook": "^8.0.4",
    "react-helmet": "^5.2.0",
    "react-instagram-embed": "^1.5.0",
    "react-new-window": "^0.0.12",
    "react-twitter-embed": "^2.0.7",
    "react-youtube": "^7.9.0",
    "reading-time": "^1.2.0",
    "uuid": "^3.2.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "UNLICENSED",
  "scripts": {
    "start": "npm run develop",
    "clean": "gatsby clean",
    "build": "gatsby build --prefix-paths",
    "build-without-prefix": "gatsby build",
    "lint": "eslint src",
    "stylelint": "stylelint \"src/**/*.{css,scss}\" --config ./stylelint.config.js --fix",
    "stylelint:lint": "stylelint \"src/**/*.{css,scss}\"",
    "eslint-fix": "eslint --fix",
    "dev": "gatsby develop",
    "dev-clean": "npm run clean && gatsby develop",
    "precommit": "lint-staged",
    "serve": "gatsby serve",
    "format": "prettier --config ./.prettierrc.js --write 'src/**/*.{js,jsx}'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve-preview": "NODE_ENV=development gatsby develop --host 0.0.0.0 --p $PORT",
    "heroku-postbuild": "echo 'not running build on heroku'"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-pro": "^5.7.2",
    "babel-eslint": "^10.0.1",
    "cross-env": "5.2.x",
    "eslint": "^5.13.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.2",
    "eslint-plugin-react-hooks": "^1.6.1",
    "fbjs": "^1.0.0",
    "gatsby-plugin-postcss": "^2.0.7",
    "gatsby-plugin-purgecss": "^3.1.1",
    "husky": "^3.0.0",
    "lint-staged": "8.1.x",
    "npm-run-all": "4.1.x",
    "object-assign": "^4.1.1",
    "postcss-import": "^12.0.1",
    "postcss-preset-env": "^6.5.0",
    "postcss-simple-vars": "^5.0.1",
    "prettier": "^1.17.1",
    "rimraf": "^2.6.2",
    "stylelint": "10.0.x",
    "stylelint-config-css-modules": "1.4.x",
    "stylelint-config-prettier": "5.0.x",
    "stylelint-config-recess-order": "2.0.x",
    "stylelint-config-standard": "18.3.x",
    "stylelint-scss": "3.6.x",
    "tailwindcss": "^0.7.4",
    "webpack": "^4.31.0"
  },
  "lint-staged": {
    "*.js": [
      "yarn eslint-fix",
      "yarn format",
      "git add"
    ],
    "package.json": [
      "yarn format",
      "git add"
    ],
    "*.css": [
      "yarn stylelint",
      "yarn format",
      "git add"
    ]
  }

kepi0809 avatar Oct 29 '19 15:10 kepi0809

Hi @kepi0809

I'm wondering how present this issue is, as I'm trying to clean up all the issues in this repo to manage priorities?

henrikwirth avatar Feb 13 '20 23:02 henrikwirth

Hi @henrikwirth

Since I'm not working on that project anymore I can't really confirm that the issue still persist with the newest versions of all the plugins above. If you can't reproduce the issue yourselves, then I could ask them to test it again

kepi0809 avatar Feb 14 '20 07:02 kepi0809