javascript - 内容渲染长文本

Question

我正在弄清楚如何呈现标准长文本，但有问题。

请查看我的查询，该查询在 graphQL 操场上运行时有效。

{
  allContentfulArticle {
    nodes {
      title
      slug
      para {
        para
      }
    }
  }
}

这是我的 article.js 文件

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

const Article = props => (
  <div>
    <header>
      <h1>{props.data.site.siteMetadata.title}</h1>
    </header>

    <main>
      <h1>{props.data.contentfulArticle.title}</h1>
    </main>

    <footer>
    <p>{props.data.site.siteMetadata.author}</p>
    </footer>
  </div>
)

export default Article

export const query = graphql`
  query Article($id: String) {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
    contentfulArticle(id: { eq: $id }) {
      title
      subtitle
      slug
      para {
        para
      }
    }
  }
`

奇怪的是，我可以title轻松地呈现类似内容类型的内容 - 只是简短。

我可以看到我的title,slug和其他元数据字段显示在 localhost 上，但不是para段落。

标签： javascriptgraphqlcontent-management-systemgatsbycontentful

Answer 1

尽管您的 GraphQL 查询看起来很完美，但您并没有呈现长文本字段。只需使用：

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

const Article = props => (
  <div>
    <header>
      <h1>{props.data.site.siteMetadata.title}</h1>
    </header>

    <main>
      <h1>{props.data.contentfulArticle.title}</h1>
    </main>
    <p>Your long text is: {props.data.contentfulArticle.para.para}</p>
    <footer>
    <p>{props.data.site.siteMetadata.author}</p>
    </footer>
  </div>
)

export default Article

export const query = graphql`
  query Article($id: String) {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
    contentfulArticle(id: { eq: $id }) {
      title
      subtitle
      slug
      para {
        para
      }
    }
  }
`