I am writing a page showing current posts, I use Contentful CMS and fetch the GraphQl API. I have normal string types in the Content model, but the last one is rich text.

I'm going to add a card with the post's name, title, date, and just a short post text. In this case, I reset the rich text formatting to make it behave like normal text.

When I try to add a list of regular strings in a component everything works, but when I add functions with a rich text render, it returns an error:

Cannot read properties of undefined (reading 'props')

I've tried different ways to do it, and it still won't work. I want to combine one query that fetches normal strings and another that fetch the raw Rich text and render Rich text without formatting

Visually, the list should look like this:

And my error displayed in Gatsby looks like this:

Finally, I would like to show you, most importantly - my code:

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

import Layout from "../components/base/layout"

import {
  PageWrapper,
  BlogCardWrapper,
  BlogCardElement,
  ThumbnailImage,
  ContentInlineWrapper,
  PreContentParagraph,
  ReadMoreParagraph,
  BlogTitleHeader,
  BlogDateParagraph,
} from "../styles/aktualnosci.style"

import { Headers } from "../utils/data/headersData"
import H1 from "../components/headers/h1"

const AktualnosciPage = ({ data }) => {

  const articles = data.allContentfulArtykul.edges
  const post = this.props.data.allContentfulArtykul.edges[0].node.content

  const option = {
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: node => {
            return <img/>
        },
        [BLOCKS.HEADING_1]: (node, children) => {
            return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
        },
        [BLOCKS.HEADING_5]: (node, children) => {
            return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
        },
        [BLOCKS.PARAGRAPH]: (node, children) => {
            return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
        },
        [BLOCKS.QUOTE]: (node, children) => {
            return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
        },
        [BLOCKS.UL_LIST]: (node, children) => {
            return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
        },
        [BLOCKS.LIST_ITEM]: (node, children) => {
            return <p style={{padding: '0', margin: '0', display: 'inline-block'}}>{children}</p>
        },
    },
    renderMark: {
        [MARKS.BOLD]: (node, children) => {
            return <p style={{fontWeight: '100'}}>{children}</p>
        },
    }
  }

  const output = renderRichText(post, option)

  return (
    <Layout>
      <PageWrapper>
        <H1 name={ Headers.Aktualnosci }/>
        <BlogCardWrapper>
            {articles.reverse().map(({node}) => {
                return (
                  <div key={node.slug}>
                    <a href={"/aktualnosci/"   node.slug}>
                      <BlogCardElement>
                        <ThumbnailImage
                          className="j10_dfg4gvBDG"
                          src={node.thumbnailPhoto.fluid.src}
                          srcSet={node.thumbnailPhoto.fluid.srcSet}
                        />
                        <ContentInlineWrapper>
                          <BlogTitleHeader>{node.title}</BlogTitleHeader>
                          <PreContentParagraph>{output}</PreContentParagraph>
                          <BlogDateParagraph>{node.createdAt}</BlogDateParagraph>
                        </ContentInlineWrapper>
                        <ReadMoreParagraph className="j5_dfg4gvBDG">Czytaj więcej <span style={{color: '#BF1E2D', fontSize: '11px'}}>&#10148;</span></ReadMoreParagraph>
                      </BlogCardElement>
                    </a>
                  </div>
                )
            })}
        </BlogCardWrapper>
      </PageWrapper>
    </Layout>
  )
}

export const query = graphql`
    query {
      allContentfulArtykul {
        edges {
          node {
            id
            thumbnailPhoto {
              fluid {
                src
                srcSet
              }
            }
            title
            slug
            content {
              raw
              references {
                ... on ContentfulAsset {
                  __typename
                  contentful_id
                  fixed(width: 200) {
                    src
                    srcSet
                  }
                }
              }
            }
            createdAt(formatString: "YYYY-MM-DD")
          }
        }
      }
    }
`

export default AktualnosciPage

If something is missing, please let me know.

CodePudding user response：

You are destructuring your queried data in the component declaration:

const AktualnosciPage = ({ data }) => {}

You are taking props.data directly with { data }

Moreover, because you are in a non-class-based component (you are using a functional component), the use of this is strictly restricted.

You should do directly:

  const post = data.allContentfulArtykul.edges[0].node.content

As you do in the line above taking data.allContentfulArtykul.edges.

For a more succinct approach, you can also do:

  const articles = data.allContentfulArtykul.edges
  const post = articles[0].node.content