feat: make Gatsby v4 compatible

Author: cedricdelpoux

README.md

@@ -35,7 +35,7 @@
 
 -   **Google Docs** formatting options (headings, bullets, tables, images...)
 -   `MDX` support to use `<ReactComponents />` in your documents
--   **Gatsby** v3 & v2 support
+-   **Gatsby** v3 & v4 support
 -   `gatsby-plugin-image` and `gatsby-image` support
 -   Code blocs support
 -   **Gatsby Cloud** support

utils/create-schema.js

@@ -4,7 +4,7 @@ exports.createSchema = ({actions}) => {
     type Cover {
       title: String
       alt: String
-      image: File @link(by: "id", from: "image___NODE")
+      image: File @link
     }
 
     type BreadcrumbItem {
@@ -18,6 +18,8 @@ exports.createSchema = ({actions}) => {
       breadcrumb: [BreadcrumbItem!]!
       template: String
       cover: Cover
+      related: [GoogleDocs!] @link
+      images: [File] @link
     }
   `
   createTypes(typeDefs)

utils/on-create-node-markdown-remark.js

@@ -1,29 +1,19 @@
-const {onCreateNodeGoogleDocs} = require("./on-create-node-google-docs")
-const {onCreateNodeMarkdownRemark} = require("./on-create-node-markdown-remark")
+const _get = require("lodash/get")
 
-exports.onCreateNode = async (
-  {node, actions, store, cache, createNodeId, createContentDigest, reporter},
-  pluginOptions
-) => {
-  if (node.internal.type === "GoogleDocs") {
-    await onCreateNodeGoogleDocs({
-      node,
-      actions,
-      store,
-      cache,
-      createNodeId,
-      createContentDigest,
-      reporter,
-      pluginOptions,
-    })
-  }
+exports.onCreateNode = async ({node, getNode}, pluginOptions) => {
+  if (_get(pluginOptions, "skipImages") === true) return
+  if (_get(node, "frontmatter.cover") === null) return
+
+  const googleDocsNode = getNode(node.parent)
 
-  if (node.internal.type === "MarkdownRemark") {
-    await onCreateNodeMarkdownRemark({
-      node,
-      actions,
-      cache,
-      pluginOptions,
-    })
+  if (googleDocsNode) {
+    const coverImageId = _get(googleDocsNode, "cover.image")
+
+    if (coverImageId) {
+      delete node.frontmatter.cover.image
+      node.frontmatter.cover.image___NODE = coverImageId
+    }
   }
+
+  return
 }

utils/on-create-node.js

@@ -2,9 +2,17 @@ const _merge = require("lodash/merge")
 
 const {fetchDocuments} = require("./google-docs")
 const {DEFAULT_OPTIONS} = require("./constants")
+const {updateImages} = require("./update-images")
 
 exports.sourceNodes = async (
-  {actions: {createNode}, createContentDigest, reporter},
+  {
+    actions: {createNode},
+    createContentDigest,
+    reporter,
+    store,
+    cache,
+    createNodeId,
+  },
   pluginOptions
 ) => {
   const options = _merge({}, DEFAULT_OPTIONS, pluginOptions)
@@ -38,17 +46,31 @@ exports.sourceNodes = async (
       const {document, properties, cover, related} = googleDocument
       const markdown = googleDocument.toMarkdown()
 
-      createNode({
+      const node = {
         ...properties,
         document,
         cover,
         markdown,
-        related___NODE: related,
+        related,
+      }
+
+      await updateImages({
+        node,
+        createNode,
+        store,
+        cache,
+        createNodeId,
+        reporter,
+        pluginOptions,
+      })
+
+      createNode({
+        ...node,
         internal: {
           type: "GoogleDocs",
           mediaType: "text/markdown",
-          content: markdown,
-          contentDigest: createContentDigest(markdown),
+          content: node.markdown,
+          contentDigest: createContentDigest(node.markdown),
         },
         dir: process.cwd(), // To make gatsby-remark-images works
       })

utils/source-nodes.js

@@ -11,13 +11,12 @@ const MD_URL_TITLE_REGEX = new RegExp(
   "g"
 )
 
-exports.onCreateNodeGoogleDocs = async ({
+exports.updateImages = async ({
   node,
-  actions: {createNode},
+  createNode,
   store,
   cache,
   createNodeId,
-  createContentDigest,
   reporter,
   pluginOptions,
 }) => {
@@ -45,11 +44,7 @@ exports.onCreateNodeGoogleDocs = async ({
     }
 
     if (fileNode) {
-      delete node.cover.image
-      node.cover.image___NODE = fileNode.id
-
-      // fileNode.id is useful to link MarkdownRemark cover nodes
-      await cache.set(fileNode.relativePath, fileNode.id)
+      node.cover.image = fileNode.id
     }
   }
 
@@ -92,11 +87,12 @@ exports.onCreateNodeGoogleDocs = async ({
         )
       })
 
-    node.images___NODE = filesNodes
+    const imagesIds = filesNodes
       .filter((fileNode) => fileNode)
       .map((fileNode) => fileNode.id)
+
+    node.images = imagesIds
   }
 
-  node.internal.content = node.markdown
-  node.internal.contentDigest = createContentDigest(node.markdown)
+  return
 }