"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Microsoft chose Payload to tell the world about AI.
Recursive Blocks
I'm basically building a page builder of all my react components and loving it so far.
I iterate all my react components, and create a 'block' of each one. However the only problem is react components allow children, and I'd love for each block to have its own field which has additional blocks (which are components of that same library). However, then I would enter this weird recursive case where I continously iterate and hit no stopping point.
Does anyone of a solution for how to accomplish such a thing? Does my problem make sense?
Selected Answer
HELL yes I have a solution for you.
You need to import all of your React block components only at the top level where the first "blocks" are rendered, and then pass them through each additional layer of blocks as either props or with context. But the trick is to only import them once, at the top level, and then needle them through the rest of the way. So say you have a
RenderBlockscomponent or similar. THAT component needs to accept your block components as props or retrieve them via context.We had to do this internally in Payload with our field components themselves, because fields can render other fields and then boom - recursion. It's a common problem with programming in general!
2 repliesThanks for the reply! You're refering to the payload side of this right? I'm struggling a little bit to wrap my head around how I would basically make a 'Page' Type, that would have a Blocks collection, that would continuously let me recurse blocks all the way down.
or is there some sort of pass thru (props/context) ability within payload?
Saying react makes me think you are talking the client react side but i'm just very confused
I was talking about the React side. But if this is an issue in your Payload config and that is what you are referring to, the same principles would apply there too.
4 repliesAh okay gotcha. Are there any examples of anyone doing this?
Just trying to think about how a Payload block can has itself as a potential block without blowing up the stack...and struggling!
Hi there,
I was also trying to solve the same issue. I basically solved it with recursion.You can have a look at the gist link below.
There is a collection for Navigation and a block for Link. For brevity, i only added name field to link block but as you know you can customize it as you see fit. Hope this helps.
https://gist.github.com/ozbeksu/4873ad5d65f6770079edf9a000028a6c
@ozbeksu you rock man totally saved me a chunk of hours this weekend!!!
@jmikrut would you be open to including a note on this pattern somewhere in the docs here: blocks field docs?
needed this for chatbot flows/conversations modeling, any recursive document or graph data structures are serviced really well with this pattern from my pov
Star
Discord
online
Get dedicated engineering support directly from the Payload team.