PrismicRichtext & PrismicText w/ Gatsby using @prismicio/react

Hello All,

I am running into an issue using PrismicRichtext and PrismicText within my Gatsby project. The project is based on the gatsby tutorial from the Prismic website. The tutorial has the user creating a new project using a starter theme https://github.com/prismicio/gatsby-getting-started-tutorial.

The theme is currently using prismic/reactjs and I decided to go ahead and migrate to @prismicio/react while the project is still new. I went through the migration docs and everything seemed pretty straightforward.

While the project builds with no error I cannot seem to render any copy using PrismicText or PrismicRichtext. For instance, I created a Contact component and am using a StaticQuery within. Below is an example of what I have so far. Also, note I am pretty new with Gatsby and hoping someone can help!

import React from 'react';
import { Seo } from '../Seo';
import { StaticQuery, graphql } from 'gatsby'
import { PrismicText } from '@prismicio/react'

const ContactForm = () => {
    return (
        <StaticQuery
            query={ContactFormQuery}
            render={data => (
                <section>
                    <Seo title="Contact" description="If you would like to get in contact with us please fill out the contact form." />
                    <form>
                        <div>
                            <label htmlFor="contactName"><PrismicText field={data.prismicContactForm.data.name_copy}/></label>
                            <input id="contactName" type="text" value="Name" onChange={() => console.log('input changed')}/>
                        </div>
                    </form>
                </section>
            )}
        />

    );
}

const ContactFormQuery = graphql`
    query ContactForm {
        prismicContactForm {
            data {
                name_copy {
                    text
                }
            }
        }
    }
`;

export default ContactForm;
  • Matt

Hello @tekode

Welcome to the Prismic community and thanks for reaching out to us.

StaticQuery doesn't currently accept GraphQL arguments. You can use standard queries with arguments taken from the context on Gatsby pages so if you need to access context, use a page query.

You need to change your query given in Querying Data in Components using StaticQuery example.

Let me know if you have any further questions.

Thanks,
Priyanka

Hey Priyanka and thank you for the insight! I have since tried to render a PrismicRichText field from passing data to a child component from a parent page. After doing a little research I noticed when querying my local graphql endpoint 'localhost:8000/___graphql' that the RichText field I had created is only displaying in html, raw, and text options. Going through the example Gatsby project on the Prismic website, it does allow for RichText fields. I was able to successfully load the project locally and query the graphql endpoint to find fields that offer options for rendering in RichText. Am I missing something to allow this field to show? Below is the json custom type that uses a RichText field type.

{
  "Main": {
    "uid": {
      "type": "UID",
      "config": {
        "label": "UID"
      }
    },
    "service_title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1,heading2,heading3,heading4,heading5,heading6",
        "label": "Service Title"
      }
    },
    "service_url": {
      "type": "StructuredText",
      "config": {
        "single": "heading1,heading2,heading3,heading4,heading5,heading6",
        "label": "Service Url"
      }
    },
    "service_copy": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
        "label": "Service Copy"
      }
    },
    "service_video": {
      "type": "Embed",
      "config": {
        "label": "Service Video"
      }
    },
    "service_image": {
      "type": "Image",
      "config": {
        "constraint": {},
        "thumbnails": [],
        "label": "Service Image"
      }
    },
    "service_cta": {
      "type": "StructuredText",
      "config": {
        "single": "heading1,heading2,heading3,heading4,heading5,heading6",
        "label": "Service CTA"
      }
    },
    "cta_copy": {
      "type": "StructuredText",
      "config": {
        "single": "heading1,heading2,heading3,heading4,heading5,heading6",
        "label": "CTA Copy"
      }
    },
    "body": {
      "type": "Slices",
      "fieldset": "Slice zone",
      "config": {
        "labels": {},
        "choices": {
          "case_study_card": {
            "type": "Slice",
            "fieldset": "Case Study Card",
            "description": "Card for displaying case study category",
            "icon": "credit_card",
            "display": "list",
            "non-repeat": {},
            "repeat": {
              "case_category_image": {
                "type": "Image",
                "config": {
                  "constraint": {},
                  "thumbnails": [],
                  "label": "Case Category Image"
                }
              },
              "case_category_heading": {
                "type": "StructuredText",
                "config": {
                  "single": "heading1,heading2,heading3,heading4,heading5,heading6",
                  "label": "Case Category Heading"
                }
              },
              "case_category_url": {
                "type": "StructuredText",
                "config": {
                  "single": "heading1,heading2,heading3,heading4,heading5,heading6",
                  "label": "Case Category Url"
                }
              },
              "case_category_uid": {
                "type": "StructuredText",
                "config": {
                  "single": "heading1,heading2,heading3,heading4,heading5,heading6",
                  "label": "Case Category UID"
                }
              }
            }
          }
        }
      }
    }
  }
}

Thanks for the help!
Matt

@Priyanka finally solved my issue. When installing the latest version of @prismicio/react which is currently 2.1.2, it required a newer version of gatsby-source-prismic (5.2.5 currently). Before I was using 4.2.0 and did not offer richText as an option when pulling data via graphql. Installed the latest version and was able to render everything correctly!

Anyways, thank you for the insight!