Sanity reference to type comes as 'reference'

Question

In Sanity I've got this field:

{
  name: 'reference',
  type: 'reference',
  title: 'Link Reference',
  to: [
    { type: 'post' }, { type: 'questionPost' }, { type: 'linkCategory' }, { type: 'information' }
    // other types you may want to link to
  ]
},

In CMS it prompts as a link picker, I chose a link. Then in graphql it is:

"reference": 
{
          "_ref": "1a558cde-16fb-4362-8082-634468a1cc20",
          "_type": "reference"
},

The problem is that in my frontend component when I do reference._type usually is 'post', 'questionPost', 'linkCategory' or 'information' but on another page reference._type comes as 'reference'. Do you have idea why sometimes reference._type is 'reference' instead of 'post', 'questionPost' ...?

Edit:

So I've got a ctaWidget:

export default {
  name: "ctaWidget",
  type: "object",
  title: "CTA Widget",
  fields: [
    {
      name: "LeftSideText",
      type: "portableText",
      title: "Left side text"
    },
    {
      name: "text",
      type: "string",
      title: "Link text",
    },
    {
      name: 'reference',
      type: 'reference',
      title: 'Link Reference',
      to: [
        { type: 'post' }, { type: 'questionPost' }, { type: 'linkCategory' }, { type: 'information' }
        // other types you may want to link to
      ]
    },
  ],
  preview: {
  },
};

the ctaWidget is part of a Sanity portable text bioPortableText:

 export default { name: "bioPortableText",
  type: "array",
  title: "Excerpt",
  of: [
    {
      type: "block",
      title: "Block",
      styles: [{ title: "Normal", value: "normal" }],
      lists: [],
      marks: {
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
          { title: "Code", value: "code" },
        ],
      },
    },
    {
      type: "mainImage",
      options: { hotspot: true },
    },
    {
      type: "mainVideo",
    },
    {
      type: "ctaWidget",
    },
    {
      type: "prosConsWidget",
    },
  ],
};

(in CMS it looks like: ctaWidget in bioPortable text) (when I click on ctaWidget, the link reference looks like: link reference) the query that gets the bioPortableText is:

export const query = graphql` query peopleTemplateQuery($id: String!) {
post: sanityPeople(id: { eq: $id }) {
  id
  publishedAt
  email
  slug {
    current
  }
  name
  jobTitle
  image {
    ...SanityImage
    alt
  }
  location {
    location
  }
  _rawBio
  feeStructure
  qualification {
    qualification
  }
  specialisations {
    specialisation
  }
}
dictionary: allSanityDictionary {
  nodes {
    key
    value
  }
}

} `;

_rawBio I pass to the component like this:

 {_rawBio && <PortableText blocks={_rawBio} />}

then in serializer:

ctaWidget: ({ node }) => {
  if (node.LeftSideText === undefined) {
    return null;
  }
  else {
    return (<CtaWidget leftSideText={node.LeftSideText} linkTitle={node.text} reference={node.reference} />)
  }
},

then in the CtaWidget component node.reference._type should be 'post' or 'questionPost' or 'linkCategory' or 'information' so I can do node.reference.slug.current to get the url. But instead, node.reference._type is 'reference' and no slug property on node.reference... .

Answer 1

The problem you are facing is that the _rawX fields doesn't resolve references automatically. That said, Sanity provides a way for you to tell how deep you want references to be resolved at.

export const query = graphql`
  query peopleTemplateQuery($id: String!) {
    post: sanityPeople(id: { eq: $id }) {
      id
      publishedAt
      email
      slug {
        current
      }
      name
      jobTitle
      image {
        ...SanityImage
        alt
      }
      location {
        location
      }
      _rawBio(resolveReferences: { maxDepth: 5 })
      feeStructure
      qualification {
        qualification
      }
      specialisations {
        specialisation
      }
    }
    dictionary: allSanityDictionary {
      nodes {
        key
        value
      }
    }

You will need to specify a depth that suits your data structure.

Documentation: https://www.sanity.io/docs/gatsby-source-plugin#raw-fields.