RichText with 'gatsby-source-prismic'

[kevindamstra]

Since the documentation over here Prismic Gatsby Tutorial isn't up to date yet, I'm wondering how I could use the default gatbsy Links for linking to internal document from a Richt Textfield?

By using the plugin 'gatsby-source-prismic' we now have a html tag available,

With the 'gatsby-source-prismic-graphql' plugin we could retrieve data by using:
{bannerContent.title}

With the 'gatsby-source-prismic' plugin we can now use:
{bannerContent.title.html}

It seems I can no longer use the RichText element so I'm currently using;

<div className="banner-description" dangerouslySetInnerHTML={{ __html: bannerContent.description.html }} />

The links in the document get generated like this;

<a href="(doc) => {
    if (doc.type === 'page') {
        return `/${doc.uid}`
    }
    return '/'
}">

How can I use a linkresolver for a RichText field with the new 'gatsby-source-prismic' plugin?

With best regards,

Kevin

[kevindamstra]

Dear Fares,

Thank you for the response, when I go through your codesample I notice the "gatsby-source-prismic-graphql" plugin instead of the recommended "gatsby-source-prismic" plugin.

When we query the content for example like suggested;

<RichText
    render={slice.primary.left_column_text || []}
    serializeHyperlink={GatsbyLink}
/>

We use "slice.primary.left_column_text" except for the new plugin which utilizes a selector for the content, like "text", "html" or raw. In the example above this is not the case. The graphql queries for both plugins are quite different from each other.

Is there a way we can render a RichText field without using the "gatsby-source-prismic-graphql"?

[Fares]

I really apologize for this, but there is an error here, we don't recommend the gatsby-source-prismic-graphql any more, so I will provide a new code sneppit with gatsby-source-prismic.

[Fares]

Hi Kevin,

Thanks for contributing to the Prismic community.

In fact, with 'gatsby-source-prismic' plugin you still can use Prismic RichText helper in almost the same way, you just need to pass your structured text to the render attribute such as
<RichText render={slice.primary.section_title.raw} and use serializeHyperlink={GatsbyLink}

Here is a code snippet that displays a text slice with a structured text field with a link

import React from 'react'
import { RichText } from 'prismic-reactjs'
import GatsbyLink from '../GatsbyLink'
import topIcon from '../../images/top-icon.png'

const TextInfo = ({ slice }) => (
  <section className="text-info">
    <div className="left-column">
      <img src={topIcon} alt="Checkbox icon" />
      <RichText
        render={slice.primary.left_column_text.raw || []}
        serializeHyperlink={GatsbyLink}
      />
    </div>
  </section>
)

export default TextInfo

And here is how the Gatsby link would look like

import React from 'react'
import { Link } from 'gatsby'
import linkResolver from '../utils/linkResolver'

const GatsbyLink = (type, element, content, children, index) => {
  if (element.data.link_type === 'Document') {
    return (
      <Link to={linkResolver(element.data)} key={element.data.id}>
        {content}
      </Link>
    )
  }
  return null
}

export default GatsbyLink

Please don't forget to include your link resolver in gatsby-config.js like this

const { prismicRepo, previewPath, releaseID, accessToken } = require('./prismic-configuration')
const linkResolver = require('./src/utils/linkResolver')

const reponame = process.env.PRISMIC_REPO_NAME = process.env.PRISMIC_REPO_NAME || prismicRepo
const prismicReleaseID = process.env.PRISMIC_RELEASE_ID || releaseID || ''

const gastbySourcePrismicConfig = {
  resolve: 'gatsby-source-prismic',
  options: {
    repositoryName: reponame,
    accessToken: apiKey,
    releaseID: prismicReleaseID,
    linkResolver: ({ node, key, value }) => (doc) => linkResolver(doc),
    ...
  },
}

Please let us know if that answers your question,
Fares

[kevindamstra]

@Fares

Thank you for your response, even though I still got an error at first I had to change the linkResolver function.

I initially had the following linkResolver;

const linkResolver = ({ node, key, value }) => (doc) => {
    if (doc.type === 'page') {
        return `/${doc.uid}`
    }
        return '/'
}

module.exports = linkResolver

I updated the linkResolver to this;

const linkResolver = (doc) => { 
    if (doc.type === 'page') {
        return `/${doc.uid}`
    }
        return '/'
    }

module.exports = linkResolver

Glad it is solved now, is there any change we could update the documentation?

With best regards,

Kevin

[Fares]

Glad to hear that, please let us know if you have any other questions.