Recursive Blocks

joecaracciolast year

2 2

• Selected Answer
  

  jmikrut

  last year

  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 RenderBlocks component 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 replies
• 

  joecaracciolast year

  Thanks 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?

• 

  joecaracciolast year

  Saying react makes me think you are talking the client react side but i'm just very confused

• 

  jmikrut

  last year

  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 replies
  

  joecaracciolast year

  Ah 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!

  

  ozbeksulast year

  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

  

  andwrobslast year

  @ozbeksu you rock man totally saved me a chunk of hours this weekend!!!

  

  andwrobslast year

  @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