如何查询Gatsby中已创建的页面？解决重复生成页面问题

这个问题我之前帮不少开发者解决过，其实核心思路就是跟踪已创建的页面标识（比如slug），避免重复调用createPage。这里给你两种实用的方案：

方案1：手动维护已创建Slug集合（最直接高效） #

在createPages函数内部，用一个Set来存储已经生成过的页面slug，每次处理API数据前先检查slug是否存在于集合中，不存在再创建页面。这种方法适合在同一次createPages调用中处理多个API数据源的场景，因为它能实时跟踪当前批次创建的页面。

示例代码：

exports.createPages = async ({ actions }) => {
  const { createPage } = actions;
  // 初始化Set存储已创建的slug
  const createdSlugs = new Set();

  // 处理第一个API数据源
  const api1Response = await fetch("https://your-api-endpoint-1.com/data");
  const api1Data = await api1Response.json();
  
  for (const item of api1Data) {
    const pageSlug = `/content/${item.slug}`; // 统一slug格式
    if (!createdSlugs.has(pageSlug)) {
      createPage({
        path: pageSlug,
        component: require.resolve("./src/templates/content-template.js"),
        context: { itemId: item.id },
      });
      createdSlugs.add(pageSlug);
    }
  }

  // 处理第二个API数据源
  const api2Response = await fetch("https://your-api-endpoint-2.com/data");
  const api2Data = await api2Response.json();
  
  for (const item of api2Data) {
    const pageSlug = `/content/${item.slug}`;
    if (!createdSlugs.has(pageSlug)) {
      createPage({
        path: pageSlug,
        component: require.resolve("./src/templates/content-template.js"),
        context: { itemId: item.id },
      });
      createdSlugs.add(pageSlug);
    }
  }
};

方案2：通过GraphQL查询已存在的页面 #

如果你需要检查之前构建阶段已经生成的页面（比如其他插件或更早的createPages调用创建的页面），可以用Gatsby的内部GraphQL查询allSitePage来获取所有已存在的页面路径，再进行重复判断。

示例代码：

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

  // 查询所有已存在的页面路径
  const existingPagesQuery = await graphql(`
    query GetAllExistingPages {
      allSitePage {
        nodes {
          path # 页面的路径，对应你设置的slug
        }
      }
    }
  `);

  // 将已存在的路径存入Set方便快速查找
  const existingSlugs = new Set(
    existingPagesQuery.data.allSitePage.nodes.map(page => page.path)
  );

  // 处理API数据
  const apiResponse = await fetch("https://your-api-endpoint.com/data");
  const apiData = await apiResponse.json();
  
  for (const item of apiData) {
    const pageSlug = `/content/${item.slug}`;
    if (!existingSlugs.has(pageSlug)) {
      createPage({
        path: pageSlug,
        component: require.resolve("./src/templates/content-template.js"),
        context: { itemId: item.id },
      });
    }
  }
};

注意事项 #

• 确保不同API数据源生成的slug格式完全一致（比如是否带前导斜杠、大小写是否统一），避免因为格式差异导致误判重复。
• 方案1的性能更好，因为它不需要额外的GraphQL查询，适合处理大量数据的场景。

内容的提问来源于stack exchange，提问作者Pedro Filipe