Rich Text Link runs into data load issue cause of missing depth/maxDepth

[MarvinVrdoljak]

Describe the Bug

I encountered an issue related to data loading. On a single page, I have several richText fields, and this page contains numerous internal links (around 50) to other pages of my website, each of them also contains cross-links. As a result, I'm experiencing a huge, redundant data load because every link is loading basically the content of two pages when I actually only require the slug to handle the link in the frontend. So my website takes ages to load. It would be great, if you adjust the depth of richText links.

I was trying a bit of stuff, but this is unfortunately not working:

 fields: [
    {
      name: 'content',
      type: 'richText',
      // Pass the Slate editor here and configure it accordingly
      editor: slateEditor({
        admin: {
          elements: [
            // customize elements allowed in Slate editor here
          ],
          leaves: [
            // customize leaves allowed in Slate editor here
          ],
          link: {
            fields: ({defaultFields}) => {
            const docFieldIndex = defaultFields.findIndex(
              (field: Field) => (field as RelationshipField).name == 'doc'
             )
            ;(defaultFields[docFieldIndex] as RelationshipField).depth = 1 // set depth to one is not working like this
            return defaultFields
           }
         } 
        }
      })
    }
  ]

Note: I can't set the depth in my payload settings to 1, since I have other components, where depth 2 is required.

To Reproduce

• Create two pages in a collection, each contains at least one richText field
• Add a few links on each page, linking to the other page.
  -> Here you go: i.e. for 20 Links you load 60 entire pages.

Payload Version

1.14.0

Adapters and Plugins

No response

[jmikrut]

Hey Marvin,

You could use a hook on your rich text field to "pair down" the data from the referenced pages. Alternatively, we are building a feature that allows you to select specific fields from populations, which will help you here.

But for now, this is not an issue with Payload - instead, it's a feature request so I will convert it accordingly to a Feature Request Discussion.

Will you try the hooks method for your rich text field?

[MarvinVrdoljak]

Hey @jmikrut,
thanks a lot for your response. Not quite sure if we understand each other correctly. I'm just wondering why the relationship field of the RichText-Link has not the same config-options as a "normal" relationship field.

"Normal" relationship field:

 fields: [
    {
      name: 'purchase',
      type: 'relationship',
      relationTo: ['products', 'services'],
      maxDepth: 1, // <-- this is working
    },
  ],

Richtext relationship field:

 fields: [
    {
      name: 'content',
      type: 'richText',
      editor: slateEditor({
        admin: {
          link: {
            fields: ({defaultFields}) => {
            const docFieldIndex = defaultFields.findIndex(
              (field: Field) => (field as RelationshipField).name == 'doc'
             )
            ;(defaultFields[docFieldIndex] as RelationshipField).maxDepth = 1 // <-- this is NOT working
            return defaultFields
           }
         } 
        }
      })
    }
  ]

[lorenzowijtman]

So I've found a way to solve this problem using an afterRead hook for adding a specific value to the request, even though it is a bit specific to my setup and use case, it might help out someone else coming across this problem here as well.

On your richText field add an afterRead hook

{
   name: 'my_rich_text',
   type: 'richText',
   hooks: { afterRead: [richTextAfterRead] },
},

In the hook, you can add a value to the request context

export const richTextAfterRead = ({ req }) => {
  req.context.fromRichText = true
}

With a little bit of background info for my specific use case, I am only allowing routes to be linked in the rich text to make it easier to references urls of the website that are defined there. My routes have a relation to pages which can contain any kind of (in this case unwanted) data. So on my routes collection I added an afterRead which will check for the FromRichText value added in the richTextAfterRead. If the value exists on the request, I remove all the unwanted data from the related document

const afterReadHook = ({
  doc,
  req,
}) => {
  if (req.context.fromRichText) {
    doc.target.value = null
  }
  return doc
}

And that's it!

[BrianJM]

This is the same concept as the context available in hooks. 🙂

[lorenzowijtman]

It seems i missed the use of context entirely in the docs, I'll update the above to use the context instead of adding into the request directly as it seems a bit more clean/ fitting. Thanks!

[MarvinVrdoljak]

It's not in the docu right now, but you can add a maxDepth field now.