I'm using Gatsby 5 and contentful/rich-text-react-renderer.
I have a ContentfulPost type that has some links to related types within the rich text.
I'm following the docs (from Gatsby and Contentful), that say that I need to query them in GraphQL:
query MyQuery {
allContentfulPost {
nodes {
body {
references {
... on ContentfulAlbum {
node_locale
contentful_id
__typename
id
slug
}
}
}
}
}
}
And that works fine:
"nodes": [
{
"body": {
"references": [
{},
{
"contentful_id": "2P4r0pD6zphEIiOaKEaprO",
"__typename": "ContentfulAlbum",
"id": "06305ddb-a3fa-5265-9a2a-3e43524d351e",
"slug": "disorders"
}
]
}
},
]
The docs then state that I should create a custom renderer and use some properties within node.data.target
(see "references" section). These are the options I use:
const options2 = {
renderNode: {
[INLINES.ENTRY_HYPERLINK]: (node) => {
console.log(node);
return <></>;
},
},
};
However, the only fields I get in the logs are:
data: Object { target: {…} }
target: Object { sys: {…} }
sys: Object { id: "2P4r0pD6zphEIiOaKEaprO", type: "Link", linkType: "Entry" }
So, no slug that I can use.
I've seen everywhere (https://stackoverflow.com/a/55769299 or https://stackoverflow.com/a/55998008 ) that the solution is to clear the cache (using gatsby clear, for example). However, that doesn't work in my case.
My goal is to render links with a dynamic url (${locale}/music/${slug})
I've found the problem: the plugin itself.
Instead of using contentful/rich-text-react-renderer
I should use gatsby-source-contentful/rich-text
. That one does indeed populate the node object with the query from GraphQL