๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

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?
๐Ÿ™‚
Jan 1, 2023, 12:31 PM
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-> },
            }

Jan 2, 2023, 3:09 PM
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?
๐Ÿ™‚
Jan 3, 2023, 7:50 AM
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).
Jan 3, 2023, 8:58 AM
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.
Jan 3, 2023, 11:31 AM
This will help
Jan 3, 2023, 11:44 AM
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?
Jan 3, 2023, 12:02 PM
well there is the same docs for that package as well ๐Ÿ˜‰
Jan 3, 2023, 12:04 PM
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
Jan 3, 2023, 12:17 PM
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
๐Ÿ˜‰
Jan 3, 2023, 1:13 PM
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 ๐Ÿ™‚
Jan 3, 2023, 2:07 PM
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
Jan 3, 2023, 2:09 PM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?