Easier way to display content from GraphCMS to your website

[tuankietcoderr]

In /services/index.js file, let change the raw in content of getPostDetails function to html (line 76):

Detail: from

export const getPostDetails = async (slug) => {
  const query = gql`
    query GetPostDetails($slug : String!) {
      post(where: {slug: $slug}) {
        title
        excerpt
        featuredImage {
          url
        }
        author{
          name
          bio
          photo {
            url
          }
        }
        createdAt
        slug
        content {
          raw                  //change this line
        }
        categories {
          name
          slug
        }
      }
    }
  `;

  const result = await request(graphqlAPI, query, { slug });

  return result.post;
};

to

export const getPostDetails = async (slug) => {
  const query = gql`
    query GetPostDetails($slug : String!) {
      post(where: {slug: $slug}) {
        title
        excerpt
        featuredImage {
          url
        }
        author{
          name
          bio
          photo {
            url
          }
        }
        createdAt
        slug
        content {
          html                             //to this
        }
        categories {
          name
          slug
        }
      }
    }
  `;

  const result = await request(graphqlAPI, query, { slug });

  return result.post;
};

Next, let's import this to the file /components/PostDetail:

import parse from "html-react-parser";

Next, let's remove getContentFragment function and replace this code from line 71:

{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);
})}

to this code:

{parse(post.content.html)}

And it's done! You don't need to hand code with those mess. Just one line, everything has been solved! Detail: In PostDetail: from this code:

import React from 'react';

import moment from 'moment';

const PostDetail = ({ post }) => {
  const getContentFragment = (index, text, obj, type) => {       // remove this function
    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}
          />
        );
      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="" className="object-top h-full w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
        </div>
        <div className="px-4 lg:px-0">
          <div className="flex items-center mb-8 w-full">
            <div className="hidden md:flex items-center justify-center lg:mb-0 lg:w-auto mr-8 items-center">
              <img
                alt={post.author.name}
                height="30px"
                width="30px"
                className="align-middle rounded-full"
                src={post.author.photo.url}
              />
              <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{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);
          })}                               // replace this code
        </div>
      </div>

    </>
  );
};

export default PostDetail;

into this code

import React from 'react';
import parse from 'html-react-parser';         // add this import
import moment from 'moment';

const PostDetail = ({ post }) => {
  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="" className="object-top h-full w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
        </div>
        <div className="px-4 lg:px-0">
          <div className="flex items-center mb-8 w-full">
            <div className="hidden md:flex items-center justify-center lg:mb-0 lg:w-auto mr-8 items-center">
              <img
                alt={post.author.name}
                height="30px"
                width="30px"
                className="align-middle rounded-full"
                src={post.author.photo.url}
              />
              <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{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>
          {parse(post.content.html)}        //to this code
        </div>
      </div>

    </>
  );
};

export default PostDetail;

Hope you'll success!

[merlinthedev]

Hey, thanks for posting. Do you by any chance know how I can style my post content when using the html parser?

[tuankietcoderr]

Hey, thanks for posting. Do you by any chance know how I can style my post content when using the html parser?

uhhhh... maybe you have to style in the content while you're editing, which is Rich Text in graphcms, that's the only way to style html parser. I will try to find a better way to make this project perfectly. So wait for me!

[rch-goldsnaker]

Hey just a comment, if you want to upload to producion, in order to avoid the "Eslint Error" you can delete "return".

import React from 'react';
import parse from 'html-react-parser';
import moment from 'moment';

const PostDetail = ({ post }) => (
  <>
    <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="" className="object-top h-full w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
      </div>
      <div className="px-4 lg:px-0">
        <div className="flex items-center mb-8 w-full">
          <div className="hidden md:flex items-center justify-center lg:mb-0 lg:w-auto mr-8 items-center">
            <img
              alt={post.author.name}
              height="30px"
              width="30px"
              className="align-middle rounded-full"
              src={post.author.photo.url}
            />
            <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{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>
        {parse(post.content.html)}
      </div>
    </div>
  </>
);

export default PostDetail;

[tuankietcoderr]

Hey just a comment, if you want to upload to producion, in order to avoid the "Eslint Error" you can delete "return".

import React from 'react';
import parse from 'html-react-parser';
import moment from 'moment';

const PostDetail = ({ post }) => (
  <>
    <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="" className="object-top h-full w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
      </div>
      <div className="px-4 lg:px-0">
        <div className="flex items-center mb-8 w-full">
          <div className="hidden md:flex items-center justify-center lg:mb-0 lg:w-auto mr-8 items-center">
            <img
              alt={post.author.name}
              height="30px"
              width="30px"
              className="align-middle rounded-full"
              src={post.author.photo.url}
            />
            <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{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>
        {parse(post.content.html)}
      </div>
    </div>
  </>
);

export default PostDetail;

this is insane

[S-G-Codes]

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

[tuankietcoderr]

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

[S-G-Codes]

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

can you describe a little bit like in which componet from javascript mastery github files?

[S-G-Codes]

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

I made the above the changes like removing getContentFragment fn and all Now I dont understand where can i use the reverse method for post to get display

[S-G-Codes]

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

import React from "react"; import moment from "moment"; import parse from "html-react-parser";

const PostDetail = ({ post }) => { return ( <> {/* //fn for getting our blog content as original it is like bold words, tags and etc // const getContentFragment = (index, text, obj, type) => { // let modifiedText = text;

// if (obj) { // if (obj.bold) { // modifiedText = ({text}); // }

// if (obj.italic) { // modifiedText = ({text}); // }

// if (obj.underline) { // modifiedText = ({text}); // } // }

// 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>)}; // case 'paragraph': // return <p key={index} className="mb-8">{modifiedText.map((item, i) => <React.Fragment key={i}>{item}</React.Fragment>)}

; // 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>)}; // case 'image': // return ( // <img // key={index} // alt={obj.title} // height={obj.height} // width={obj.width} // src={obj.src} // /> // ); // default: // return modifiedText; // } // }; */}

  <div className="bg-white shadow-lg rounded-lg lg:p-8 pb-12 mb-8">
    {/* img div */}
    <div className="relative overflow-hidden shadow-md mb-6">
      <img
        src={post.featuredImage.url}
        alt={post.title}
        className="object-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
            alt={post.author.name}
            height="30px"
            width="30px"
            className="align-middle rounded-full"
            src={post.author.photo.url}
          />
          <p className="inline align-middle text-gray-700 ml-2 text-lg">
            {post.author.name}
          </p>
        </div>
        {/* date 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>{moment(post.createdAt).format("MMM DD, YYYY")}</span>
        </div>
      </div>

      {/* title */}
      <h1 className="mb-8 text-3xl font-semibold">{post.title}</h1>
      {/* {console.log(post.content.raw)} */}

      {/* {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)

}) } */} {parse(post.content.html)} </> ); };

export default PostDetail;

[tuankietcoderr]

Hey @tuankietcoderr How can we display latest post first according to dates? Wanna help?

you only need to reverse the posts array which is responsed from AllPost by reverse() method.

I made the above the changes like removing getContentFragment fn and all Now I dont understand where can i use the reverse method for post to get display

in the services.js, with getPosts function, follow me:

From this:

const result = await request(graphqlAPI, query);

return result.postsConnection.edges;

To this:

const result = await request(graphqlAPI, query);

return result.postsConnection.edges.reverse();

Try it bro!

[S-G-Codes]

It Worked Thankyou Buddy! Love from India❤️

[tuankietcoderr]

It Worked Thankyou Buddy! Love from India❤️

You're welcome bro from India, this is Kiet from Vietnam! ❤️

[SimilArity]

Hi people. I'm working with this tutorial to do my own blog. Do you have any idea how I can implement a pagination? I'm stuck :/

[tuankietcoderr]

Hi people. I'm working with this tutorial to do my own blog. Do you have any idea how I can implement a pagination? I'm stuck :/

it's not difficult as you think, use some algorithms here

[SimilArity]

Hi people. I'm working with this tutorial to do my own blog. Do you have any idea how I can implement a pagination? I'm stuck :/

it's not difficult as you think, use some algorithms here

I'm on the way to do it, but I don't know how to correctly do this and I'm stuck at this point:

This is my index.js in the services file (I've put commentaries for all the changes I did just for the getPosts query):

http://image.noelshack.com/fichiers/2022/20/5/1653047398-index-services.jpg

And this is my main index.js:

http://image.noelshack.com/fichiers/2022/20/5/1653047428-index-main.jpg

And I'm lost for next step: What am I forgetting? How my state "skip" can be properly updated in my services index.js?

[adityabhattad2021]

There is even easier way to display content from GraphCMS to your website: Step 1.

npm i @graphcms/rich-text-react-renderer

Step 2. In PostDetails.js Add: and THAT IS IT!

[derekharmanli]

@adityabhattad2021 I cannot solve my issue. I have even tried to use "renderers" but no matter what no bullet points or numbers show up in my content. The content all renders with this method but the bullet points or the numbers do not. <RichText content = {post.content.raw.children} renderers={{ ol: ({ children }) => <ol>{children}</ol>, ul: ({ children }) => <ul>{children}</ul>, li: ({ children }) => <li>{children}</li>, }} />