如何在'gatsby-node'中使用不同的模板创建多个页面？

Question

i'm new to gatsby and trying to programatically create pages using different templates, but I'm struggling with that.

I have two different pages (landing & press), both written in mdx files, that need different routes and templates when being created programmatically.

my landing works good, but i failed to add the "press" page. everything i tried didn't work.

for information, i have a templateKey 'press' and 'landing' in each frontmatter of my markdown files.

Here is my gatsby-node file :

const path = require("path");
const { createFilePath } = require("gatsby-source-filesystem");
const { fmImagesToRelative } = require("gatsby-remark-relative-images");

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

  const landingTemplate = path.resolve("src/templates/landing.js");
  // const pressTemplate = path.resolve("./src/templates/press.js");

  return graphql(`
    {
      allMarkdownRemark(limit: 1000) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              templateKey
              locale
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()));
      return Promise.reject(result.errors);
    }

    const posts = result.data.allMarkdownRemark.edges;

    posts.forEach((edge) => {
      const id = edge.node.id;
      createPage({
        path: edge.node.fields.slug,
        component: landingTemplate,
        context: {
          locale: edge.node.frontmatter.locale,
          id,
        },
      });
    });
  });
};

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;
  fmImagesToRelative(node); // convert image paths for gatsby images

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode });
    createNodeField({
      name: `slug`,
      node,
      value,
    });
  }
};

here is my query in graphiQL

Thank you in advance for any assistance that you may be able to give me !

Answer 1

You have to make two different queries to get all your press and all landing data (filtering by each templateKey ). Once you have the different populated objects you need to call for each object the createPage API to create pages and pass each template value. It should look like:

const path = require("path");
const { createFilePath } = require("gatsby-source-filesystem");
const { fmImagesToRelative } = require("gatsby-remark-relative-images");

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

  const landingTemplate = path.resolve("src/templates/landing.js");
  const pressTemplate = path.resolve("./src/templates/press.js");

  const postQuery = await graphql(`
    {
      allMarkdownRemark(
      limit: 1000
      filter: { frontmatter: { templateKey: { eq: "press" }}},
      ) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              templateKey
              locale
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()));
      return Promise.reject(result.errors);
    }
    

    const posts = postQuery.data.allMarkdownRemark.edges;

    posts.forEach((edge) => {
      const id = edge.node.id;
      createPage({
        path: edge.node.fields.slug,
        component: pressTemplate,
        context: {
          locale: edge.node.frontmatter.locale,
          id,
        },
      });
    });
  });

  const landingQuery = await graphql(`
    {
      allMarkdownRemark(
      limit: 1000
      filter: { frontmatter: { templateKey: { eq: "landing" }}},
      ) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              templateKey
              locale
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()));
      return Promise.reject(result.errors);
    }


    const landings = landingQuery.data.allMarkdownRemark.edges;

    landings.forEach((edge) => {
      const id = edge.node.id;
      createPage({
        path: edge.node.fields.slug,
        component: landingTemplate,
        context: {
          locale: edge.node.frontmatter.locale,
          id,
        },
      });
    });
  });
  
};

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;
  fmImagesToRelative(node); // convert image paths for gatsby images

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode });
    createNodeField({
      name: `slug`,
      node,
      value,
    });
  }
};

Your mistake was that you were returning your GraphQL query and that limit your capability to create new queries. Note that I've also added a promise-based approach, with an async and await functions in order to optimize the queries and the timings.

Without knowing your data structure I've duplicated the query changing the templateKey value, of course, you will need to customize the data that you want to gather for each template and the data you want to pass via context API.