[WIP] graphql schema refactor

benchmarks/query/gatsby-node.js

@@ -37,9 +37,11 @@ exports.sourceNodes = ({ actions: { createNode } }) => {
         id,
         parent: null,
         children: [],
+        custom: {
+          nestedId: id,
+        },
         internal: {
           type: typeName,
-          nestedId: id,
           content: faker.lorem.word(),
           contentDigest: step.toString(),
         },
@@ -68,7 +70,7 @@ export default ({ data }) => {
 
 export const query = graphql\`
   query($id: String!) {
-    ${lowerTypeName}(internal: { nestedId: { eq: $id } }) {
+    ${lowerTypeName}(filter: { custom: { nestedId: { eq: $id } } }) {
       id
     }
   }
@@ -79,12 +81,8 @@ export const query = graphql\`
 function allTypeQuery(typeName) {
   return `
 {
-  all${typeName}(sort: { fields: [id] }) {
-    edges {
-      node {
-        id
-      }
-    }
+  all${typeName}(sort: { fields: [ID] }) {
+    id
   }
 }
 `
@@ -97,8 +95,7 @@ async function createTypePages({ graphql, actions }, 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
+  _.forEach(result.data[`all${typeName}`], node => {
     actions.createPage({
       path: `/${typeName}/${node.id}/`,
       component: require.resolve(templateFilename),

benchmarks/schema/create-posts.js

@@ -0,0 +1,99 @@
+#!/usr/bin/node
+const fs = require(`fs-extra`)
+const path = require(`path`)
+const faker = require(`faker`)
+const fetch = require(`node-fetch`)
+const YAML = require(`yamljs`)
+
+const BASEPATH = `./data`
+fs.ensureDirSync(BASEPATH)
+fs.emptyDirSync(BASEPATH)
+
+const IMAGE_BASEPATH = `./static/images`
+fs.ensureDirSync(IMAGE_BASEPATH)
+fs.emptyDirSync(IMAGE_BASEPATH)
+
+const NUM_AUTHORS = 1000
+const NUM_TAGS = 100
+const NUM_POSTS = 10000
+const NUM_IMAGES = 2
+
+const range = num => [...Array(num).keys()]
+const pick = arr => arr[Math.floor(Math.random() * arr.length)]
+
+const imageDigits = NUM_IMAGES.toString().length
+const createImage = async num => {
+  const url = faker.image.avatar()
+  const response = await fetch(url)
+  const image = await response.buffer()
+  const filename = path.join(
+    IMAGE_BASEPATH,
+    num.toString().padStart(imageDigits, `0`) + `.jpg`
+  )
+  fs.writeFileSync(filename, image)
+  return `../` + filename
+}
+
+const createAuthor = images => {
+  return {
+    name: faker.name.lastName(),
+    firstname: faker.name.firstName(),
+    email: faker.internet.email(),
+    image: pick(images),
+  }
+}
+
+const createFrontmatter = (authors, tags) => {
+  return {
+    title: faker.lorem.sentence(),
+    date: faker.date.past().toJSON(),
+    published: pick([true, false]),
+    authors: range(2).map(() => pick(authors).email),
+    tags: range(3).map(() => pick(tags)),
+  }
+}
+
+const createMarkdown = async (authors, tags) => {
+  const frontmatter = await createFrontmatter(authors, tags)
+  const heading = faker.lorem.sentence()
+  const text = faker.lorem.paragraph()
+  return `---
+title: ${frontmatter.title}
+date: ${frontmatter.date}
+published: ${frontmatter.published}
+authors: [${frontmatter.authors.join(`, `)}]
+tags: [${frontmatter.tags.join(`, `)}]
+---
+
+# ${heading}
+
+${text}
+`
+}
+
+const digits = NUM_POSTS.toString().length
+const createFile = (content, num) =>
+  fs.writeFile(
+    path.join(BASEPATH, num.toString().padStart(digits, `0`) + `.md`),
+    content,
+    err => {
+      if (err) throw err
+    }
+  )
+
+Promise.all(range(NUM_IMAGES).map(createImage))
+  .then(images =>
+    Promise.all(range(NUM_AUTHORS).map(() => createAuthor(images)))
+  )
+  .then(authors => {
+    fs.writeFileSync(
+      path.join(BASEPATH, `authors.yaml`),
+      YAML.stringify(authors)
+    )
+    const tags = range(NUM_TAGS).map(faker.lorem.word)
+    return Promise.all(
+      range(NUM_POSTS).map(() => createMarkdown(authors, tags))
+    )
+  })
+  .then(posts => Promise.all(posts.map(createFile)))
+  .then(() => console.log(`Done`))

benchmarks/schema/gatsby-node.js

@@ -0,0 +1,166 @@
+const fs = require(`fs`)
+const path = require(`path`)
+const mime = require(`mime/lite`)
+const YAML = require(`yamljs`)
+
+const DATA_DIR = `./data`
+const IMAGE_DIR = `./static/images`
+
+const isObject = obj => obj && typeof obj === `object` && !Array.isArray(obj)
+
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+
+const addTypeDefs = ({ addTypeDefs }) => {
+  const typeDefs = `
+    type File implements Node {
+      name: String!
+      dir: String
+      absolutePath: String
+    }
+
+    type AuthorsYaml implements Node {
+      name: String
+      firstname: String
+      email: String
+      image: File @link(by: "relativePath")
+    }
+
+    type Frontmatter {
+      title: String
+      date: Date @dateformat(defaultFormat: "YYYY")
+      published: Boolean
+      authors: [AuthorsYaml] @link(by: "email")
+    }
+
+    type Markdown implements Node {
+      md: String
+      frontmatter: Frontmatter
+    }
+  `
+  addTypeDefs(typeDefs)
+}
+
+const sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
+  const { createNode } = actions
+  const dirs = [path.resolve(DATA_DIR), path.resolve(IMAGE_DIR)]
+  dirs.forEach(dir => {
+    const files = fs.readdirSync(dir, { withFileTypes: true })
+    files.forEach(file => {
+      if (!file.isFile()) return
+      const { name } = file
+      const absolutePath = path.join(dir, name)
+      const relativeDir = dir.startsWith(`static`)
+        ? path.relative(__dirname, dir)
+        : path.relative(path.join(__dirname, `static`), dir)
+      const relativePath = path.join(relativeDir, name)
+      const mediaType = mime.getType(absolutePath)
+      const content = mediaType.startsWith(`text`)
+        ? fs.readFileSync(absolutePath, `utf-8`)
+        : ``
+      createNode({
+        id: createNodeId(`File ${name}`),
+        parent: null,
+        children: [],
+        internal: {
+          type: `File`,
+          mediaType,
+          content,
+          contentDigest: createContentDigest(content),
+        },
+        name,
+        dir,
+        relativeDir,
+        absolutePath,
+        relativePath,
+      })
+    })
+  })
+}
+
+const onCreateNode = ({ actions, node, createNodeId, createContentDigest }) => {
+  const { createNode, createParentChildLink } = actions
+  const { id, name, internal } = node
+  const { content } = internal
+
+  switch (node.internal.mediaType) {
+    case `text/markdown`: {
+      const [frontmatter, md] = content.split(`---`).filter(Boolean)
+      const child = {
+        id: createNodeId(`Markdown ${id}`),
+        parent: id,
+        children: [],
+        internal: {
+          type: `Markdown`,
+          content,
+          contentDigest: createContentDigest(content),
+        },
+        frontmatter: YAML.parse(frontmatter),
+        md,
+      }
+      createNode(child)
+      createParentChildLink({ parent: node, child })
+      break
+    }
+
+    case `text/yaml`: {
+      const type = capitalize(name.slice(0, name.lastIndexOf(`.`))) + `Yaml`
+      const createYamlNode = (fields, i) => {
+        if (!isObject(fields)) return
+        const child = {
+          id: createNodeId(`${type} [${i}] ${id}`),
+          parent: id,
+          children: [],
+          internal: {
+            type,
+            content,
+            contentDigest: createContentDigest(content),
+          },
+          ...fields,
+        }
+        createNode(child)
+        createParentChildLink({ parent: node, child })
+      }
+      const parsed = YAML.parse(content)
+      Array.isArray(parsed)
+        ? parsed.forEach(createYamlNode)
+        : createYamlNode(parsed)
+      break
+    }
+
+    default:
+  }
+}
+
+const createPages = ({ actions, graphql }) => {
+  const { createPage } = actions
+  return graphql(`
+    query {
+      allMarkdown(
+        sort: { fields: [FRONTMATTER___DATE], order: DESC }
+        filter: { frontmatter: { title: { ne: null } } }
+      ) {
+        id
+      }
+    }
+  `).then(({ errors, data }) => {
+    if (errors) throw errors
+    createPage({
+      path: `/`,
+      component: path.resolve(`./templates/index.js`),
+    })
+    data.allMarkdown.forEach(({ id }) => {
+      createPage({
+        path: id,
+        component: path.resolve(`./templates/template.js`),
+        context: { id },
+      })
+    })
+  })
+}
+
+module.exports = {
+  addTypeDefs,
+  createPages,
+  onCreateNode,
+  sourceNodes,
+}

benchmarks/schema/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "playground",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "date-fns": "^1.30.1",
+    "faker": "^4.1.0",
+    "gatsby": "^2.0.76",
+    "graphql-compose": "^5.4.0",
+    "mime": "^2.4.0",
+    "node-fetch": "^2.3.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "yamljs": "^0.3.0"
+  },
+  "browserslist": [
+    "chrome > 68"
+  ]
+}

benchmarks/schema/templates/index.js

@@ -0,0 +1,25 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+const IndexPage = ({ data }) => (
+  <>
+    <h1>Pages</h1>
+    <ul>
+      {data.allMarkdown.map(({ id }) => (
+        <li key={id}>
+          <a href={id}>Page {id}</a>
+        </li>
+      ))}
+    </ul>
+  </>
+)
+
+export default IndexPage
+
+export const query = graphql`
+  {
+    allMarkdown {
+      id
+    }
+  }
+`