添加从内容和 gatsby 生成的可点击标签答案

【问题标题】：adding clickable tags generated from contentful and gatsby添加从内容和 gatsby 生成的可点击标签
【发布时间】：2021-09-24 00:52:03
【问题描述】：

非常关注这篇帖子 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'”。 graphiQL 在内容和 gatsby 方面非常新，所以指出正确的方向会很棒

【问题讨论】：

标签： reactjs gatsby contentful graphiql

【解决方案1】：

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

【讨论】：

感谢您的帮助！我收到错误“消息”：“未提供所需类型 \"String!\" 的变量 \"$slug\"。”方向正确吗？

【解决方案2】：

扩展自：

感谢您的帮助！我收到错误 "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
  },
})

【讨论】：