See Sanity in action 👀 Join us for a live product demo + Q&A →

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

9 replies
Last updated: Feb 27, 2023
I am trying to figure out how to join references in GraphQL / Gatsby. I see info related to GROQ here: . 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!
Feb 15, 2023, 11:20 PM
The nice thing about the Gatsby source plugin is that you can automatically automatically resolve references to a specified depth on a
field. There’s more on that here .
Feb 16, 2023, 12:02 AM
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.
Feb 16, 2023, 10:36 PM
Can you share your code?
Feb 17, 2023, 4:48 PM
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 (



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




export default Submission
Feb 17, 2023, 7:23 PM
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}>







export default Serializers
Feb 17, 2023, 7:24 PM
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’ },




Feb 21, 2023, 1:43 AM
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?
Feb 27, 2023, 1:07 PM
How are you querying here? Are you using the
Feb 27, 2023, 5:08 PM
_rawPromptText(resolveReferences: {maxDepth: 5})
Feb 27, 2023, 9:00 PM – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in