Get help on Discord

Issues with internal links and styling in Astro/Sanity set up

11 replies
Last updated: Jan 3, 2023
Hey everyone! 👋
I'm trying to use a Sanity/Astro set up and am having some issues getting 'internal links' to resolve in queries for page block content.
I've tried to use some of the info from several places and feel like I've very close but just can't find the missing piece to make it work for me.

YouTube video some info I thought might help construct the query:
https://www.youtube.com/watch?v=9ipNrJlIj_I I tried to understand some more from here:
https://www.sanity.io/docs/how-queries-work I'm using this plugin for the basic setup:
https://www.sanity.io/plugins/astro-sanity
I'm able to get page content in general outputting perfectly - but for internalLink type blocks in there I'm seeing the references un-resolved. My query is currently set as this:


*[_type == "page" && slug == "what-is-veterinary-physiotherapy"]{
    ...,
    content[]{
        ...,
        markDefs[]{
            ...,
            _type == "internalLink" => {
                ...,
                _type == "reference" => {
                  ...,
                  reference[]->
                }
            }
        }
    }
}
Any ideas where to start/what to change?
🙂
AI Update

Looking at your query, I can see the issue with how you're trying to resolve internal link references in your Portable Text content. The problem is in the structure of your projection - you have an unnecessary nested check that's preventing proper dereferencing.

Here's the corrected query:

*[_type == "page" && slug == "what-is-veterinary-physiotherapy"]{
    ...,
    content[]{
        ...,
        markDefs[]{
            ...,
            _type == "internalLink" => {
                "slug": @.reference->slug
            }
        }
    }
}

What changed:

  1. Removed the nested _type == "reference" check - this was causing the issue
  2. Simplified to just @.reference->slug to properly dereference

How it works:

  • The @ symbol refers to the current element in the markDefs array (your internalLink object)
  • .reference-> follows the reference field using GROQ's dereference operator (->)
  • slug grabs the slug field from the referenced document

Important note: If your slug is stored as an object with a current property (which is common in Sanity), you'll need:

*[_type == "page" && slug == "what-is-veterinary-physiotherapy"]{
    ...,
    content[]{
        ...,
        markDefs[]{
            ...,
            _type == "internalLink" => {
                "slug": @.reference->slug.current
            }
        }
    }
}

This pattern is documented in Sanity's guide on joining references in Portable Text. The arrow operator (->) is the key to dereferencing and fetching data from related documents in GROQ queries.

If you need to fetch additional fields from the referenced document (like title, or the entire slug object), you can expand the projection:

markDefs[]{
    ...,
    _type == "internalLink" => {
        "slug": @.reference->slug.current,
        "title": @.reference->title
    }
}
Hello
user H
👋I think I see where your issue lies: you are treating the reference in your query as an array, but it is just an object.

_type == "internalLink" => {
                ...,
                _type == "reference" => {
                  ...,
                  reference[]->
                }
            }
// SHOULD BE 👇 (but you might want to change the way you join, but you will get the idea)
_type == "internalLink" => {
                ...,
               _type == "internalLink" => {..., "referencedDoc": @.reference-> },
            }

Thank you! So with this:
*[_type == "page" && slug == "PAGE-SLUG"]{
  ...,
  content[]{
    ...,
    markDefs[]{
        ...,
        _type == "internalLink" => {
            ...,
            "slug": @.reference->slug
        }
    }
  }
}
I seem to be able to get the data for the page and I can see the slug for the internal links too in the output in Vision, but now I cannot seem to get the portableText custom serializer to get this value, as it only seems to be passed the reference too - am I being stupid here, or missing something obvious?
🙂
hm, I am unsure, what you get as data from your query in the frontend, but this might help. Its inline objects , but it can still help you understand. Then I also have this here which might help (its v2 though).
Thanks, I think I managed to solve this issue, but have now run into another one - and can't see the resolution in the help documentation.
I want to style h1, h2, etc independently (again in Astro component outputs). I just need to know really how to access the 'style' of these. I see many demos that work for React but the setup of Astro portable text things seems quite different.

I have this so far (redacted to reduce code in the example!):


import { portableTextToHtml } from 'astro-sanity';
import { urlForImage } from './urlForImage';

const customComponents = {
    types: {
        image: ({ value }) => {
            ...stuff
        },
    },
    marks: {
        link: ({ value, children }) => {
            ...stuff
        },
    }
}
Should styles be somewhere under 'types' or 'marks' or somewhere else? Examples so far suggest it's in 'blocks' but I tried 'blocks' and 'block' at the top level alongside 'types' and 'marks' and neither seem to be picked up.
This will help
Hi
user J
- I'm using Astro, so not directly using React. So I'm using the astro-sanity package's portableTextToHtml if that helps?
well there is the same docs for that package as well 😉
I can't understand from this how to make 'styles' for H1, H2, H3 etc work? It only shows 'types' and I managed to work out 'marks' but not 'styles' - do you know specifically how to solve this?
https://github.com/littlesticks/astro-sanity/blob/main/demo/src/sanity/portableText.js
Look, the data structure stays the same, which means you use the same logic as in the react example, but use astro/html in the components (I just deleted the 
className
and voila: 
html
instead of 
react
)

const components = {
  block: {
    // Ex. 1: customizing common block types
    h1: ({children}) => <h1>{children}</h1>, // add your styling to the h1 in this example

    // Ex. 2: rendering custom styles
    customHeading: ({children}) => (
      <h2>{children}</h2> // with your other custom styling if you have custom styles defined in your block content
    ),
  },
}
Sometimes we dont see the forest for trees
😉
Weird! I had already done it like that and it hadn't worked - this time after a bit of refreshing it finally did! I wonder if there's some odd caching happening in Astro on dev? Either way it is working now, thank you very much for your help 🙂
No problem! Sometimes there are bit little bugs we dont see, like a props instead of value, or children instead of ….I don’t know ANYTHING about Astro, so
😅 I cannot help with that

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?