rendering hyperlink from the rich text content from graph CMS - graphql

Question

Hi there I am not able to load link from graphCMS pls help
trying to render hyperlink content from the graphCMS post but it is not appearing on the post details page on blog.
here is my code
import React from "react";
import moment from "moment";
const PostDetail = ({ post }) => {
const getContentFragment = (index, text, obj, type) => {
let modifiedText = text;
if (obj) {
if (obj.bold) {
modifiedText = <b key={index}>{text}</b>;
}
if (obj.italic) {
modifiedText = <em key={index}>{text}</em>;
}
if (obj.underline) {
modifiedText = <u key={index}>{text}</u>;
}
}
switch (type) {
case "heading-three":
return (
<h3 key={index} className="text-xl font-semibold mb-4">
{modifiedText.map((item, i) => (
<React.Fragment key={i}>{item}</React.Fragment>
))}
</h3>
);
case "paragraph":
return (
<p key={index} className="mb-8">
{modifiedText.map((item, i) => (
<React.Fragment key={i}>{item}</React.Fragment>
))}
</p>
);
case "heading-four":
return (
<h4 key={index} className="text-md font-semibold mb-4">
{modifiedText.map((item, i) => (
<React.Fragment key={i}>{item}</React.Fragment>
))}
</h4>
);
case "image":
return (
<img
key={index}
alt={obj.title}
height={obj.height}
width={obj.width}
src={obj.src}
/>
);
case "link":
return (
<a {...index} href={obj.url}>
{modifiedText.map((item, i) => (
<React.Fragment key={i}>{item}</React.Fragment>
))}
</a>
);
default:
return modifiedText;
}
};
return (
<div className="bg-white shadow-lg rounded-lg lg:p-8 pb-12 mb-8">
<div className="relative overflow-hidden shadow-md mb-6">
<img
src={post.featuredImage.url}
alt={post.title}
className="objecy-top h-full w-full rounded-t-lg"
/>
</div>
<div className="px-4 lg:px-0">
<div className="flex items-center mb-8 w-full">
<div className="flex items-center mb-4 lg:mb-0 w-full lg:w-auto mr-8">
<img
className="align-middle rounded-full"
src={post.author.photo.url}
alt={post.author.name}
height="30px"
width="30px"
/>
<p className="inline align-middle text-gray-700 ml-2 text-lg font-medium">
{post.author.name}
</p>
</div>
<div className="font-medium text-gray-700">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 inline mr-2 text-pink-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span className="align-middle">
{moment(post.createdAt).format("MMM DD, YYYY")}
</span>
</div>
</div>
<h1 className="mb-8 text-3xl font-semibold">{post.title}</h1>
{post.content.raw.children.map((typeObj, index) => {
const children = typeObj.children.map((item, itemindex) =>
getContentFragment(itemindex, item.text, item)
);
return getContentFragment(index, children, typeObj, typeObj.type);
})}
</div>
</div>
);
};
export default PostDetail;
everything other than link is appearing on the page but not hyperlink content from the graphcms
thanks in advance !

Answer 1

If you console.log raw data you can see that the 'link' types are contained in 'paragraph' types, so the code will never enter the case 'link'.
GraphCMS provide a lib to easyly render Rich Text. May be a good option for what you want.

Answer 2

What you have done here is map through the modifiedText array, but hyperlinks are not stored in that same way as the text.
Your code should look something like this:
case "link":
return (
<a key={index} href={obj.href} className='text-md text-blue-700'>
<React.Fragment>{obj.title}</React.Fragment>
</a>
);
Added some styling there to give the link a blue color.