From d03f29643dca80b91d852a8da0c4fed336b27dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Fichot?= Date: Wed, 16 Aug 2017 10:06:41 +0200 Subject: [PATCH] Bugfix : gatsby-source-wordpress giving invalid node names to GraphQL (#1778) * Bugfix : node undefined Modified regex validating node names. https://github.com/gatsbyjs/gatsby/issues/1774 This could be in cause, we surely need a better validation of names from GraphQL because `/^[_a-zA-Z][_a-zA-Z0-9]*$/` see as valid some names that will break later on : https://github.com/graphql/graphql-js/pull/632 `building schemaName "__jetpack_v4" must not begin with "__", which is reserved by GraphQL introspection. In a future release of graphql this will become a hard error.` * Removed unecessary stuff from example site --- .../using-wordpress/src/templates/post.js | 37 ++-- .../src/gatsby-node.js | 170 +++++++++--------- 2 files changed, 100 insertions(+), 107 deletions(-) diff --git a/examples/using-wordpress/src/templates/post.js b/examples/using-wordpress/src/templates/post.js index 32db237b6f9b1..2d6254f538c66 100644 --- a/examples/using-wordpress/src/templates/post.js +++ b/examples/using-wordpress/src/templates/post.js @@ -1,15 +1,17 @@ -import React from "react" +import React, { Component } from "react" +import PropTypes from "prop-types" + import Helmet from "react-helmet" import Header from "../components/Header" import Footer from "../components/Footer" import { H1, Row, Page, Column } from "../components/styled" -class PostTemplate extends React.Component { +class PostTemplate extends Component { render() { - const post = this.props.data.wordpressPost + // console.log(`this.props is`, this.props) + const post = this.props.data.wordpressPost const wordpressPages = this.props.data.allWordpressPage - const siteMetadata = this.props.data.site.siteMetadata return ( @@ -39,6 +41,11 @@ class PostTemplate extends React.Component { } // +PostTemplate.propTypes = { + data: PropTypes.object.isRequired, + edges: PropTypes.array, +} + export default PostTemplate export const pageQuery = graphql` @@ -111,28 +118,6 @@ export const pageQuery = graphql` } } } - allWordpressTag { - edges { - node { - id - slug - description - name - taxonomy - } - } - } - allWordpressCategory { - edges { - node { - id - description - name - slug - taxonomy - } - } - } site { id siteMetadata { diff --git a/packages/gatsby-source-wordpress/src/gatsby-node.js b/packages/gatsby-source-wordpress/src/gatsby-node.js index bae66ce509a2a..19909ffa64dee 100644 --- a/packages/gatsby-source-wordpress/src/gatsby-node.js +++ b/packages/gatsby-source-wordpress/src/gatsby-node.js @@ -68,44 +68,51 @@ exports.sourceNodes = async ( url = `${_siteURL}/wp-json` } - console.log() - console.log( - colorized.out( - `=START PLUGIN=====================================`, - colorized.color.Font.FgBlue + if (_verbose) console.log() + if (_verbose) + console.log( + colorized.out( + `=START PLUGIN=====================================`, + colorized.color.Font.FgBlue + ) ) - ) - console.time(`=END PLUGIN=====================================`) - console.log(``) - console.log( - colorized.out(`Site URL: ${_siteURL}`, colorized.color.Font.FgBlue) - ) - console.log( - colorized.out( - `Site hosted on Wordpress.com: ${hostingWPCOM}`, - colorized.color.Font.FgBlue + if (_verbose) console.time(`=END PLUGIN=====================================`) + if (_verbose) console.log(``) + if (_verbose) + console.log( + colorized.out(`Site URL: ${_siteURL}`, colorized.color.Font.FgBlue) ) - ) - console.log( - colorized.out(`Using ACF: ${useACF}`, colorized.color.Font.FgBlue) - ) - console.log( - colorized.out( - `Using Auth: ${_auth.htaccess_user} ${_auth.htaccess_pass}`, - colorized.color.Font.FgBlue + if (_verbose) + console.log( + colorized.out( + `Site hosted on Wordpress.com: ${hostingWPCOM}`, + colorized.color.Font.FgBlue + ) ) - ) - console.log( - colorized.out( - `Verbose output: ${verboseOutput}`, - colorized.color.Font.FgBlue + if (_verbose) + console.log( + colorized.out(`Using ACF: ${useACF}`, colorized.color.Font.FgBlue) ) - ) - console.log(``) - console.log( - colorized.out(`Mama Route URL: ${url}`, colorized.color.Font.FgBlue) - ) - console.log(``) + if (_verbose) + console.log( + colorized.out( + `Using Auth: ${_auth.htaccess_user} ${_auth.htaccess_pass}`, + colorized.color.Font.FgBlue + ) + ) + if (_verbose) + console.log( + colorized.out( + `Verbose output: ${verboseOutput}`, + colorized.color.Font.FgBlue + ) + ) + if (_verbose) console.log(``) + if (_verbose) + console.log( + colorized.out(`Mama Route URL: ${url}`, colorized.color.Font.FgBlue) + ) + if (_verbose) console.log(``) // Touch existing Wordpress nodes so Gatsby doesn`t garbage collect them. _.values(store.getState().nodes) @@ -136,18 +143,19 @@ exports.sourceNodes = async ( if (allRoutes) { let validRoutes = getValidRoutes(allRoutes, url, baseUrl) - console.log(``) - console.log( - colorized.out( - `Fetching the JSON data from ${validRoutes.length} valid API Routes...`, - colorized.color.Font.FgBlue + if (_verbose) console.log(``) + if (_verbose) + console.log( + colorized.out( + `Fetching the JSON data from ${validRoutes.length} valid API Routes...`, + colorized.color.Font.FgBlue + ) ) - ) - console.log(``) + if (_verbose) console.log(``) for (let route of validRoutes) { await fetchData(route, createNode) - console.log(``) + if (_verbose) console.log(``) } for (let item of _parentChildNodes) { @@ -163,7 +171,8 @@ exports.sourceNodes = async ( }, }) - console.timeEnd(`=END PLUGIN=====================================`) + if (_verbose) + console.timeEnd(`=END PLUGIN=====================================`) } else { console.log( colorized.out(`No routes to fetch. Ending.`, colorized.color.Font.FgRed) @@ -280,19 +289,21 @@ async function getWPCOMAccessToken() { */ function httpExceptionHandler(e) { const { status, statusText, data: { message } } = e.response - console.log( - colorized.out( - `The server response was "${status} ${statusText}"`, - colorized.color.Font.FgRed - ) - ) - if (message) { + if (_verbose) console.log( colorized.out( - `Inner exception message : "${message}"`, + `The server response was "${status} ${statusText}"`, colorized.color.Font.FgRed ) ) + if (message) { + if (_verbose) + console.log( + colorized.out( + `Inner exception message : "${message}"`, + colorized.color.Font.FgRed + ) + ) } } @@ -389,12 +400,13 @@ function getValidRoutes(allRoutes, url, baseUrl) { ) if (_hostingWPCOM) { // TODO : Need to test that out with ACF on Wordpress.com hosted site. Need a premium account on wp.com to install extensions. - console.log( - colorized.out( - `The ACF options pages is untested under wordpress.com hosting. Please let me know if it works.`, - colorized.color.Effect.Blink + if (_verbose) + console.log( + colorized.out( + `The ACF options pages is untested under wordpress.com hosting. Please let me know if it works.`, + colorized.color.Effect.Blink + ) ) - ) } } @@ -432,18 +444,20 @@ async function fetchData(route, createNode, parentNodeId) { const url = route.url if (parentNodeId != undefined) { - console.log( - colorized.out(`Extended node content`, colorized.color.Font.FgBlue), - url - ) + if (_verbose) + console.log( + colorized.out(`Extended node content`, colorized.color.Font.FgBlue), + url + ) } else { - console.log( - colorized.out( - `=== [ Fetching ${type} ] ===`, - colorized.color.Font.FgBlue - ), - url - ) + if (_verbose) + console.log( + colorized.out( + `=== [ Fetching ${type} ] ===`, + colorized.color.Font.FgBlue + ), + url + ) if (_verbose) console.time(`Fetching the ${type} took`) } @@ -467,7 +481,10 @@ async function fetchData(route, createNode, parentNodeId) { length = Object.keys(routeResponse).length } console.log( - colorized.out(`${type} fetched : ${length}`, colorized.color.Font.FgGreen) + colorized.out( + ` -> ${type} fetched : ${length}`, + colorized.color.Font.FgGreen + ) ) } @@ -498,9 +515,7 @@ function createGraphQLNode(ent, type, createNode, parentNodeId) { children: [], parent: `__SOURCE__`, internal: { - type: type.toUpperCase(), - content: JSON.stringify(node), - mediaType: `text/html`, + type: type, }, } @@ -530,6 +545,7 @@ function createGraphQLNode(ent, type, createNode, parentNodeId) { node.excerpt = ent.excerpt.rendered } + node.internal.content = JSON.stringify(node) node.internal.contentDigest = digest(stringify(node)) createNode(node) @@ -559,7 +575,6 @@ function addFields(ent, newEnt, createNode) { internal: { type: `${typePrefix}ACF_Field`, content: JSON.stringify(ent.acf), - mediaType: `application/json`, }, } acfNode.internal.contentDigest = digest(stringify(acfNode)) @@ -616,8 +631,8 @@ function recursiveAddFields(ent, newEnt) { function getValidName(key) { let nkey = key const NAME_RX = /^[_a-zA-Z][_a-zA-Z0-9]*$/ - if (!NAME_RX.test(nkey)) { - nkey = `_${nkey}`.replace(/-/g, `_`).replace(/:/g, `_`) + if (!NAME_RX.test(nkey) || restrictedNodeFields.includes(nkey)) { + nkey = `${conflictFieldPrefix}${nkey}`.replace(/-|__|:|\.|\s/g, `_`) if (_verbose) console.log( colorized.out( @@ -626,12 +641,5 @@ function getValidName(key) { ) ) } - if (restrictedNodeFields.includes(nkey)) { - if (_verbose) - console.log( - `Restricted field found for ${nkey}. Prefixing with ${conflictFieldPrefix}.` - ) - nkey = `${conflictFieldPrefix}${nkey}` - } return nkey }