From f7a5a350bf0f67137d9535d945b8c1bc3600a2c6 Mon Sep 17 00:00:00 2001 From: Dylan Tackoor Date: Fri, 15 Feb 2019 13:06:44 -0500 Subject: [PATCH] docs(gatsby-source-wordpress): Remove lodash + bluebird + fix Promise hell (#11739) ## Description This commit: - Removes lodash in favor of Array.forEach - Bluebird in favor of the native Promise object - Avoids nested thenables by using Promise.all() I've been using this code in my builds and it's been working fine for whatever that worth :) --- packages/gatsby-source-wordpress/README.md | 163 +++++++++------------ 1 file changed, 71 insertions(+), 92 deletions(-) diff --git a/packages/gatsby-source-wordpress/README.md b/packages/gatsby-source-wordpress/README.md index eb60b379c5ff2..cd17ae3cd5586 100644 --- a/packages/gatsby-source-wordpress/README.md +++ b/packages/gatsby-source-wordpress/README.md @@ -728,8 +728,6 @@ and also your `wordpress-source-plugin` options from `gatsby-config.js`. To lear ## Site's `gatsby-node.js` example ```javascript -const _ = require(`lodash`) -const Promise = require(`bluebird`) const path = require(`path`) const slash = require(`slash`) @@ -739,101 +737,82 @@ const slash = require(`slash`) // create pages. // Will create pages for WordPress pages (route : /{slug}) // Will create pages for WordPress posts (route : /post/{slug}) -exports.createPages = ({ graphql, actions }) => { +exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions - return new Promise((resolve, reject) => { - // The “graphql” function allows us to run arbitrary - // queries against the local WordPress graphql schema. Think of - // it like the site has a built-in database constructed - // from the fetched data that you can run queries against. - - // ==== PAGES (WORDPRESS NATIVE) ==== - graphql( - ` - { - allWordpressPage { - edges { - node { - id - slug - status - template - } - } + + // The “graphql” function allows us to run arbitrary + // queries against the local WordPress graphql schema. Think of + // it like the site has a built-in database constructed + // from the fetched data that you can run queries against. + const result = await graphql(` + { + allWordpressPage { + edges { + node { + id + link + status + template } } - ` - ) - .then(result => { - if (result.errors) { - console.log(result.errors) - reject(result.errors) + } + allWordpressPost { + edges { + node { + id + link + status + template + format + } } + } + } + `) - // Create Page pages. - const pageTemplate = path.resolve("./src/templates/page.js") - // We want to create a detailed page for each - // page node. We'll just use the WordPress Slug for the slug. - // The Page ID is prefixed with 'PAGE_' - _.each(result.data.allWordpressPage.edges, edge => { - // Gatsby uses Redux to manage its internal state. - // Plugins and sites can use functions like "createPage" - // to interact with Gatsby. - createPage({ - // Each page is required to have a `path` as well - // as a template component. The `context` is - // optional but is often necessary so the template - // can query data specific to each page. - path: `/${edge.node.slug}/`, - component: slash(pageTemplate), - context: { - id: edge.node.id, - }, - }) - }) - }) - // ==== END PAGES ==== - - // ==== POSTS (WORDPRESS NATIVE AND ACF) ==== - .then(() => { - graphql( - ` - { - allWordpressPost { - edges { - node { - id - slug - status - template - format - } - } - } - } - ` - ).then(result => { - if (result.errors) { - console.log(result.errors) - reject(result.errors) - } - const postTemplate = path.resolve("./src/templates/post.js") - // We want to create a detailed page for each - // post node. We'll just use the WordPress Slug for the slug. - // The Post ID is prefixed with 'POST_' - _.each(result.data.allWordpressPost.edges, edge => { - createPage({ - path: `/${edge.node.slug}/`, - component: slash(postTemplate), - context: { - id: edge.node.id, - }, - }) - }) - resolve() - }) - }) - // ==== END POSTS ==== + // Check for any errors + if (result.errors) { + throw new Error(result.errors) + } + + // Access query results via object destructuring + const { allWordpressPage, allWordpressPost } = result.data + + // Create Page pages. + const pageTemplate = path.resolve(`./src/templates/page.js`) + // We want to create a detailed page for each + // page node. We'll just use the WordPress Slug for the slug. + // The Page ID is prefixed with 'PAGE_' + allWordpressPage.edges.forEach(edge => { + // Gatsby uses Redux to manage its internal state. + // Plugins and sites can use functions like "createPage" + // to interact with Gatsby. + createPage({ + // Each page is required to have a `path` as well + // as a template component. The `context` is + // optional but is often necessary so the template + // can query data specific to each page. + path: `/${edge.node.slug}/`, + component: slash(pageTemplate), + context: { + id: edge.node.id, + }, + }) + }) + + // Create Post pages + const postTemplate = path.resolve(`./src/templates/post.js`) + // We want to create a detailed page for each + // post node. We'll just use the WordPress Slug for the slug. + // The Post ID is prefixed with 'POST_' + allWordpressPost.edges.forEach(edge => { + createPage({ + path: `/${edge.node.slug}/`, + component: slash(postTemplate), + context: { + id: edge.node.id, + }, + }) }) } ```