Get help on Discord

Moving to GraphQL in Gatsby - Reference Returns Null

5 replies
Last updated: Jul 22, 2022
Hi, I am new to Sanity and I have some issues with a reference type. I have a job schema where I have a skill field that references jobskill. Now when I move to GraphQL in Gatsby, the result for the skills is always null. Basically I think gatsby thinks that the skills field is just an arrray of strings and not of objects.This is my schema:

export default {
    name: 'job',
    title: 'Jobs',
    type: 'document',
    fields: [
        {
            name: 'title',
            title: 'Jobtitel',
            type: 'string',
        },
        {
            name: 'slug',
            title: 'Link',
            type: 'slug',
            description: 'Eindeutiger Link, welcher zum spezifischen Job führt. (z.B. projekt-manager)',
            options: {
                source: 'title',
                maxLength: 96,
            },
        },
        {
            name: 'datum',
            title: 'Datum',
            type: 'date',
            options: {
                dateFormat: 'YYYY-MM-DD',
                calendarTodayLabel: 'Today'
            },
            initialValue: (new Date()).toLocaleDateString('en-CA')
        },
        {
            name: 'skills',
            title: 'Skills',
            type: 'array',
            of: [{
                    type: 'reference',
                    to: [{type: 'jobskill'}]
                }]
        },
        {
            name: 'benefits',
            title: 'Vorteile',
            type: 'array',
            of: [{type: "string"}]
        },
        {
            name: 'konditionen',
            title: 'Konditionen',
            type: 'array',
            of: [{type: "string"}]
        }
    ],
}
And my jobskill schema looks like this:


const colors = [
    { "title": "Schwarz", "value": "000000"},
    { "title": "Orange", "value": "ff603b"},
    { "title": "Grün", "value": "b7b783"},
]

export default {
    name: 'jobskill',
    title: 'Job Skills',
    type: 'document',
    fields: [
        {
            name: 'title',
            title: 'Fähigkeit Bezeichnung',
            type: 'string',
        },
        {
            name: 'color',
            title: 'Farbe der Fähigkeit',
            type: 'string',
            options: {
                list: colors,
                layout: "dropdown"
            },
        }
    ]
}
And this is my request:


query ($slug: String) {
  sanityJob(slug: {current: {eq: $slug}}) {
    title
    benefits
    konditionen
    skills
  }
}
and that is the result I get:


{
  "data": {
    "sanityJob": {
      "title": "Projekt Manager:in M/W/D",
      "benefits": [
        "Familäres Umfeld",
        "Nette Kolleg:innen"
      ],
      "konditionen": [
        "ab € 5.300 brutto / monatlich",
        "25 Urlaubstage / Jahr",
        "Jahresprovision",
        "interne Schulungen"
      ],
      "skills": [
        null
      ]
    }
  },
  "extensions": {}
}
And in my Sanity Studio I have one skill added, and if I add two, there would be two null fields.

Thanks in advance!
AI Update

I can see your issue! When using Gatsby with Sanity's GraphQL, reference fields need to be queried differently than simple string arrays. The problem is that your GraphQL query is only asking for skills as a flat field, but it's actually an array of references that need to be expanded.

Here's what's happening: Gatsby's GraphQL layer sees your reference array but doesn't automatically resolve the referenced documents. You need to explicitly tell it to expand those references.

Try updating your GraphQL query like this:

query ($slug: String) {
  sanityJob(slug: {current: {eq: $slug}}) {
    title
    benefits
    konditionen
    skills {
      _id
      title
      color
    }
  }
}

The key change is that instead of just skills, you're now accessing skills { } as an object and selecting the fields you want from the referenced jobskill documents.

If that doesn't work, there's an alternative approach using the _raw field that Gatsby provides. This is sometimes necessary when the standard GraphQL resolver has issues:

query ($slug: String) {
  sanityJob(slug: {current: {eq: $slug}}) {
    title
    benefits
    konditionen
    _rawSkills
  }
}

The _rawSkills field will give you the raw data structure from Sanity, but you'll need to manually resolve the references in your component code using Sanity's client, or you can use a combination approach where you still get the resolved data through a proper nested query.

Best solution: Make sure your Gatsby schema is properly configured to understand the references. Sometimes you need to rebuild your Gatsby GraphQL schema. Try running:

gatsby clean
gatsby develop

This clears the cache and rebuilds the schema, which often fixes reference resolution issues.

The root cause is that gatsby-source-sanity needs to properly transform your Sanity schema into Gatsby's GraphQL schema, and reference types require explicit field selection in your queries rather than treating them as primitive values. Your schema definition looks correct, so it's really just about how you're querying the data in GraphQL!

Ok, it looks like my GatsbyJS GrapQL has an old version of the Sanity Schema. Do you know how to fix this?
Hey
user Q
! The GraphQL API needs to be redeployed any time you make a change to your schema.
You can do so with 
sanity graphql deploy
Oh perfect! thanks a lot :)
You're welcome!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?