内容丰富的文本不呈现

Question

我正在尝试注销原始文件，但到目前为止我无法在控制台中获得任何信息。它只是显示为一个空数组。我的查询一定有问题，因为我在文档上只能找到如何呈现 ContentfulAsset 而不是我可以用 CSS

格式化的实际文本

/* eslint-disable */
import React from 'react';
import { Helmet } from 'react-helmet';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

export const query = graphql`
    query MyQuery($slug: String) {
        contentfulLongPost(Slug: { eq: $slug }) {
            title
            updatedAt(formatString: "MMMM Do, YYYY")
            body {
                raw
                references {
                    ... on ContentfulAsset {
                        contentful_id
                        __typename
                    }
                }
            }
            free
            contentType
        }
    }
`;

const caseStudy = (props) => {
    console.log(props);

    

    return (
        <Layout>
        
        </Layout>
    );
};

export default caseStudy;

我在 __typename 后面放什么才能得到原始文件？

查询 MyQuery($slug: 字符串) { contentfulLongPost(Slug: {eq: $slug}) { 标题 updatedAt(formatString: "MMMM 做, YYYY") body{ 生的 } } }

`;

Answer 1

那里有一些错误... caseStudy 必须是 CaseStudy 因为它是一个 React 组件，否则，它将被解释为一个 HTML 元素，这显然会破坏你的代码（<caseStudy> 不存在......还）。

即使 ContentfulAsset 片段是错误的，如果您的查询是正确的，您应该在 raw 字段（位于 props.data.contentfulLongPost.raw）中得到一些东西，因此请再次检查。如果您只是想打印富文本，而查询不会中断，则可以打印 raw 中的内容，而 ContentfulAsset 片段中没有数据。

如果 $slug 变量保存的过滤器可能是错误的，所以即使查询正确，您也无法获取数据，因为没有任何数据可获取。

一旦确保正确获取数据（props.data 中有数据），您可以通过将数据提升到以下位置来自定义输出：

import { BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

const Bold = ({ children }) => <span className="bold">{children}</span>
const Text = ({ children }) => <p className="align-center">{children}</p>

const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
    [BLOCKS.EMBEDDED_ASSET]: node => {
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>{JSON.stringify(node, null, 2)}</code>
          </pre>
        </>
      )
    },
  },
}

renderRichText(node.bodyRichText, options)

来源：https://www.contentful.com/developers/docs/tutorials/general/rich-text-and-gatsby/

可以在以下位置检查（几乎 copy/pasted）完整的可自定义示例：https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer

我们的想法是创建一个自定义对象，该对象将使用自定义 HTML/React 组件解析您获取的数据：

import { BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

const Bold = ({ children }) => <span className="bold">{children}</span>
const Text = ({ children }) => <p className="align-center">{children}</p>

const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
    [BLOCKS.EMBEDDED_ASSET]: node => {
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>{JSON.stringify(node, null, 2)}</code>
          </pre>
        </>
      )
    },
  },
}

function BlogPostTemplate({ data }) {

  return <div>{data.contentfulBlogPost && renderRichText(data.contentfulBlogPost, options)}</div>
}

其中 BlogPostTemplate 代表您的 CaseStudy，contentfulBlogPost 代表您的 contentfulLongPost。

总结：

修复您的组件命名
检查里面有什么props.data.contentfulLongPost.raw
检查您是否有提供的 slug 的任何数据。您可以在 localhost:8000/___graphql 中强制 slug 的值来检查哪些数据正在获取您的查询。
使用 options 对象和 renderRichText 帮助程序自定义输出

内容丰富的文本不呈现

contentful rich text not rendering

javascript

contentful

graphql

gatsby