Гэтсби получает довольное тело

raw объект - это новая функция, добавленная в последних версиях gatsby-source-contentful. Согласно документам:

Примечание. Имейте в виду, что в предыдущих версиях подключаемого модуля Gatsby Contentful source использовалось поле json. Он был заменен на raw, чтобы дать вам больше гибкости при рендеринге и исправить проблемы с производительностью.

Гибкость, которую указывает Contentful, - это возможность настройки вывода оператора return компонента, который будет анализировать этот ответ raw. В идеале у вас должно получиться что-то вроде:

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)

Приведенный выше фрагмент позволяет настраивать ответ для каждой записи MARKS и BLOCKS, добавляя при желании соответствующие стили и заключая его в любую структуру, которая может вам понадобиться. Компонент выше позволит вам проанализировать этот необработанный ответ и вернуть правильный компонент.

Вы можете проверить дополнительные сведения в документах Contentful, представленных в этом ответе, и в gatsby-source-contentful plugin docs < / а>.

Шаг 1. Убедитесь, что вы импортировали gatsby-source-contentful, используя:

npm install gatsby-source-contentful

Шаг 2. Добавьте к вам импорт:

import { renderRichText } from "gatsby-source-contentful/rich-text"

Шаг 3. Ваш запрос должен выглядеть примерно так

export const query = graphql`
query($slug: String!){
    contentfulBlogPost(slug: {eq: $slug}) {
        title
        publishedDate(formatString: "MMMM Do, YYYY")
        body{
            raw
        }
    }
}`

Шаг 4. Верните {renderRichText (props.data.contentfulBlogPost.body)}

const Blog = (props) => {
return(
    <Layout>
        <h1>{props.data.contentfulBlogPost.title}</h1>
        <p>{props.data.contentfulBlogPost.publishedDate}</p>
        <div>{renderRichText(props.data.contentfulBlogPost.body)}</div>
    </Layout>

)

}

Надеюсь, это поможет, это мой первый ответ о переполнении стека, и я считаю, что мы следуем тому же учебному курсу, основанному на том, как вы задали вопрос.

https://www.youtube.com/watch?v=8t0vNu2fCCM&t=590s&ab_channel=AndrewMead

Напишите мне, если вы хотите сотрудничать и учиться друг у друга.

Это тоже может помочь: https://www.gatsbyjs.com/plugins/gatsby-source-contentful/#query-rich-text-content-and-references

Добавление еще одного решения:

export const query = graphql`
query($slug: String!){
    contentfulBlogPost(slug: {eq: $slug}) {
        title
        publishedDate(formatString: "MMMM Do, YYYY")
        body{
            raw
            references {
                fixed(width: 750) {
                  width
                  height
                  src
              }
            }
        }
    }
}

`

добавить ссылки на необработанные данные.

const Blog = (props) => {
const options = {
    renderNode: {
        "embedded-asset-block": (node) => {
            const alt = "test"
            const url = props.data.contentfulBlogPost.body.references[0].fixed.src
            return <img src={url} alt={alt}/>
        }
    }
}

Наконец, в разделе рендеринга:

<div>{renderRichText(props.data.contentfulBlogPost.body, options)}</div>