为什么我的 Gatsby 动态 slug 不工作

Question

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

这是 index.js

的代码

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

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

盖茨比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

Answer 1

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

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,
  },
})

在上面的代码片段中，您没有 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-one

处查询的 slug（从所有剧集中提取并遍历它们）创建你的剧集

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

为什么我的 Gatsby 动态 slug 不工作

why is my Gatsby dynamic slug not working

slug

reactjs

contentful

graphql

gatsby