How to display reference fields in Portable Text in GraphQL/Gatsby

I am trying to figure out how to join references in GraphQL / Gatsby. I see info related to GROQ here: https://www.sanity.io/docs/presenting-block-text#7ec986a925bc . But I can’t locate how to render reference fields in Portable Text. And BTW, I am still using Studio v2. Thanks for any help / insight you can provide!

The nice thing about the Gatsby source plugin is that you can automatically automatically resolve references to a specified depth on a

_raw

field. There’s more on that here .

Thanks for the reply. I can see the arrays of info from Portable Text when I look at it in GraphQL. However, even though I have created a component for the reference and loaded it into a serializer component the system only returns an empty <p> tag where the reference is supposed to be. I have a filed named ‘title’ and am trying to get it to display in the reference component via value.title.
Any thoughts? I’m certain it is something I am doing incorrectly, but I can’t find the right help document demonstrating how to display fields of a reference in portable text.

Can you share your code?

This is the Gatsby Component

import React from 'react'

import {GatsbyImage} from 'gatsby-plugin-image'

import {getGatsbyImageData} from 'gatsby-source-sanity'

const Submission = ({ value }) => {

const sanityConfig = {projectId: process.env.SANITY_PROJECT_ID, dataset: process.env.SANITY_DATASET}

const imageAssetId = value.ledeImage.asset._id

const imageData = getGatsbyImageData(imageAssetId, {width: 1024, placehomder: "blurred"}, sanityConfig)

const imageAlt = value.alt ? value.alt : 'an image'

return (

<section>

<h5>{value.title}</h5>

<GatsbyImage image={imageData} alt={imageAlt} />

</section>

)

}

export default Submission

This is my Gatsby serializer component:

import React from 'react'

import ImageComponent from "./image"

import Quote from "./quote"

import Submission from './submission'

const Serializers = {

types: {

promptImage: ImageComponent,

quote: Quote,

submission: Submission,

},

marks: {

link: ({children, value}) => {

const rel = !value.href.startsWith('/') ? 'noreferrer noopener' : undefined

return (

<a href={value.href} rel={rel}>

{children}

</a>

)

},

},

};

export default Serializers

And this is my rich text schema in Sanity:

export default {

name: ‘richText’,

title: ‘Text’,

type: ‘array’,

of: [

{

type: ‘block’,

},

{

type: ‘quote’,

},

{

name: ‘reference’,

type: ‘reference’,

title: ‘Submission’,

to: [

{ type: ‘submission’ },

]

},

],

}

I'm still stuck with this issue and unable to move ahead with Sanity development / implementation. Does anyone have insight in how to to display reference fields in portable text?

How are you querying here? Are you using the

resolveReferences

option?

Yes

_rawPromptText(resolveReferences: {maxDepth: 5})