Bug with GROQ query not following reference in rich-text links
11 replies
Last updated: Oct 15, 2021
B
Hello, I think I might've found a bug?
I have followed this tutorial to create 2 types of rich-text links, both exernal and internal (
https://www.sanity.io/guides/portable-text-internal-and-external-links )
However the GROQ Query will not follow the reference.
This query
Will output:
A bit strange. Also, I have to click 2 times on Sanity Studio for the Link options to pop-up. When I click the second time, I can add the info, but then the Studio tells me "Invalid block value"--it seems to be adding two links because of the 2 clicks. Once I remove invalid marks, it works OK, but it's a strange workflow!
Is this at all known? I don't seem to find any mistakes on my part
I have followed this tutorial to create 2 types of rich-text links, both exernal and internal (
https://www.sanity.io/guides/portable-text-internal-and-external-links )
However the GROQ Query will not follow the reference.
This query
*[_type == "post"][7] { title,
slug { current }, publishedAt,
"author": author->name,
mainImage,
"categories": categories[]->title,
"website": website->webName,
body[]{ ...,
asset->{ ...,
"_key": _id
},
_type == "productTable" => { "productImg1": @.productImage1.asset->url,
"productImg2": @.productImage2.asset->url,
"productImg3": @.productImage3.asset->url,
"productImg4": @.productImage4.asset->url,
}
},
markDefs[]{ ...,
_type == "refLink" => { "slug": @.reference->slug
},
_type == "extLink" => { "slug": @.reference->slug
},
}
}
Will output:
"body":*[*_26 items_
0:*{*_6 items_"_key":"637903d82c20"
"_type":"block"
"asset":*NULL*
"children":*[*_1 item_
0:*{*_4 items_"_key":"9dd80e448ec8"
"_type":"span"
"marks":*[*...*]*_1 item_
"text":"Internal Link Test"
}
]
"markDefs":*[*_1 item_
0:*{*_3 items_"_key":"f5dd3d1740d9"
"_type":"refLink"
"reference":*{*_2 items_"_ref":"001fd7ed-dcb5-4dcc-9b8b-a25cd4770254"
"_type":"reference"
}
}
]
"style":"normal"
}
etcetera
A bit strange. Also, I have to click 2 times on Sanity Studio for the Link options to pop-up. When I click the second time, I can add the info, but then the Studio tells me "Invalid block value"--it seems to be adding two links because of the 2 clicks. Once I remove invalid marks, it works OK, but it's a strange workflow!
Is this at all known? I don't seem to find any mistakes on my part
Oct 15, 2021, 12:57 PM
Hey! I haven't seen this sort of behavior reported before. Just to check, can I see your schema for your portable text array and links?
Oct 15, 2021, 6:10 PM
B
Sure!
user M
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* { * name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }
*/
export
_default_ { title: 'Block Content',
name: 'blockContent',
type: 'array',
of: [
{ title: 'Block',
type: 'block',
_// Styles let you set what your user can mark up blocks with. These_
_// correspond with HTML tags, but you can set any title or value_
_// you want and decide how you want to deal with it where you want to_
_// use your content._
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'}, ],
lists: [{title: 'Bullet', value: 'bullet'}],_// 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'}, ],
_// Annotations can be any object structure – e.g. a link or a footnote._
annotations: [
{ title: 'Link Externo',
name: 'extLink',
type: 'object',
fields: [
{ name: 'href',
type: 'url',
title: 'URL'
},
{ title: 'Abrir en nueva pestaña',
name: 'blank',
description: 'Más Info <https://css-tricks.com/use-target_blank/>',
type: 'boolean'
},
{ title: 'Añadir Nofollow',
name: 'nofollow',
type: 'boolean'
}
],
},
{ name: 'refLink',
type: 'object',
title: 'Link Interno',
fields: [
{ name: 'reference',
type: 'reference',
title: 'Reference',
to: [ { type: 'post' } ] },
]
},
],
},
},
_// You can add additional types here. Note that you can't use_
_// primitive types such as 'string' and 'number' in the same array_
_// as a block type._
{ type: 'image',
options: {hotspot: true}, },
{ type: 'cta',
},
{ type: 'infoText',
},
{ type: 'prosAndCons',
},
{ type: 'productTable',
},
],
}
Oct 15, 2021, 6:12 PM
B
Sure!
user M
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* { * name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }
*/
export
_default_ { title: 'Block Content',
name: 'blockContent',
type: 'array',
of: [
{ title: 'Block',
type: 'block',
_// Styles let you set what your user can mark up blocks with. These_
_// correspond with HTML tags, but you can set any title or value_
_// you want and decide how you want to deal with it where you want to_
_// use your content._
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'}, ],
lists: [{title: 'Bullet', value: 'bullet'}],_// 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'}, ],
_// Annotations can be any object structure – e.g. a link or a footnote._
annotations: [
{ title: 'Link Externo',
name: 'extLink',
type: 'object',
fields: [
{ name: 'href',
type: 'url',
title: 'URL'
},
{ title: 'Abrir en nueva pestaña',
name: 'blank',
description: 'Más Info <https://css-tricks.com/use-target_blank/>',
type: 'boolean'
},
{ title: 'Añadir Nofollow',
name: 'nofollow',
type: 'boolean'
}
],
},
{ name: 'refLink',
type: 'object',
title: 'Link Interno',
fields: [
{ name: 'reference',
type: 'reference',
title: 'Reference',
to: [ { type: 'post' } ] },
]
},
],
},
},
_// You can add additional types here. Note that you can't use_
_// primitive types such as 'string' and 'number' in the same array_
_// as a block type._
{ type: 'image',
options: {hotspot: true}, },
{ type: 'cta',
},
{ type: 'infoText',
},
{ type: 'prosAndCons',
},
{ type: 'productTable',
},
],
}
Oct 15, 2021, 6:12 PM
Cool, thanks! I'll spin this up and report back.
Oct 15, 2021, 6:12 PM
B
Here's a zip of the repo in case you need something more robust
user M
:Oct 15, 2021, 6:14 PM
Many thanks!
Oct 15, 2021, 6:14 PM
Ok! Got it!
The link options were popping up fine for me, so I'm not sure what's happening with that behavior. Do you think you could get a screen grab of it the next time it happens? Also, is there anything in the console after it fails that first time?
markDefswas outside of
bodyso it was returning
null. If you move it up into body it should be return what you're looking for:
body[] {
...,
asset->{
...,
"_key": _id
},
_type == "productTable" => {
"productImg1": @.productImage1.asset->url,
"productImg2": @.productImage2.asset->url,
"productImg3": @.productImage3.asset->url,
"productImg4": @.productImage4.asset->url,
},
markDefs[]{
...,
_type == "refLink" => {
"slug": @.reference->slug
},
_type == "extLink" => {
"slug": @.reference->slug
},
}
},Oct 15, 2021, 7:01 PM
Ok! Got it!
The link options were popping up fine for me, so I'm not sure what's happening with that behavior. Do you think you could get a screen grab of it the next time it happens? Also, is there anything in the console after it fails that first time?
markDefswas outside of
bodyso it was returning
null. If you move it up into body it should be return what you're looking for:
body[] {
...,
asset->{
...,
"_key": _id
},
_type == "productTable" => {
"productImg1": @.productImage1.asset->url,
"productImg2": @.productImage2.asset->url,
"productImg3": @.productImage3.asset->url,
"productImg4": @.productImage4.asset->url,
},
markDefs[]{
...,
_type == "refLink" => {
"slug": @.reference->slug
},
_type == "extLink" => {
"slug": @.reference->slug
},
}
},Oct 15, 2021, 7:01 PM
B
Oh God, that was the stupidest mistake! Thanks a lot!
I'll run some tests with the double clicking, record some videos and circle around ! Thanks!!
I'll run some tests with the double clicking, record some videos and circle around ! Thanks!!
Oct 15, 2021, 7:02 PM
Haha, it's a totally understandable mistake!
Oct 15, 2021, 7:30 PM
Haha, it's a totally understandable mistake!
Oct 15, 2021, 7:30 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.