Trouble getting the slug from an internal link in a Sanity query

14 replies

Last updated: Aug 9, 2023

Can anyone help? I run this query trying to get the slug from internal link

*[_type == "page" && _id == "c57c9277-0669-4bf3-8cba-f6fc16a90955"]{
  _id,
  _createdAt,
  title,
  "slug": slug.current,
  pageBuilder[]{
    _key,
    _type,
    ...,
    cta{
      preHeading,
      heading,
      description,
      button {
        text,
        link {
          internalLink->{
            "slug": slug.current
          },
        }
      },
    },
  }
}

But i get back I still only get back _type: reference and _ref: b2971fe5-7509-4630-8519-0c107fe1a876 with no slug? What am i doing wrong here?

AI Update

I can see what's happening! The issue is with where you're placing the dereference operator (->). In your query, you have:

internalLink->{
  "slug": slug.current
}

This syntax is correct and should work. However, if you're still getting back just _type: reference and _ref, it likely means the dereference isn't happening at all. Here are the most common causes:

1. The reference might not exist at the internalLink level

Looking at your structure, the reference might actually be nested inside the link object. Try moving the -> operator:

link->{
  "slug": slug.current
}

Or if internalLink is directly inside link:

link {
  internalLink->{
    "slug": slug.current
  }
}

2. Make sure you're spreading the button object correctly

Your full query should look like this:

*[_type == "page" && _id == "c57c9277-0669-4bf3-8cba-f6fc16a90955"]{
  _id,
  _createdAt,
  title,
  "slug": slug.current,
  pageBuilder[]{
    _key,
    _type,
    ...,
    cta{
      preHeading,
      heading,
      description,
      button {
        text,
        link {
          internalLink->{
            "slug": slug.current
          }
        }
      }
    }
  }
}

3. Check your schema structure

The reference access operator only works on fields that are actually defined as references in your schema (with type: 'reference'). Make sure your internalLink field is defined as a reference type, not just a regular object.

Quick debugging tip: Try querying just the button/link part to see the raw structure:

*[_type == "page" && _id == "c57c9277-0669-4bf3-8cba-f6fc16a90955"].pageBuilder[].cta.button.link

This will show you exactly what structure you're working with and where the reference actually lives. Once you see the raw data, you'll know exactly where to place the -> operator.

I think you need to do a join query to get the reference details, they aren't included by default in the query.

user L

I'm not too sure where to put my join query as button is an object that comes from an external button-schema.ts and included in my cta schema. If i create an internal link inside cta {not as an external object} i can access the slug but because button is an object this is where i am having trouble. Any help would be much appreciated as have been blocked for days on this!

Would you be able to share your code for the button and cta schema? I am specifically interested in the type definition for button and cta schemas, how you are referencing the cta in the button schema, as well as the slug field in cta.

user F

your help would be highly appreciated. Code as follows:
Button schema

import { defineType } from "sanity";

export const button = defineType({
  name: "button",
  type: "object",
  title: "Button",
  fields: [
    {
      name: "text",
      type: "string",
      title: "text",
    },
    {
      name: "link",
      type: "object",
      title: "Link",
      fields: [
        {
          name: "externalLink",
          type: "object",
          title: "External link",
          fields: [
            {
              name: "href",
              type: "url",
              title: "URL",
            },
            {
              title: "Open in new tab",
              name: "blank",
              description: "Read <https://css-tricks.com/use-target_blank/>",
              type: "boolean",
            },
          ],
          // hidden: ({ parent, value }) => !value && parent?.internalLink
        },
        {
          name: "internalLink",
          type: "object",
          title: "Internal link",
          // hidden: ({ parent, value }) => !value && parent?.externalLink,
          fields: [
            {
              name: "reference",
              type: "reference",
              title: "Reference",
              to: [
                { type: "page" },
                // { type: "staticPages" },
                // other types you may want to link to
              ],
            },
          ],
        },
      ],
    },
  ],
});

Cta schema:

import { defineField, defineType, defineArrayMember } from "sanity";

export const cta = defineType({
  name: "cta",
  type: "object",
  title: "CTA Section",
  fields: [
    defineField({
      name: "preHeading",
      title: "Pre Heading",
      type: "string",
    }),
    defineField({
      name: "heading",
      title: "Main CTA heading",
      type: "string",
    }),
    defineField({
      name: "description",
      title: "Description text",
      type: "array",
      of: [{ type: "block" }],
    }),
    // Add your button schema as a reference
    defineField({
      name: "button",
      title: "Button",
      type: "button", // Use your button object type here
    }),
  ],
});

Thanks for sharing the code. Assuming your

pageBuilder

field definition looks like this:

defineField({
	name: 'pageBuilder',
	type: 'array',
	title: 'Page Builder',
	of: [{type: 'cta'}],
}),

A groq query like this should probably work:

*[_type == 'page' && _id == 'c57c9277-0669-4bf3-8cba-f6fc16a90955'] {
  slug,
  "Internal Slug": pageBuilder[].button.link.internalLink.reference->slug,
}

ah thank you this now works, fantastic! Is there a reason it does not work when nested further in the query as I had it before?

Btw happy if you want to point me to a resource to save you typing out a full explanation 🙂

I am not a 100% sure but the one thing that does stand out is the fact that

internalLink

has field

Reference

of type

reference

.In groq, if you want to follow a

reference

, you will need to use the dereferencing operator

->

as documented here .More resources
here , here and here if it helps 🙂
Edit: Looks like you were just missing one bit in your original GROQ query:

button{
	link {
		internalLink{
			reference->{ // <- this was missing :)
				"slug": slug.current
			}
		}
	}
}

Yea I understand that, thank you for the resources, this has got me past many hours trying to work it out so i'm very grateful. Thanks again!

regarding your edit above, it still does not work in that way, it only works if done how you first suggested at the top level of the query going through pageBuilder[] etc
Here is my edit based on what you said in your edited reply:

cta{
              preHeading,
              heading,
              description,
              button {
                text,
                link {
                  externalLink {
                    href,
                    blank
                  },
                  internalLink{
                    reference->{
                      "slug": slug.current
                    }
                  },
                }
              },
            },

But i still get back:

button:{…} 3 properties
_type:button
link:{…} 1 property
internalLink:{…} 1 property
reference:{…} 2 properties
_ref:17e91108-79d2-4243-945f-78ba22730d08
_type:reference
text:My button
hero:null
cta:null

Ah so based on the nesting as seen in your screenshot, can you try something like this?

*[_type == "page" && _id == "c57c9277-0669-4bf3-8cba-f6fc16a90955"]{
  "internal slug": pageBuilder[]{
    button{
      link {
        internalLink{
          reference->{
            slug
          }
        }
      }
    }
  }
}

This works fine, so i think that narrows it down to either the pageBuilder[] array or the cta{} object within it being the problem, for reference here is my query as a whole whith those recent edits:

*[_type == "page" && _id == "c57c9277-0669-4bf3-8cba-f6fc16a90955"]{
 _id,
          _createdAt,
          title,
          "slug": slug.current,
   "Internal Slug": pageBuilder[]{
   button{
   link{
     internalLink{
       reference->{
         slug
       }
     }
   }
   }
   },
          pageBuilder[]{
            _key,
            _type,
            ...,
            hero{
              heading,
              descriptiveHeading,
              excerpt,
              "imageUrl": image.asset->url,
              "imageAlt": image.alt,
              buttons[]{
                label,
                variant,
                link {
                  anchor,
                  internal->{
                    ...,
                    "slug": reference->slug.current
                  },
                }
              }
            },
            cta{
              preHeading,
              heading,
              description,
              button {
                text,
                link {
                  externalLink {
                    href,
                    blank
                  },
                  internalLink{
                    reference->{
                      "slug": slug.current
                    }
                  },
                }
              },
            },
            "servicesSection": servicesSection[]{
              _key,
              _type,
              preHeading,
              mainHeading,
              excerpt,
              "imageUrl": image.asset->url,
              "imageAlt": image.alt,
              "services": services[]->{
                _id,
                _createdAt,
                name,
                "slug": slug.current,
                "icon": image.asset->url,
                content,
                excerpt,
              }
            },
          }
        }

I think the issue is the

cta{}

bit.An easy way to verify would be to run something like this and examine the result.

*[_type == "page" && _id == "c57c9277-0669-4bf3-8cba-f6fc16a90955"]{
  pageBuilder[]
}

You will see that the nesting is as follows: pageBuilder -> button -> link -> internalLink -> reference.

I would then build on top of this one level at a time, observing the result as I go e.g. pageBuilder -> button

*[_type == "page" && _id == "c57c9277-0669-4bf3-8cba-f6fc16a90955"]{
  pageBuilder[]{
    button,
  }
}

Then traverse the next level: pageBuilder -> button -> link

*[_type == "page" && _id == "1379eccc-b231-4b19-a523-a99c064e558d"]{
  pageBuilder[]{
    button{
      link,
    },
  }
}

And so forth till you are able to get to the final level.

The thing is i can get to the final level this is not a problem. The problem is deferencing the linked document ref when we get to the final level

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 free Explore the demo

Trouble getting the slug from an internal link in a Sanity query

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

Was this answer helpful?