添加从 contentful 和 gatsby 生成的可点击标签

编程问答 2022-12-05

问题描述

几乎按照这个帖子 Adding tags to Gatsby Contentful blog 到 T 但仍然找不到它不起作用的原因...

import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  query($slug: String!,$tag: [String!]) {
    contentfulBrunchPost(slug: { eq: $slug },tag: { in: $tag }) {
      title
      slug
      tag
    }
  }
`

const TagPost = props => {
  return <h1>{props.data.contentfulBrunchPost.title}</h1>
}

export default TagPost

我收到错误“无法读取未定义的属性‘contentfulBrunchPost’”。在 contentful 和 gatsby 中对 graphiQL 非常新，所以指向正确的方向会很棒

解决方法

我建议在 http://localhost:8000/___graphql 上访问您本地版本的 Graphiql 并复制您的确切查询。查询是否在那里返回数据？如果不是，那么您的查询可能不正确。如果它确实返回数据，那么您可以深入研究它以确定要在代码中使用的正确引用。

,

扩展自：

感谢您的帮助！我收到错误 "message": "Variable "$slug" of 必需的类型“字符串！”没有提供。”任何一点都正确 方向？ ——

由于感叹号 (slug)，您已将 ! 字段设置为不可为空（如必填字段）。这意味着必须从 gatsby-node.js 文件提供给模板 (TagPost) 以确保该字段始终存在或删除该字段的可空性以使其可为空：

export const query = graphql`
  query($slug: String,$tag: [String!]) {
    contentfulBrunchPost(slug: { eq: $slug },tag: { in: $tag }) {
      title
      slug
      tag
    }
  }

您的 createPage 函数应如下所示：

createPage({
  path: `/tag/${slugifiedTag}`,component: path.resolve("./src/templates/tag-post.tsx"),// your tagComponent
  context: {
    slug: edge.node.slug,tag: edges.node.tag
  },})
contentfulgatsbygraphiqlreactjsreactjsreactjsreactjs