Retrieve information from the rich text input field

Question

Retrieve information from the rich text input field

I'm currently working through this guide to display rich text from Contentful.

After successfully installing gatsby-source-contentful, I am now in the process of querying the rich text content using a graphQL query before integrating it into my template.

Problem: I am unable to make queries on the references field.

It seems that there was a recent update which required querying the raw subfield...however, I am having trouble querying any subfield within raw.

I'm unsure about what could be causing this issue.

Query

{
      allContentfulArticle {
        edges {
          node {
            content {
              raw
              references {
                ... on ContentfulArticle {
                  contentful_id
                  title
                  slug
                }
              }
            }
          }
        }
      }
    }

Error message https://i.sstatic.net/xAdTh.png

javascript content-management-system gatsby contentful richtext

Answer 1

Answer №1

References refer to a reference content model, which allows for retrieving data from another entry by including them within the main entry. The instructions assume adherence to the same structure, but deviation is permissible. If you do not possess a reference content model, there is no need to query it. Utilize the GraphQL playground (localhost:8000/___graphql) to view all available queryable fields.

Furthermore, the guide utilizes a GraphQL fragment on ContentfulAsset, rather than on ContentfulArticle. The assumption is that an asset entry has been added for your article; refrain from querying if this is not applicable or unavailable. Customize the query based on your specific requirements and fields.

{
  allContentfulArticle {
    edges {
      node {
        content {
          raw
        }
      }
    }
  }
}

The aforementioned query enables retrieval of raw data from the rich text model. To properly render and parse different types of rich text (such as bold text, embedded entries, links, code snippets, etc.), implement a transformer in your Gatsby project.

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)

For more information, visit here and the gatsby-source-contentful documentation.

Answer 2

References refer to a reference content model, which allows for retrieving data from another entry by including them within the main entry. The instructions assume adherence to the same structure, but deviation is permissible. If you do not possess a reference content model, there is no need to query it. Utilize the GraphQL playground (localhost:8000/___graphql) to view all available queryable fields.

Furthermore, the guide utilizes a GraphQL fragment on ContentfulAsset, rather than on ContentfulArticle. The assumption is that an asset entry has been added for your article; refrain from querying if this is not applicable or unavailable. Customize the query based on your specific requirements and fields.

{
  allContentfulArticle {
    edges {
      node {
        content {
          raw
        }
      }
    }
  }
}

The aforementioned query enables retrieval of raw data from the rich text model. To properly render and parse different types of rich text (such as bold text, embedded entries, links, code snippets, etc.), implement a transformer in your Gatsby project.

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)

For more information, visit here and the gatsby-source-contentful documentation.

Retrieve information from the rich text input field

Answer №1

Similar questions

Storing a JavaScript variable into a JSON file to preserve data

Issue with Inline JavaScript in `href` tag not functioning correctly in Firefox

How can I align rectangles with different heights to display side by side using Javascript?

Why is the error message "Invalid field name: '$conditionalHandlers' in 'collaborators..$conditionalHandlers'" popping up now?

Utilize AJAX/JS and Django to seamlessly upload files

Utilizing conditional statements and time to dynamically alter the class of an object

What is the best way to animate an element when it mounts in Vue?

Importing JavaScript into an Angular component: A beginner's guide

Utilizing Angular JavaScript for detecting and setting up JDK installations

What is the best way to obtain the value of a Promise within a function?

The hamburger menu is only functional for a single link

Running a JavaScript function directly in the browser's address bar with GWT

Error message on Android Web Console: ReferenceError - Worker object is not defined

What is the best way to include and delete several images on a canvas?

Steps to create a TypeScript function that mimics a JavaScript function

Searching for different forms of multiple words using regular expressions

The use of "Undefined in res.redirect" is a common issue that may arise when working with a combination of libraries such as

Sharing socket data between different namespaces in Socket.ioSocket.io enables the

"Utilizing GroupBy and Sum functions for data aggregation in Prisma

Utilizing Material-UI and InjectTapEventPlugin in Gatsby: A Comprehensive Guide