fix(examples): Update using-contentful to use gatsby-plugin-image (#29526)

* refactor(createPages): async syntax and await all createPage calls

* fix(using-contentful): replace old gatsby-image fragments

* refactor(using-contentful): use gatsby-plugin-image instead of gatsby-image

* fixup! refactor(using-contentful): use gatsby-plugin-image instead of gatsby-image

Author: axe312ger

examples/using-contentful/gatsby-config.js

@@ -3,6 +3,7 @@ module.exports = {
     title: `Gatsby with Contentful`,
   },
   plugins: [
+    `gatsby-plugin-image`,
     {
       resolve: `gatsby-source-contentful`,
       options: {

examples/using-contentful/gatsby-node.js

@@ -1,18 +1,17 @@
-const _ = require(`lodash`)
 const path = require(`path`)
 const { slash } = require(`gatsby-core-utils`)
 
 // Implement the Gatsby API “createPages”. This is
 // called after the Gatsby bootstrap is finished so you have
 // access to any information necessary to programmatically
 // create pages.
-exports.createPages = ({ graphql, actions }) => {
+exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions
   // The “graphql” function allows us to run arbitrary
   // queries against the local Contentful graphql schema. Think of
   // it like the site has a built-in database constructed
   // from the fetched data that you can run queries against.
-  return graphql(
+  const pageResult = await graphql(
     `
       {
         allContentfulProduct(limit: 1000) {
@@ -25,70 +24,74 @@ exports.createPages = ({ graphql, actions }) => {
       }
     `
   )
-    .then(result => {
-      if (result.errors) {
-        throw result.errors
-      }
 
-      // Create Product pages
-      const productTemplate = path.resolve(`./src/templates/product.js`)
-      // We want to create a detailed page for each
-      // product node. We'll just use the Contentful id for the slug.
-      _.each(result.data.allContentfulProduct.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: `/products/${edge.node.id}/`,
-          component: slash(productTemplate),
-          context: {
-            id: edge.node.id,
-          },
-        })
+  if (pageResult.errors) {
+    throw pageResult.errors
+  }
+
+  // Create Product pages
+  const productTemplate = path.resolve(`./src/templates/product.js`)
+
+  // We want to create a detailed page for each
+  // product node. We'll just use the Contentful id for the slug.
+  await Promise.all(
+    pageResult.data.allContentfulProduct.edges.map(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: `/products/${edge.node.id}/`,
+        component: slash(productTemplate),
+        context: {
+          id: edge.node.id,
+        },
       })
-    })
-    .then(() => {
-      graphql(
-        `
-          {
-            allContentfulCategory(limit: 1000) {
-              edges {
-                node {
-                  id
-                }
-              }
+    )
+  )
+
+  const categoryResult = await graphql(
+    `
+      {
+        allContentfulCategory(limit: 1000) {
+          edges {
+            node {
+              id
             }
           }
-        `
-      ).then(result => {
-        if (result.errors) {
-          throw result.errors
         }
+      }
+    `
+  )
+
+  if (categoryResult.errors) {
+    throw categoryResult.errors
+  }
 
-        // Create Category pages
-        const categoryTemplate = path.resolve(`./src/templates/category.js`)
-        // We want to create a detailed page for each
-        // category node. We'll just use the Contentful id for the slug.
-        _.each(result.data.allContentfulCategory.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: `/categories/${edge.node.id}/`,
-            component: slash(categoryTemplate),
-            context: {
-              id: edge.node.id,
-            },
-          })
-        })
+  // Create Category pages
+  const categoryTemplate = path.resolve(`./src/templates/category.js`)
+
+  // We want to create a detailed page for each
+  // category node. We'll just use the Contentful id for the slug.
+  return Promise.all(
+    categoryResult.data.allContentfulCategory.edges.map(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: `/categories/${edge.node.id}/`,
+        component: slash(categoryTemplate),
+        context: {
+          id: edge.node.id,
+        },
       })
-    })
+    )
+  )
 }

examples/using-contentful/package.json

@@ -7,13 +7,12 @@
   "dependencies": {
     "gatsby": "next",
     "gatsby-core-utils": "next",
-    "gatsby-image": "next",
     "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-image": "next",
     "gatsby-plugin-offline": "next",
     "gatsby-plugin-typography": "next",
     "gatsby-source-contentful": "next",
     "gatsby-transformer-remark": "next",
-    "lodash": "^4.17.20",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-typography": "^0.16.19",
@@ -34,4 +33,4 @@
     "build": "gatsby build",
     "start": "gatsby serve"
   }
-}
+}