在 Gatsby 中从 graphQL 查询创建 slug

Posted 2023-02-24

【中文标题】在 Gatsby 中从 graphQL 查询创建 slug

【英文标题】：Creating slugs from graphQL query in Gatsby

【发布时间】：2021-07-03 02:32:44

【问题描述】：

我正在连接到一个数据库，这个查询显示了我想要的 ID：

allSongs 
        edges 
          node 
            id
          
        
      

所以现在我希望能够加载这样的动态页面： site.com/song/6

其中“6”是上面的 id。看起来我需要根据查询动态创建 slug，但我无法让它工作。任何帮助表示赞赏！

【问题讨论】：

gatsbyjs.com/docs/tutorial/part-seven

是的，我已经多次阅读第 7 部分，但这是一个不同的场景，目录中有降价文件。我在这里问一个不同的问题。

source可以是任何东西，files/DB/remote CMS，方法都一样

【参考方案1】：

您可以在gatsby-node.js 中使用createPage api 并创建动态页面

// Create song pages dynamically
exports.createPages = async ( graphql, actions ) => 
  const  createPage  = actions
  const songTemplate = path.resolve(`src/templates/songs.js`)
  const result = await graphql(`
    query 
      allSongs 
        edges 
          node 
            id
          
        
      
    
  `)
  result.data.allSongs.edges.forEach(edge => 
    createPage(
      path: `/song/$edge.node.id`,
      component: songTemplate,
    )
  )