fix(develop):Refactoring benchmark apps (#12433)

<!--
  Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Description

- Add small refactoring to the benchmarks apps.
- Fix benchmark query app warning:
```
warning Action createPage was called outside of its expected asynchronous lifecycle createPages in default-site-plugin.
```

## Related Issues

Author: nelyousfi

benchmarks/create-pages/gatsby-node.js

@@ -1,12 +1,7 @@
-let NUM_PAGES = 5000
-
-if (process.env.NUM_PAGES) {
-  NUM_PAGES = process.env.NUM_PAGES
-}
+const NUM_PAGES = parseInt(process.env.NUM_PAGES || 5000, 10)
 
 exports.createPages = ({ actions: { createPage } }) => {
-  var step
-  for (step = 0; step < NUM_PAGES; step++) {
+  for (let step = 0; step < NUM_PAGES; step++) {
     createPage({
       path: `/path/${step}/`,
       component: require.resolve(`./src/templates/blank.js`),

benchmarks/markdown/README.md

@@ -2,7 +2,7 @@
 
 Stress tests creating lots of pages rendered from Markdown.
 
-Defaults to building a site with 5k markdown pages. Set the `NUM_PAGES` environment variable to change that e.g. `NUM_PAGES=25000 gatsby build`
+Defaults to building a site with 5k markdown pages and 25 maximum rows per age. Set the `NUM_PAGES` and `MAX_NUM_ROWS` environment variables to change that e.g. `NUM_PAGES=25000 MAX_NUM_ROWS=100 gatsby build`
 
 # Running the benchmark
 

benchmarks/markdown/gatsby-node.js

@@ -3,8 +3,7 @@ const template = require(`./page-template`)
 
 exports.sourceNodes = ({ actions: { createNode } }) => {
   // Create markdown nodes
-  let step
-  for (step = 0; step < NUM_PAGES; step++) {
+  for (let step = 0; step < NUM_PAGES; step++) {
     createNode({
       id: step.toString(),
       parent: null,

benchmarks/markdown/page-template.js

@@ -1,7 +1,7 @@
 const faker = require(`faker`)
 const matter = require(`gray-matter`)
 
-const NUM_ROWS = parseInt(process.env.NUM_ROWS || 25, 10)
+const MAX_NUM_ROWS = parseInt(process.env.MAX_NUM_ROWS || 25, 10)
 
 module.exports = index => `
 ${matter
@@ -17,7 +17,7 @@ ${matter
 
 |Name|Description|Required|
 |:--:|-----------|--------|
-${new Array(faker.random.number(NUM_ROWS))
+${new Array(faker.random.number(MAX_NUM_ROWS))
   .fill(undefined)
   .map(() =>
     `

benchmarks/query/gatsby-node.js

@@ -2,15 +2,9 @@ const _ = require(`lodash`)
 const faker = require(`faker`)
 const fs = require(`fs`)
 
-let NUM_PAGES = 5000
-if (process.env.NUM_PAGES) {
-  NUM_PAGES = process.env.NUM_PAGES
-}
+const NUM_PAGES = parseInt(process.env.NUM_PAGES || 5000, 10)
 
-let NUM_TYPES = 1
-if (process.env.NUM_TYPES) {
-  NUM_TYPES = process.env.NUM_TYPES
-}
+const NUM_TYPES = parseInt(process.env.NUM_TYPES || 10, 10)
 
 function newTypeName() {
   return _.capitalize(_.camelCase(faker.lorem.word()))
@@ -21,7 +15,7 @@ let types = []
 // Create NUM_PAGES nodes, split over NUM_TYPES types. Each node has
 // the bare minimum of content
 exports.sourceNodes = ({ actions: { createNode } }) => {
-  for (var i = 0; i < NUM_TYPES; i++) {
+  for (let i = 0; i < NUM_TYPES; i++) {
     types.push(newTypeName())
   }
   // Create markdown nodes
@@ -30,7 +24,7 @@ exports.sourceNodes = ({ actions: { createNode } }) => {
   let step = 0
 
   _.forEach(types, typeName => {
-    for (var i = 0; i < pagesPerType; i++) {
+    for (let i = 0; i < pagesPerType; i++) {
       step++
       const id = `${typeName}${step.toString()}`
       createNode({
@@ -48,7 +42,7 @@ exports.sourceNodes = ({ actions: { createNode } }) => {
   })
 }
 
-// Total hack. It would be nice if we could programatically generate
+// Total hack. It would be nice if we could programmatically generate
 // graphQL per component. But in the meantime, we just generate the
 // actual component js file with the graphql
 function createPageTemplateJs(typeName) {
@@ -90,28 +84,35 @@ function allTypeQuery(typeName) {
 `
 }
 
-// Create a page for each node, and write out a new component js for
-// each different type to .cache/${typeName}Template.js
-async function createTypePages({ graphql, actions }, typeName) {
+// Create template in .cache for the received type
+function createTemplateFile(typeName) {
   const templateSrc = createPageTemplateJs(typeName)
   const templateFilename = `./.cache/${typeName}Template.js`
   fs.writeFileSync(templateFilename, templateSrc)
-  let result = await graphql(allTypeQuery(typeName))
-  _.forEach(result.data[`all${typeName}`].edges, edge => {
-    const { node } = edge
-    actions.createPage({
-      path: `/${typeName}/${node.id}/`,
-      component: require.resolve(templateFilename),
-      context: {
-        id: node.id,
-        useQueryIndex: true,
-      },
-    })
-  })
+  return templateFilename
 }
 
-exports.createPages = async args => {
-  _.forEach(types, typeName => {
-    createTypePages(args, typeName)
-  })
+// Create node for the received type
+async function createNode(graphql, typeName) {
+  const result = await graphql(allTypeQuery(typeName))
+  return result.data[`all${typeName}`].edges
+}
+
+// Create page for each type
+exports.createPages = async ({ actions, graphql }) => {
+  for (let i = 0; i < types.length; i++) {
+    const typeName = types[i]
+    const templateFilename = createTemplateFile(typeName)
+    const edges = await createNode(graphql, typeName)
+    _.forEach(edges, ({ node }) => {
+      actions.createPage({
+        path: `/${typeName}/${node.id}/`,
+        component: require.resolve(templateFilename),
+        context: {
+          id: node.id,
+          useQueryIndex: true,
+        },
+      })
+    })
+  }
 }