display blog post using MUI?

default discord avatar
.kilosierra
3 months ago
8

Sorry if this is a stupid question... Given that my blog post is being fetched from an api endpoint as an array of objects with various children for "text", "type", "url", am I suppose to create components for each of these children? For example, components for heading, paragraph, links, images, ul, ol, etc, then map over the content array and return the relative component?

  • default discord avatar
    r3pwn
    3 months ago

    I think the Payload Docs suggest using a helper method of some kind that converts each rich text "node", but for my personal website, I opted to create a "ContentRichText" component that does the same thing:



    https://github.com/r3pwn/r3pwn-com-next/blob/main/components/ContentRichText.tsx
  • default discord avatar
    .kilosierra
    3 months ago

    Originally I mapped over the content array within a mui typography component. For each type I turned the relevant mui component. However, I was running into hydration issues in Next because I was returning a List component within a Typography component for type: 'ol'. The specific error was, "Expected server HTML to contain a matching <ul> in <p>."



    I've looked at your code and parsing the data recursively seems much better. I've tried to emulate your method but have run into more problems. Here's a screenshot of the recursive component I've created based on your code





    I can't workout why this doesn't work. The content prop is undefined in the TextParser component. Any idea where I'm going wrong with this? Thanks

    Screenshot_2023-06-27_at_14.18.11.png
    Screenshot_2023-06-27_at_14.20.40.png
    Screenshot_2023-06-27_at_14.23.53.png
  • default discord avatar
    r3pwn
    3 months ago

    Hmm... Can you

    console.log

    the value of "content" so you can see what type it is when it throws that error?

  • default discord avatar
    .kilosierra
    3 months ago

    It's just a small test project test out payload

  • default discord avatar
    r3pwn
    3 months ago

    I think that might actually be the right idea. I did notice that some of the content nodes don't have a type, but do have children, so you may need to update the component to handle that scenario

    image.png
    image.png
  • default discord avatar
    .kilosierra
    3 months ago

    When installing payload I opted for the preconfigured blog template. Is there a specific reason why some content nodes don't have a type?



    It has fried my brain why this code won't work. The only children that have no type are objects with a text property. This is being handled specifically with a if statement checking !node.type. Also, I would have thought a child with no type would trigger the default case. I've hit a wall with this. The only way I can get this kinda working is to map over the content array within a parent Typography component and return the relevant mui component based on node type. However, this requires multiple nested maps and creates a hydration error because the mui List component can't be a child of a Typography component.



    I've got it working. I didn't understand the role of slate in this process.

    Screenshot_2023-06-27_at_20.58.33.png
  • default discord avatar
    r3pwn
    3 months ago

    I'm glad you got it working!

  • default discord avatar
    chus_asensio
    last month

    Can you explain how did you fix this? I have similar code but can't get the node.type, just undefined... Thanks!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.