V3 -> V4 Migration: can no longer pass in context in createPages

[benwainwright]

Hey folks. I have a Gatsby site that I'm trying to upgrade to Gatsby 4. It is a personal site with a blog generate from markdown files. The relevant part of gatsby.config.js is here

const plugins = [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            showLineNumbers: true,
          },
        },
      ],
    },
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `markdown-pages`,
      path: `${__dirname}/blog-entries`,
    },
  },
];

I then use gatsby-node.js to create the pages

exports.createPages = async ({ graphql, actions, reporter }) => {
  const result = await graphql(
    `
      query {
        allMarkdownRemark {
          nodes {
            id
            htmlAst
            frontmatter {
              date(formatString: "MMMM DD, YYYY")
              last_modified
              slug
              published
              description
              title
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  const blogPost = path.resolve(__dirname, "./src/page-templates/blog-post.tsx")

  result.data.allMarkdownRemark.nodes.forEach(entry => {
    actions.createPage({
      path: `/blog/${entry.frontmatter.slug}`,
      component: blogPost,
      context: {
        entry: entry,
      },
    })
  })
}

const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = async ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })

    createNodeField({
      name: `slug`,
      node,
      value: `/blog${value}`,
    })
}

The pages are definitely being created, but it appears the context is no longer being attached to them. I've used console logging to verify that the pages are being created and that entry has actually got data in it.

This worked in Gatsby 3, but causes a build error in Gatsby 4. When I load yarn start and got to https://localhost:8000/__graphql I can't see the context.entry nodes anywhere in the schema for allSitePage. Noting from the documentation that context gets passed into pageContext, I can see pageContext, but it always appears to contain null

This now results in a build error because in the config I'm making queries like

    {
      allSitePage(filter: {context: {entry: {frontmatter: {published: {ne: false}}}}}) {
        nodes {
          path
          context {
            entry {
              frontmatter {
                last_modified
              }
            }
          }
        }
      }
    }

I know the Gatsby APIs have changed somewhat and I have tried to read migrating from v3 to v4 but it isn't immediately obvious to me what the solution is from reading that document. If anyone has any suggestions I'd love to hear them.

[LekoArts]

What version of Gatsby are you using? (e.g. with gatsby info --clipboard or yarn why gatsby)

[benwainwright]

❯ yarn why gatsby
└─ gatsby-starter-default@workspace:.
   └─ gatsby@npm:4.0.0 [84c03] (via npm:^4.0.0 [84c03])

[LekoArts]

You shouldn’t be passing everything via context (this is bad practice) and also not use the sitePage for your use case. Only pass the slug in context and use a allMarkdownRemark query instead of the sitePage one.

The change itself was that it doesn’t infer it anymore, yes. That’s not something that can be changed

[benwainwright]

@LekoArts "this is bad practice" isn't very helpful advice. Perhaps you could explain why?

[benwainwright]

use a allMarkdownRemark query instead of the sitePage one

No; this isn't very useful for my use-case. Specifically my use case is this:

• I'm generating a site-map using gatsby-plugin-sitemap. I specifically want to list all pages in my site, unless the page was one generated from markdown and has published: false in the frontmatter.

[LekoArts]

Regarding bad practice: https://www.gatsbyjs.com/docs/creating-and-modifying-pages/#trade-offs-of-querying-for-all-fields-in-the-context-object-of-gatsby-nodejs

Generally speaking people use this approach for your use case:

• Use allSitePage query for pages inside src/pages (and filter out the generated ones in gatsby-node.js)
• Use other query like allMarkdownRemark to generate the entries for those pages generated in gatsby-node.js

And then in your allMarkdownRemark query you can filter by published.

e.g. in my site I exclude them created from default-site-plugin since I already create those entries in allGarden:

Without the filter (the garden slugs are created in gatsby-node.js):

[LekoArts]

You can also use excludes and filterPages option: https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap#options