Trouble implementing internal links in Portable Text, resolved with corrected GROQ query.
11 replies
Last updated: Aug 12, 2020
A
Hello! I'm trying to implement the internal link as explained here: https://www.sanity.io/guides/portable-text-internal-and-external-links
When I want to add the slug using a the GROQ query given, it does not seem to work. Nothing is added to the markDefs object when I test it in Vision:
In fact, even if I type something directly in the query, nothing is added to the markDefs:
Even if I remove the _type == "internalLink", it does not get written into the result.
Can somebody please help me and tell me what I am doing wrong?
When I want to add the slug using a the GROQ query given, it does not seem to work. Nothing is added to the markDefs object when I test it in Vision:
*[_type == "post"]{
...,
body[]{
...,
markDefs[]{
...,
_type == "internalLink" => {
"slug": @.reference->slug
}
}
}
}*[_type == "page"]{
...,
body[]{
...,
markDefs[]{
...,
_type == "internalLink" => {
"something": "test"
}
}
}Can somebody please help me and tell me what I am doing wrong?
Jun 4, 2020, 8:23 AM
J
Could an example your data? That would be helpful.
Just from the look if it, I think don't think the conditional should be in the
Just from the look if it, I think don't think the conditional should be in the
markDefsarray, but rather one level up, in
bodylike this:
*[_type == "post"]{
...,
body[]{
...,
_type == "internalLink" => {
"slug": @.reference->slug
}
}
}Jun 4, 2020, 6:19 PM
J
Does that help?
Jun 4, 2020, 6:19 PM
J
Could you post an example of some body data? Would be helpful to see the structure of it.
Jun 4, 2020, 6:22 PM
A
{
"_createdAt": "2020-04-02T12:35:58Z",
"_id": "0ad5ed76-14b6-43fb-bc3f-f077c6f22279",
"_rev": "5wdIb9L6kFflQqbpITq6F3",
"_type": "page",
"content": [
{
"_key": "cb02625fd1ee",
"_type": "textSection",
"body": [
{
"_key": "d1c8b8608870",
"_type": "block",
"children": [
{
"_key": "d1c8b86088700",
"_type": "span",
"marks": [],
"text": "Here is a heading"
}
],
"markDefs": [],
"style": "h1"
},
{
"_key": "0f63f6e1823d",
"_type": "block",
"children": [
{
"_key": "0f63f6e1823d0",
"_type": "span",
"marks": [],
"text": "Here is some text."
}
],
"markDefs": [],
"style": "normal"
},
{
"_key": "3c2e5e258014",
"_type": "block",
"children": [
{
"_key": "3c2e5e2580140",
"_type": "span",
"marks": [],
"text": "Here I put a "
},
{
"_key": "3c2e5e2580141",
"_type": "span",
"marks": [
"f4e218586de7"
],
"text": "link"
},
{
"_key": "3c2e5e2580142",
"_type": "span",
"marks": [],
"text": " somewhere."
}
],
"markDefs": [
{
"_key": "f4e218586de7",
"_type": "link",
"href": "<https://somesite.com>"
}
],
"style": "normal"
},
{
"_key": "6c2615f2c05a",
"_type": "block",
"children": [
{
"_key": "6c2615f2c05a0",
"_type": "span",
"marks": [],
"text": "This is "
},
{
"_key": "6c2615f2c05a1",
"_type": "span",
"marks": [
"u"
],
"text": "underlined"
},
{
"_key": "6c2615f2c05a2",
"_type": "span",
"marks": [],
"text": "."
}
],
"markDefs": [],
"style": "normal"
},
{
"_key": "864868246e17",
"_type": "block",
"children": [
{
"_key": "864868246e170",
"_type": "span",
"marks": [
"em"
],
"text": "Cursive text"
},
{
"_key": "864868246e171",
"_type": "span",
"marks": [],
"text": "."
}
],
"markDefs": [],
"style": "normal"
},
{
"_key": "8db586a956b6",
"_type": "block",
"children": [
{
"_key": "8db586a956b60",
"_type": "span",
"marks": [],
"text": ""
},
{
"_key": "8db586a956b61",
"_type": "span",
"marks": [
"d8aaeb931f05"
],
"text": "This is an internal link"
},
{
"_key": "8db586a956b62",
"_type": "span",
"marks": [],
"text": "."
}
],
"markDefs": [
{
"_key": "d8aaeb931f05",
"_ref": "211d539f-7e8c-4f0f-b87c-f2fcbda6228a",
"_type": "internalLink"
}
],
"style": "normal"
},
{
"_key": "aff49ec10194",
"_type": "block",
"children": [
{
"_key": "aff49ec101940",
"_type": "span",
"marks": [],
"text": ""
}
],
"markDefs": [],
"style": "normal"
}
]
},
{
"_key": "ede6681c4907",
"_type": "twoColumn",
"bodyLeft": [
{
"_key": "a34bf5b12787",
"_type": "block",
"children": [
{
"_key": "a34bf5b127870",
"_type": "span",
"marks": [],
"text": "This is the left column contents."
}
],
"markDefs": [],
"style": "normal"
}
],
"bodyRight": [
{
"_key": "6f94ca0e7826",
"_type": "block",
"children": [
{
"_key": "6f94ca0e78260",
"_type": "span",
"marks": [],
"text": "Thsi is right column text."
}
],
"markDefs": [],
"style": "normal"
},
{
"_key": "88dd6d8ca0c5",
"_type": "block",
"children": [
{
"_key": "88dd6d8ca0c50",
"_type": "span",
"marks": [],
"text": "Here comes a list:"
}
],
"markDefs": [],
"style": "normal"
},
{
"_key": "a1e220a3c068",
"_type": "block",
"children": [
{
"_key": "a1e220a3c0680",
"_type": "span",
"marks": [],
"text": "Number 1"
}
],
"level": 1,
"listItem": "bullet",
"markDefs": [],
"style": "normal"
},
{
"_key": "c66d6ca5dc4d",
"_type": "block",
"children": [
{
"_key": "c66d6ca5dc4d0",
"_type": "span",
"marks": [],
"text": "Number 2"
}
],
"level": 1,
"listItem": "bullet",
"markDefs": [],
"style": "normal"
},
{
"_key": "8c9bd044ab22",
"_type": "block",
"children": [
{
"_key": "8c9bd044ab220",
"_type": "span",
"marks": [],
"text": "Dont forget 3"
}
],
"level": 1,
"listItem": "bullet",
"markDefs": [],
"style": "normal"
}
],
"heading": "Here comes two columns"
}
],
"openGraphImage": {
"_type": "image",
"asset": {
"_ref": "image-e4cf4bc559e435f458a659bc5abdd83fea6c6304-800x606-jpg",
"_type": "reference"
}
},
"slug": {
"_type": "slug",
"current": "test"
},
"title": "This is the heading",
"_updatedAt": "2020-06-05T06:14:27.247Z"
}Jun 5, 2020, 6:27 AM
A
Yes, here is a copy from "Inspect" of the page:
Jun 5, 2020, 6:27 AM
A
Actually I now changed a bit how the portableText object is constructed. I made the internalLink its own object:
And
But still I did not get the GROQ query to write anything in the result. I also tried ""slug": @.reference->slug.*current*"
export default {
title: 'Portable Text',
name: 'portableText',
type: 'array',
of: [
{
type: 'block',
styles: [
{ title: 'Normal', value: 'normal' },
{ title: 'H1', value: 'h1' },
{ title: 'H2', value: 'h2' },
{ title: 'H3', value: 'h3' },
{ title: 'H4', value: 'h4' },
{ title: 'Quote', value: 'blockquote' },
],
// Marks let you mark up inline text in the block editor.
marks: {
// Decorators usually describe a single property – e.g. a typographic
// preference or highlighting by editors.
decorators: [
{ title: 'Strong', value: 'strong' },
{ title: 'Emphasis', value: 'em' },
{ title: 'Code', value: 'code' },
{
title: 'Underline',
value: 'u',
blockEditor: {
render: LinkRender
}
}
],
annotations: [
{ type: 'link' },
{ type: 'internalLink' },
],
},
},
{ type: 'image' }
],
};export default {
title: 'Internal link to another document',
name: 'internalLink',
type: 'reference',
description: 'Locate a document you want to link to',
to: [{ type: 'userPage'}, { type: 'page' }],
blockEditor: {
icon: () => ':link:',
render: InternalLinkRender,
},
};Jun 5, 2020, 6:27 AM
J
I tried to replicate your data here, and it seems to work https://groq.dev/33ls10IOb2um1bqXCrrq0t
Jun 5, 2020, 8:01 AM
J
I just realised that you were missing the
content[]array in your first query
Jun 5, 2020, 8:20 AM
A
Yes, I noticed that now too, and also there was the @.*reference-*>slug, but in your example, which works, it was @ -> .slug.current without the reference word. Thank you for your help!
Jun 5, 2020, 8:30 AM
J
Glad it worked!
Jun 5, 2020, 8:33 AM
P
Thanks
user T
it seems to work for me as well… I’m wondering why it the documentation shows @.reference if that does not work?Aug 12, 2020, 2:48 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.