Estoy tratando de representar el texto enriquecido de esta consulta, pero la página está en blanco. Estoy realmente confundido porque los documentos solo muestran el ejemplo de cómo se representa un recurso de imagen. ¿¿Alguien puede ayudar??
Estoy tratando de mostrar el texto enriquecido en el formato en el que fue escrito con contenido, es decir, la primera línea debe estar en negrita
/* 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'; import { renderRichText } from "gatsby-source-contentful/rich-text" import { BLOCKS, MARKS } from "@contentful/rich-text-types" export const query = graphql` query MyQuery($slug: String) { contentfulLongPost(Slug: {eq: $slug}) { title updatedAt(formatString: "MMMM Do, YYYY") body { raw } } } `; const options = { renderMark: { [MARKS.BOLD]: (text) => <span>{text}</span> }, } const CaseStudy = ({data}) => { const { bodyRichText } = data.contentfulLongPost return ( <Layout> <div> {bodyRichText && renderRichText(bodyRichText, options)}</div> </Layout> ); }; export default CaseStudy; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>No tiene ningún campo bodyRichText , por lo que no entiendo por qué está desestructurando en:
const { bodyRichText } = data.contentfulLongPost Esto se extrae de los documentos, donde su estructura de datos tiene un bodyRichText . Estás accediendo directamente a raw por lo que puedes omitirlo. Suponiendo que su consulta funcione (y es mucho asumir, pruébelo en localhost:8000/___graphql ), creo que está buscando:
const CaseStudy = ({data}) => { return ( <Layout> <div> {data.contentfulLongPost.body && renderRichText(data.contentfulLongPost.body, options)}</div> </Layout> ); }; Pero supongo que tendrás que modificar más la consulta. No estoy seguro en absoluto de que esté obteniendo correctamente el campo raw formato en todos los casos de uso.