Set the index page of my Gatsby site to be one of the dynamically generated pages?

Developing with Prismic
1

This might be one for @angeloashmore

I have a repeatable Landing Page custom type and I'd like to use it to generate my homepage. In order to do that, I can update:

  1. my linkResolver to
if (doc.type === 'landing_page') {
    if (doc.uid === "homepage") {
      return "/"
    } else {
      return `/${doc.uid.replace('__', '/')}/`;
    }
  }

  1. Delete pages/index.js

  2. Create the page within gatsby-node.js

However, I don't think that that public/index.html will be generated (source no index.html file in public folder after building · Issue #21843 · gatsbyjs/gatsby · GitHub) which might cause problems when building the website.

Another approach is to copy the query of templates/landing.js into pages/index.js and hardcode the uid query to "homepage". I can then skip the creation of /homepage in gatsby-node

However, this causes several problems:

  1. I can't preview the page due to how Prismic preview works
export const repositoryConfigs = [
  {
    repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
    linkResolver,
    componentResolver: componentResolverFromMap({
      landing_page: LandingPageTemplate,
    }),
  },
];
  1. I need to remember to keep pages/index.js and templates/landing.js query in sync

The final solution is to create a single type custom type called "Homepage" which is identical to my repeatable Landing Page custom type, but once again I need to keep both in sync.

Any help will be greatly appreciated!

PS: relevant stack-overflow ticket without a solid answer -> javascript - How can I set the index page of my Gatsby site to be one of the dynamically generated pages? - Stack Overflow

2

Hey @kris!

Your first strategy is what I use: create a page with path / in gatsby-node.js. This will generate the index page without hard-coding a pages/index.js file.

I tested this just now with a Gatsby + Prismic site and it built a public/index.html file as expected. In this test project, the pages directory only contains 404.tsx and preview.tsx.

For reference, this is what my gatsby-node.js file looks like in the test project:

// gatsby-node.js
const path = require("path");

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

  {
    const queryResult = await graphql(`
      query {
        allPrismicPage {
          nodes {
            id
            url
          }
        }
      }
    `);

    for (const page of queryResult.data.allPrismicPage.nodes ?? []) {
      createPage({
        path: page.url,
        component: path.resolve(__dirname, "src/templates/page.tsx"),
        context: { id: page.id },
      });
    }
  }
};

And the Link Resolver provided to the plugin. Note that in my example, a Page document with the UID home will result in a / URL in a similar manner to your code.

// src/linkResolver.js

/** @type import('@prismicio/helpers').LinkResolverFunction */
exports.linkResolver = (doc) => {
  switch (doc.type) {
    case "page": {
      if (doc.uid === "home") {
        return "/";
      } else {
        return `/${doc.uid}`;
      }
    }

    default: {
      return "/";
    }
  }
};

And here's a quick screenshot of the public folder showing the generated index.html file:

image
image1026×770 82.5 KB

Does you setup look similar to this? Can you confirm that an index.html file is or is not generated after running gatsby clean?

Thanks!