gatsby-transform-remark: fields from createNodeField are not available in createPages

Description

During onCreateNode I’m adding two node fields to MarkdownRemark nodes:

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  switch (node.internal.type) {
    case 'MarkdownRemark': {
      const { permalink, layout } = node.frontmatter
      const { relativePath } = getNode(node.parent)

      let slug = permalink

      if (!slug) {
        slug = `/${relativePath.replace('.md', '')}/`
      }

      // Used to generate URL to view this content.
      createNodeField({
        node,
        name: 'slug',
        value: slug || ''
      })

      // Used to determine a page layout.
      createNodeField({
        node,
        name: 'layout',
        value: layout || ''
      })
      break
    }
    default: {
      break
    }
  }
}

I’ve been debugging this and this seems to work. Now I want to create some pages based on that fields:

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  const allMarkdown = await graphql(`
    {
      allMarkdownRemark(limit: 1000) {
        edges {
          node {
            fields {
              layout
              slug
            }
          }
        }
      }
    }
  `)

  if (allMarkdown.errors) {
    reporter.panicOnBuild(allMarkdown.errors)
  }
}

This throws now the error: GraphQLError: Cannot query field "layout" on type "MarkdownRemarkFields".

Steps to reproduce

1. Please clone the following project: https://github.com/openscript/obin.ch
2. Go to line 74 in gatsby-config.js and add the pagesPaths option to gatsby-plugin-i18n
   

{
     resolve: 'gatsby-plugin-i18n',
     options: {
       langKeyDefault: 'en',
       useLangKeyLayout: false,
       prefixDefault: false,
       pagesPaths: ['/src/pages/', '/src/content/'] // <--- this one
     }
   },

1. Run yarn start.

Expected result

The layout field should be available.

Actual result

The layout field is not available and the graphql query fails.

Environment

  System:
    OS: Linux 5.4 undefined
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.0.11 - /bin/bash
  Binaries:
    Node: 12.14.0 - ~/.asdf/installs/nodejs/12.14.0/bin/node
    Yarn: 1.21.1 - ~/.asdf/installs/nodejs/12.14.0/.npm/bin/yarn
    npm: 6.13.4 - ~/.asdf/installs/nodejs/12.14.0/bin/npm
  Languages:
    Python: 3.8.1 - /usr/bin/python
  Browsers:
    Firefox: 71.0
  npmPackages:
    gatsby: ^2.18.17 => 2.18.17
    gatsby-image: ^2.2.37 => 2.2.37
    gatsby-plugin-canonical-urls: ^2.1.18 => 2.1.18
    gatsby-plugin-emotion: ^4.1.18 => 4.1.18
    gatsby-plugin-graphql-codegen: ^2.0.1 => 2.0.1
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.2.34 => 2.2.34
    gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
    gatsby-plugin-sharp: ^2.3.10 => 2.3.10
    gatsby-plugin-svgr: ^2.0.2 => 2.0.2
    gatsby-plugin-typescript: ^2.1.23 => 2.1.23
    gatsby-remark-copy-linked-files: ^2.1.33 => 2.1.33
    gatsby-remark-images: ^3.1.39 => 3.1.39
    gatsby-remark-prismjs: ^3.3.28 => 3.3.28
    gatsby-remark-responsive-iframe: ^2.2.30 => 2.2.30
    gatsby-remark-smartypants: ^2.1.19 => 2.1.19
    gatsby-source-filesystem: ^2.1.43 => 2.1.43
    gatsby-transformer-json: ^2.2.22 => 2.2.22
    gatsby-transformer-remark: ^2.6.45 => 2.6.45
    gatsby-transformer-sharp: ^2.3.9 => 2.3.9

[jonniebigodes]

@openscript i’ve picked up on your issue and below i’m going to detail the steps i took to triage this.

• Cloned the repo
• Installed the dependencies
• Updated gatsby-config.js to match the issue description
• Ran gatsby develop and the issue popped up.
• Updated src\content\example.md frontmatter to the following:

---
title: banana
featured: false
---

Hello!

• Changed gatsby-node.js so that i could get a clear view of the node information Resulting in the following code:

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    console.log(`Node:${JSON.stringify(node, null, 2)}`)
  }
}

• Cleared both cache and public folder through gatsby clean and issued another build and i get the following output:

Node:{
  "id": "cff58d39-5f0d-5417-92d5-c4a7761f0804",
  "children": [],
  "parent": "19879e2e-dda4-5af1-8451-30ba034fa25e",
  "internal": {
    "content": "\r\nHello!\r\n",
    "type": "MarkdownRemark",
    "contentDigest": "4833477cf56a70ab1b661c29a36880c0",
    "counter": 53,
    "owner": "gatsby-transformer-remark",
    "fieldOwners": {
      "langKey": "gatsby-plugin-i18n",
      "slug": "gatsby-plugin-i18n"
    }
  },
  "frontmatter": {
    "title": "banana",
    "featured": false
  },
  "excerpt": "",
  "rawMarkdownBody": "\r\nHello!\r\n",
  "fileAbsolutePath": "C:/Users/paxa2/Documents/gatsby_fork/testmobileheader/test_openscript/obin.ch/src/content/example.md",
  "fields": {
    "langKey": "en",
    "slug": "/example/"
  }
}
Node:{
  "id": "78466ab4-702d-5e19-b4d1-caa14f9bfe5e",
  "children": [],
  "parent": "c966678d-637a-5d52-8cff-404c14fff3cd",
  "internal": {
    "content": "\r\nThis is openscript.\r\n",
    "type": "MarkdownRemark",
    "contentDigest": "ed80f7f49aa6d5dcdf35af59ad659c9c",
    "counter": 54,
    "owner": "gatsby-transformer-remark",
    "fieldOwners": {
      "langKey": "gatsby-plugin-i18n",
      "slug": "gatsby-plugin-i18n"
    }
  },
  "frontmatter": {
    "title": "Beefinder",
    "featured": true
  },
  "excerpt": "",
  "rawMarkdownBody": "\r\nThis is openscript.\r\n",
  "fileAbsolutePath": "C:/Users/paxa2/Documents/gatsby_fork/testmobileheader/test_openscript/obin.ch/src/content/projects/beefinder.de.md",
  "fields": {
    "langKey": "de",
    "slug": "/de/projects/beefinder/"
  }
}
Node:{
  "id": "8a88c944-7388-589d-84b4-4fcfdcc1e124",
  "children": [],
  "parent": "b58be380-57c8-5e63-bdf0-7a337fc4f07d",
  "internal": {
    "content": "\r\nThis is openscript.\r\n",
    "type": "MarkdownRemark",
    "contentDigest": "d66b6c7538e1ba74c591ea1060ae9d4d",
    "counter": 55,
    "owner": "gatsby-transformer-remark",
    "fieldOwners": {
      "langKey": "gatsby-plugin-i18n",
      "slug": "gatsby-plugin-i18n"
    }
  },
  "frontmatter": {
    "title": "Beefinder",
    "featured": true
  },
  "excerpt": "",
  "rawMarkdownBody": "\r\nThis is openscript.\r\n",
  "fileAbsolutePath": "C:/Users/paxa2/Documents/gatsby_fork/testmobileheader/test_openscript/obin.ch/src/content/projects/beefinder.en.md",
  "fields": {
    "langKey": "en",
    "slug": "/projects/beefinder/"
  }
}
Node:{
  "id": "f9867967-c777-5118-adbb-a07381e4866b",
  "children": [],
  "parent": "5db4cbc9-dd13-50f8-8e2f-badf5057be0b",
  "internal": {
    "content": "\r\nThis is openscript.\r\n",
    "type": "MarkdownRemark",
    "contentDigest": "e847068b4c663850d272eb1c6f9a63a9",
    "counter": 56,
    "owner": "gatsby-transformer-remark",
    "fieldOwners": {
      "langKey": "gatsby-plugin-i18n",
      "slug": "gatsby-plugin-i18n"
    }
  },
  "frontmatter": {
    "title": "openscript GmbH",
    "featured": true
  },
  "excerpt": "",
  "rawMarkdownBody": "\r\nThis is openscript.\r\n",
  "fileAbsolutePath": "C:/Users/paxa2/Documents/gatsby_fork/testmobileheader/test_openscript/obin.ch/src/content/projects/openscript.md",
  "fields": {
    "langKey": "en",
    "slug": "/projects/openscript/"
  }
}
Node:{
  "id": "a7cd90cd-d03f-5597-abd4-3828287692f5",
  "children": [],
  "parent": "3620b903-5110-5873-ac11-ea62cb57f396",
  "internal": {
    "content": "\r\nThis is this website.\r\n",
    "type": "MarkdownRemark",
    "contentDigest": "abd28df8cbd958e2f67d8a69bf9d905b",
    "counter": 57,
    "owner": "gatsby-transformer-remark",
    "fieldOwners": {
      "langKey": "gatsby-plugin-i18n",
      "slug": "gatsby-plugin-i18n"
    }
  },
  "frontmatter": {
    "title": "r.obin.ch",
    "featured": true
  },
  "excerpt": "",
  "rawMarkdownBody": "\r\nThis is this website.\r\n",
  "fileAbsolutePath": "C:/Users/paxa2/Documents/gatsby_fork/testmobileheader/test_openscript/obin.ch/src/content/projects/r.obin.md",
  "fields": {
    "langKey": "obin",
    "slug": "/obin/projects/r/"
  }
}

As you can see there’s already a slug field added. It seems that gatsby-plugin-i18n is taking care of it. And with that it seems that you cannot create a field that already exists. That’s my take on this. I could be wrong and someone more knowledgeable can offer you better insights.

• Based on the above i updated the onCreateNode api hook to the following:

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    console.log(`Node:${JSON.stringify(node, null, 2)}`)
    createNodeField({
      node,
      name: 'layout',
      value: node.frontmatter.featured ? 'layoutA' : 'layoutB'
    })
  }
}

• Created two new templates files called layoutA.tsx and layoutB.tsx with the following content:
  • In src\templates\layoutA.tsx

import * as React from 'react'
import { graphql } from 'gatsby'

import IndexLayout from '../layouts'

interface PageTemplateProps {
  data: {
    site: {
      siteMetadata: {
        title: string
        description: string
        author: {
          name: string
          url: string
        }
      }
    }
    markdownRemark: {
      html: string
      excerpt: string
      frontmatter: {
        title: string
      }
    }
  }
}

const PageTemplateA: React.FC<PageTemplateProps> = ({ data }) => (
  <IndexLayout>
    <h1>{data.markdownRemark.frontmatter.title}</h1>
    <h2>This is templateA</h2>
    {/* eslint-disable-next-line react/no-danger */}
    <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
  </IndexLayout>
)

export default PageTemplateA

export const query = graphql`
  query PageTemplateAQuery($slug: String!) {
    site {
      siteMetadata {
        title
        author {
          name
          url
        }
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      excerpt
      frontmatter {
        title
      }
    }
  }
`

In src\templates\layoutB.tsx:

import * as React from 'react'
import { graphql } from 'gatsby'

import IndexLayout from '../layouts'

interface PageTemplateProps {
  data: {
    site: {
      siteMetadata: {
        title: string
        description: string
        author: {
          name: string
          url: string
        }
      }
    }
    markdownRemark: {
      html: string
      excerpt: string
      frontmatter: {
        title: string
      }
    }
  }
}

const PageTemplateB: React.FC<PageTemplateProps> = ({ data }) => (
  <IndexLayout>
    <h1>{data.markdownRemark.frontmatter.title}</h1>
    <h2>This is templateB</h2>
    {/* eslint-disable-next-line react/no-danger */}
    <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
  </IndexLayout>
)

export default PageTemplateB

export const query = graphql`
  query PageTemplateBQuery($slug: String!) {
    site {
      siteMetadata {
        title
        author {
          name
          url
        }
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      excerpt
      frontmatter {
        title
      }
    }
  }
`

• Ran gatsby develop and i get the following output:

$ gatsby develop
success open and validate gatsby-configs - 0.061s
success load plugins - 2.004s
success onPreInit - 0.007s
success initialize cache - 0.011s
success copy gatsby files - 0.354s
success onPreBootstrap - 0.032s
success createSchemaCustomization - 0.167s
success source and transform nodes - 0.285s
success building schema - 0.488s
success createPages - 0.064s
success createPagesStatefully - 0.221s
success onPreExtractQueries - 0.002s
success update schema - 0.028s   
success extract queries from components - 0.560s
warn The GraphQL query in the non-page component
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — http://graphql.org/learn/queries/#fragments
success write out requires - 0.145s
success write out redirect data - 0.008s
success Build manifest and related icons - 0.454s
warn [gatsby-plugin-graphql-codegen] Unable to find any GraphQL type definitions for the following pointers:
info [gatsby-plugin-graphql-codegen] definition for queries has been updated at graphql-types.ts
success onPostBootstrap - 1.402s
⠀
info bootstrap finished - 11.080 s
⠀
success run queries - 0.151s - 20/20 132.24/s
⠀
You can now view obin.ch in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 5.035s


—————————————————————————————————————————————————————————————————————————————————————————————————————————————————18 pages                                              Success                                             obin.ch

Feel free to provide feedback so that we can close this issue or continue to work on it until we find a suitable solution

[jonniebigodes]

@openscript no problem, glad that i was able to provide you with some insights that helped you solve your issue.