通过gatsby-node.js重写Gatsby slug未修改URL问题求助

核心原因（90%概率是这个） #

你在createPagesAPI中创建页面时，没有使用你自定义生成的fields.slug，而是调用了Gatsby默认生成的、保留文件夹结构的slug字段。
你可以按以下步骤排查：

1. 打开本地调试环境的GraphiQL调试页面（默认地址为http://localhost:8000/___graphql），执行以下查询确认自定义slug是否正确生成：

query {
  allMdx {
    nodes {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
  }
}

如果返回结果中fields.slug是你预期的/blog/my-article格式，说明你写的onCreateNode逻辑完全正常，问题出在页面创建阶段。

2. 检查gatsby-node.js中的createPages函数，确认你查询的是fields下的自定义slug，而非默认的slug字段。
   错误示例：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const queryResult = await graphql(`
    query {
      allMdx {
        nodes {
          id
          slug // 这里调用的是Gatsby默认生成的带年份的slug
        }
      }
    }
  `)
  queryResult.data.allMdx.nodes.forEach(node => {
    createPage({
      path: node.slug, // 用了错误的slug生成路径
      component: require.resolve("./src/templates/blog-post.js"),
      context: {
        id: node.id
      }
    })
  })
}

正确写法：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const queryResult = await graphql(`
    query {
      allMdx {
        nodes {
          id
          fields {
            slug // 调用你通过createNodeField生成的自定义slug
          }
        }
      }
    }
  `)
  queryResult.data.allMdx.nodes.forEach(node => {
    createPage({
      path: node.fields.slug,
      component: require.resolve("./src/templates/blog-post.js"),
      context: {
        id: node.id
      }
    })
  })
}

其他可能原因 #

• 清理缓存不彻底：确认你同时删除了项目根目录下的.cache和public两个文件夹，也可以直接执行npx gatsby clean命令完成全量缓存清理，再重新启动项目。
• 存在冲突的配置：检查是否有其他插件或者onCreateNode逻辑在你之后修改了fields.slug的值，或者配置了全局重定向规则，将不带年份的路径强制跳转到了带年份的旧路径。

内容的提问来源于stack exchange，提问作者Patrick Desjardins