内容丰富的文本未呈现

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: String) { contentfulLongPost(Slug: {eq: $slug}) { 标题 updatedAt(formatString: "MMMM Do, YYYY") 身体 { 生的 } } }

`;

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/

可以在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 助手自定义输出