如何删除src/pages/index.js文件并在gatsby中使用gatsby-node.js动态创建？

Question

我想使用src/pages/index.js动态创建我的gatsby站点的homePage。

我确实喜欢这个。

const fetchAllComposePages = async ({ graphql, locales }) =>
  /* eslint implicit-arrow-linebreak: ["error", "below"] */
  graphql(`
    {
      allContentfulComposePage(filter: { node_locale: { in: ${locales} } }) {
        nodes {
          contentful_id
          title
          node_locale
          slug
          seo {
            no_follow
            no_index
            description
            name
            keywords
            title
          }
          content {
            __typename
          }
        }
      }
    }
  `);

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

  let locales = '';

  if (process.env.GATSBY_LOCALE === 'qc') {
    locales = '["en", "fr"]';
  } else {
    // Default to ROC locales
    locales = '["en-CA", "fr-CA"]';
  }

  const result = await fetchAllComposePages({ graphql, locales });

  result.data.allContentfulComposePage.nodes.map((node) => {
    const { contentful_id: id, slug, seo } = node;
    const content = node.content || [{}];
    const { __typename: template } = content;

    if (STATIC_DEFINED_PAGES.includes(slug)) {
      // These pages are generated in the `/pages` directory,
      // No need to generate a layout page for them here
      // eslint-disable-next-line no-console
      console.info(`Skipping Page :: ID: ${id} - Slug: ${slug}`);
      return;
    }

    if (!template) {
      // eslint-disable-next-line no-console
      console.info(`No Layout Found :: ID: ${id} - Slug: ${slug}`);
      return;
    }

    let layout = '';

    if (LAYOUT_LOOKUP[template]) {
      layout = LAYOUT_LOOKUP[template];
    } else {
      // eslint-disable-next-line no-console
      console.info(`No Layout Found :: ID: ${id} - Slug: ${slug}`);
      layout = 'base/BaseTemplate.js';
    }

    if (!seo) {
      // eslint-disable-next-line no-console
      console.info(`No SEO Found for: ${slug}`);
    }

    if (node.slug === '/') {
      deletePage({
        path: node.slug,
        component: path.resolve('src/pages/index.js'),
      });

      createPage({
        path: node.slug,
        component: path.resolve(`src/layouts/${layout}`),
        context: {
          pathSlug: slug,
          pageId: id,
          seo: {
            name: seo.name ? seo.name : '',
            description: seo.description ? seo.description : '',
            keywords: seo.keywords ? seo.keywords : '',
            title: seo.title ? seo.title : '',
            no_follow: seo.no_follow ? seo.no_follow : false,
            no_index: seo.no_index ? seo.no_index : false,
          },
        },
      });
    }

    createPage({
      path: node.slug,
      component: path.resolve(`src/layouts/${layout}`),
      context: {
        pathSlug: slug,
        pageId: id,
        seo: {
          name: seo.name ? seo.name : '',
          description: seo.description ? seo.description : '',
          keywords: seo.keywords ? seo.keywords : '',
          title: seo.title ? seo.title : '',
          no_follow: seo.no_follow ? seo.no_follow : false,
          no_index: seo.no_index ? seo.no_index : false,
        },
      },
    });
  });
};

// Adds the locale to pageContext for all pages and templates
exports.onCreatePage = ({ page }) => {
  const lang = page.context.intl.language;
  const locale = `${lang}-CA`;
  page.context.locale = locale;
  return page;
};

这是我用来删除index.js文件的功能

  if (node.slug === '/') {
      deletePage({
        path: node.slug,
        component: path.resolve('src/pages/index.js'),
      });

      createPage({
        path: node.slug,
        component: path.resolve(`src/layouts/${layout}`),
        context: {
          pathSlug: slug,
          pageId: id,
          seo: {
            name: seo.name ? seo.name : '',
            description: seo.description ? seo.description : '',
            keywords: seo.keywords ? seo.keywords : '',
            title: seo.title ? seo.title : '',
            no_follow: seo.no_follow ? seo.no_follow : false,
            no_index: seo.no_index ? seo.no_index : false,
          },
        },
      });
    }

但是它抛出了一个像这样的错误

​

请给我推荐一个解决方案来解决这个问题

Answer 1

deletePage是一个在onCreatePage API中可用的action (每次创建页面时都会调用它)，而不是在您试图使用它时在createPages中可用，在createPages中页面创建回调还没有触发(这就是它失败的原因)。

您需要将您的逻辑转移到onCreatePage中

const replacePath = path => (path === `/` ? path : path.replace(/\/$/, ``))

exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions
  const oldPage = Object.assign({}, page)

  // Remove trailing slash unless page is /
  page.path = replacePath(page.path)

  if (page.path !== oldPage.path) {
    deletePage(oldPage)
    createPage(page)
  }

或者，您也可以随时删除/pages/index.js并使用gatsby-node.js自动创建它。