为什么我的 Gatsby 动态 slug 不起作用答案

【问题标题】：why is my Gatsby dynamic slug not working为什么我的 Gatsby 动态 slug 不起作用
【发布时间】：2022-01-13 23:25:12
【问题描述】：

我将首先显示代码并链接我正在关注的article。基本上我一直收到这个错误代码“/episode-one 还没有页面或功能”。有人可以告诉我我的文件路径有什么问题吗？我尝试使用文件夹结构来匹配文章，但没有任何改变。

这是 index.js 的代码

文件夹结构 - gatsby-contentful-site\src\episodes/src\episodes\podsode.js src\pages\EpisodeDetails

索引页面 {data.allContentfulPodcast.edges.map(slug => ${slug.node.slug}}>{slug.node.title} )}

gatsby node.js

const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const response = await graphql(
      `
      query MyQuery {
        contentfulPodcast {
          slug
          title
        }
      }
      
  `)
   response.data.allContentfulPodcast.edges.forEach(edge => {
createPage({
  path: `/EpisodeDetails/${edge.node.slug}`,
  component: path.resolve("./src/episodes/podsode.js"),
  context: {
    slug: edge.node.slug,
  },
})

}) }

剧集详情

function EpisodeDetails ({props}) {
  const data = useStaticQuery 
  (
  graphql `
  query  {
  allContentfulPodcast(sort: {fields: publishedDate, order: DESC}) {
    edges {
      node {
        title
        slug
      }
    }
  }
}

  `)
  
    return (
        <div>
     {data.allContentfulPodcast.edges.map(edge => 
     <h2>
                <Link to={`/EpisodeDetails/${edge.node.slug}/`}>{edge.node.title}</Link>
              </h2>
              )}
        </div>
    )
}

export default EpisodeDetails

podsode.js

export const query = graphql`
  query($slug: String!) {
    contentfulPodcast(slug: { eq: $slug }) {
      title
     
      
    }
  }
`

const podsode = props => {
    return (
        <div>
            <h1>{props.data.contentfulPodcast.title}</h1>
        </div>
    )
}


export default podsode

【问题讨论】：

标签： reactjs graphql gatsby slug contentful

【解决方案1】：

您正在模板中使用应该查询所有数据（剧集）的查询并循环遍历它们以创建动态页面和单个查询以在 gatsby-config.js 中进行过滤。

const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const response = await graphql(
      `
      query MyQuery {
        contentfulPodcast {
          slug
          title
        }
      }
      
  `)
   response.data.allContentfulPodcast.edges.forEach(edge => {
createPage({
  path: `/EpisodeDetails/${edge.node.slug}`,
  component: path.resolve("./src/episodes/podsode.js"),
  context: {
    slug: edge.node.slug,
  },
})

在上面的 sn-p 中，您没有要循环的 allContentfulPodcast.edges，您的节点称为 contentfulPodcast。在localhost:8000/___graphql 中测试它们，但您应该执行以下操作：

const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const response = await   (
   graphql `
     query  {
      allContentfulPodcast(sort: {fields: publishedDate, order: DESC}) {
        edges {
          node {
           title
           slug
         }
       }
     }
   }
`)
response.data.allContentfulPodcast.edges.forEach(edge => {
  createPage({
    path: `/EpisodeDetails/${edge.node.slug}`,
    component: path.resolve("./src/episodes/podsode.js"),
    context: {
      slug: edge.node.slug,
    },
  })

这应该基于localhost:8000//EpisodeDetails/episode-onelocalhost:8000//EpisodeDetails/episode-one查询的 slug（从所有剧集中提取并迭代它们）创建你的剧集

slug 被传递到模板中，您应该在模板中查询contentfulPodcast。

【讨论】：

谢谢！这行得通！