内容丰富的渲染长文本

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
      }
    }
  }
`

st运行ge 的事情是我可以很容易地呈现 title 这是一个 simialir 内容类型 - 只是很短。

我可以看到我的 title、slug 和其他元数据字段显示在本地主机上，但没有显示 para 段落。

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
      }
    }
  }
`

内容丰富的渲染长文本

Contentful render long text

javascript

content-management-system

contentful

graphql

gatsby