Allow 404.js to be customized with pageContext supplied by gatsby-node.js

[aaronshaf]

My use-case:

I'd like to generate a 404 page from some of the same data that is used to generate my normal pages.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[iloveip]

Hi @aaronshaf,

Did you find a way to populate 404.html page with pageContext?

[WangNingning1994]

Hi, do you have and update on this topic?

[dannyvaughton]

I believe you can do this with a 404.js in src/pages and using the onCreatePage hook.

Something like this:

const onCreatePage = async ({ page, actions }) => {
  const { createPage, deletePage } = actions;
  
  // Look for /404/ path
  if (page.path.match(/^\/404\/$/)) {
    const oldPage = { ...page };
    
    // Add page context
    page.context = {
      foo: 'bar'
    };
    
    // Recreate the modified page
    deletePage(oldPage);
    createPage(page)
  }
};

module.exports = onCreatePage;

[wences-dc-uba-ar]

this works fine, thanks!

[GabrielKuka]

The problem with this is that you can't run graphql queries inside onCreatePage hook if you need to. Correct me if I'm wrong.

[chrispytoes]

I need to insert context into my 404 page from a query, but the object passed into onCreatePage does not have the graphql function on it like createPages does. How do you make a query within onCreatePage?

[SachaG]

@chrispytoes I'm running into the exact same issue and as far as I can tell you can't make queries within onCreatePage, meaning you can't have dynamic data in your 404 page (or at least not without extra workarounds which I've yet to figure out…)

[SachaG]

I've tried creating my 404 page with createPages (which does have access to graphql) and adding the following code (the site handles multiple locales):

if (page.id === 'notfound') {
                pageObject.matchPath = `/${locale.id}/*`
            }

That seems to work fine. I guess the steps outlined here are more for when you're dealing with "physical files" pages rather than programatically-generated pages?

I've yet to look at how to make Netlify work with this setup though, I'm guessing that this might not happen automatically.

[Eytyy]

This is late, but it might be helpful if someone pumps into the same challenge. I managed to work around this by creating the 404 pages programmatically inside gatsby-node.js. I'm creating a localized version for each language, and pass some properties like "language and alternate links" to the page context.

gatsby-node.js

const languages = ['en', 'ar'];

exports.createPages = async ({graphql, actions, reporter}) => {
  await create404s(actions, reporter);
};

async function create404s(actions, reporter) {
  const {createPage} = actions;
  const NotFoundPageTemplate = path.resolve(`src/templates/404.js`);
  await buildLocalizedPages(
    null,
    definitionCallback(
      _,
      lang
    )({
      path: lang === 'en' ? '/404' : `/${lang}/404`,
      component: NotFoundPageTemplate,
      context: {
        originalPath: '/404',
      },
    }),
    createPage,
    reporter
  );
}

async function buildLocalizedPages(
  inputData,
  pageDefinitionCallback,
  createPage,
  reporter
) {
  if (!Array.isArray(inputData)) {
    inputData = [inputData];
  }

  await Promise.all(
    inputData.map(async (data) => {
      const defs = await Promise.all(
        languages.map(async (language) => {
          // (1) use the given callback to generate the definition to create the Gatsby page
          const def = pageDefinitionCallback(data, language);

          // (2) The Gatsby page will receive the language along with the definition returned by the callback
          def.context.lang = language;
          return def;
        })
      );

      // (3) Map over all definitions, to generate the alternate links
      const alternateLinks = defs.map((def) => ({
        lang: def.context.lang,
        path: def.path,
      }));

      // (4) Create the pages for all definitions.
      defs.forEach((def) => {
        reporter.info(`Creating page: ${def.path}`);
        def.context.alternateLinks = alternateLinks;
        createPage(def);
      });
    })
  );
}

templates/404.js

import React from 'react';
import {graphql} from 'gatsby';
import HeaderModule from '../components/modules/headerModule';

const NotFoundPageTemplate = (props) => {
  const {data} = props;

  return (
    <HeaderModule
      {...data.content.header}
    />
  );
};

export default NotFoundPageTemplate;

export const query = graphql`
  query errorPageQuery {
    content: sanityErrorPage(title: {eq: "404"}) {
      header: _rawHeader
    }
  }
`;

One thing to note, Gatsby will complain about the missing 404.js file in development mode, and you won't be able to preview the page to style it. What I did is that I created the component inside pages/404.js, did the html and styling, then moved it to templates. The pages work as expected in production on Netlify, and no further configuration is needed if you're using gatsby-plugin-netlify

[dbismut]

I came up with the same solution (for localized pages I believe you have to add a matchPath attribute set to /${langCode}/* similarly to what is explained here). However, for some reason the new Slice feature don't seem to work with that trick, they're always empty.