Hi everyone, hope you can help me out. I have an issue working with Gatsby and Sanity. When querying for an array of references I do get the list of references with the fields...

17 replies
Last updated: Feb 1, 2021
Hi everyone, hope you can help me out. I have an issue working with Gatsby and Sanity. When querying for an array of references I do get the list of references with the fields _key, _ref, _type but instead I would like to retrieve a list of the actual documents. Is it possible to do that? Thanks 🙂 Below the schema:

export default {
    name: 'grid',
    title: 'Grid',
    type: 'document',
    fields: [
        {
            name: 'name',
            title: 'Name',
            type: 'string',
        },
        {
            name: 'items',
            title: 'Items',
            type: 'array',
            of: [{
                type: 'reference',
                to: [
                    {type: 'track'},
                    {type: 'link'},
                    {type: 'picture'},
                    {type: 'journal'},
                ],
            }],
        },
    ],
}
AI Update

Good news - you can absolutely retrieve the actual documents instead of just the reference objects! The gatsby-source-sanity plugin handles reference resolution automatically through Gatsby's GraphQL layer.

When querying in Gatsby, you can directly access the referenced documents' fields. The plugin automatically creates relationships between your documents, so you can query the actual content using GraphQL fragments:

query {
  sanityGrid {
    name
    items {
      ... on SanityTrack {
        _id
        _type
        # add your track fields here
        title
      }
      ... on SanityLink {
        _id
        _type
        # add your link fields here
        url
      }
      ... on SanityPicture {
        _id
        _type
        # add your picture fields here
        image {
          asset {
            url
          }
        }
      }
      ... on SanityJournal {
        _id
        _type
        # add your journal fields here
        title
      }
    }
  }
}

The plugin dereferences the relationships automatically when you query the actual fields of those referenced documents. This approach is clean, type-safe, and gives you better autocomplete in your Gatsby queries.

Using _rawItems with resolveReferences

Alternatively, you can use the special _raw fields that gatsby-source-sanity provides. These give you access to the raw Sanity data with reference resolution:

query {
  sanityGrid {
    name
    _rawItems(resolveReferences: {maxDepth: 2})
  }
}

The resolveReferences option tells Gatsby to dereference the references up to a specified depth. This is particularly useful when you need the raw data structure or when working with Portable Text content.

The first approach (GraphQL fragments) is generally preferred for most use cases since it's more explicit about what data you're fetching and integrates better with Gatsby's type system!

Hey
user K
, are you using groq? Can you share your query that is only returning _key, _ref and _type?
Hey
user J
thanks for the reply 🙂 I'm using Gatsby with the gatsby-source-sanity plugin. Under items I only get the reference fields (_key, _ref, _type). The graphql query:
query {

allSanityGrid {

nodes {

items {

_key

_ref

_type

}

}

}

}
In your GraphQL Playground, does it show you any other fields?
Nope, only those...
I don’t know much GraphQL, so please bear with me, but it seems like it might have something to do with that array of multiple references.
I just spun up a project using GraphQL and can access a lot more when it’s a reference to just one type than when I added a second one.
Now, I wish I could answer where you might go from there (if that’s even on the right track), but you might be able to confirm by getting rid of three of the four reference types and seeing if it then works for you.
user K
sorry - I'm not well versed with GraphQL and I'm not sure I can help you there!
query {
  allSanityGrid {
    nodes {
      items {
        __typename
        … on track {
          # fields
        }
        __typename
        … on link {
          # fields
        }
        __typename
        … on picture {
          # fields
        }
        __typename
        … on journal {
          # fields
        }
      }
    }
  }
}
This seemed to work for me, though I don’t know if it’s the right approach. I read about it here:
https://graphql.org/learn/queries/#meta-fields
user K
are you querying outside of normal page components? e.g. are you trying to query in gatsby-node or something like that? I have run into this problem, but only when querying in odd spots. It has to do with how the plugin resolve references for you, and where this happens in the build pipeline for Gatsby. When I have run into this problem, for instance when doing custom node creation in gatsby-node then I have dealt with it by just using sanityClient and a Groq query as it more gracefully handles the references for you.
No problem
user L
, thanks a lot!
Thanks a lot
user A
, I'm going to try that.
Hi
user Q
. No, I'm querying on the index page so nothing weird there. I will keep trying tomorrow and will test the same on a different project just to double check. Hopefully tomorrow I'll let you know what was the issue. Thanks for your help.
user K
I assume you have properly scoped/hoisted GraphQL for your document. If you read about GraphQL and how the schema is generated from your SANITY schema you need to make sure the
track
,
link
and
picture
are all their own schema types. That is the only other thing I can think of. https://www.sanity.io/docs/graphql#strict-schemas-33ec7103289a
Hey
user Q
, yes I did all that. I also tried the meta fields suggestion
user A
did and it perfectly worked on the Sanity Playground, but then when I try to replicate the query on Gatsby it doesn't . Thanks for your help 🙂
Hopefully this can be helpful to anybody going through the same situation: As I mentioned on my previous comment, the meta field queries were working on the Sanity Playground but not on Gatsby as the Sanity*** docs were not recognized. I ended up removing and reinstalling the gatsby-source-sanity plugin and that fixed the issue 🤷‍♂️ Thanks
user Q
and
user A
for your help 🙂
Glad you got it working, Viso!

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.

Was this answer helpful?