Restoring a graph with dynamic handles works sparodically about react-flow HOT 8 CLOSED

One of the things React Flow solves is that you can position your Handles with CSS and RF will do the rest.

You can simply create a custom node with a variable amount of <Handle /> components inside. Position them with CSS. Lean back.

Writing data into the internalsSymbol will almost always break something.

from react-flow.

Yup, the internalsSybmol stuff was my attempt to remove the warnings. But regardless, the warnings continue. I'm creating the handles within my nodes during render but I don't understand why I still get these warnings. Since I don't get any warnings if I use setTimeout(setEdges(...), 200), I thought that maybe reactflow doesn't know the handles during the next render.

Any additional debug information would go a long way but afaik reactflow doesn't output any debug logs. My theory with this bug/mistake is that handles aren't ready in the next render so the edges fail to connect sometimes. That's why I thought if I can tell reactflow that these handles exists and updateNodeInternals when they are rendered.

Is there a better way to achieve this? More precisely to inform reactflow about the entire flowchart with handles and all?

from react-flow.

Is this just about warnings or are the edges not rendered correctly? If the rendered output is correct, you don't need to worry about the warning.

In React Flow 12 you will be able to pass a handles array to a node and supply all information needed to render a flow without measurements from library side (this was necessary to support SSR). You can find all details here: #3764

from react-flow.

Well sometimes they are not rendered but if V12 supports passing on handles then maybe it won't be an issue. I'll upgrade and report back.

from react-flow.

Still continues. Unless I add a delay, it won't clear the warning and this issue affects rendering sparodically.

@moklick How can we debug this further?

the handles and edges I pass to setNodes and setEdges

what I see on nodes and edges (the ones the graph uses) right before rendering ReactFlow

updated setNodes

import type { Node as XYFlowNode } from "@xyflow/react"
...
setNodes(
  nodes.map((node) => {
    if (!node.position) throw new Error("Node does not have a position")
    const { x, y } = node.position
  
    const sourceHandles: XYFlowNode["handles"] = Object.keys(node.output).map((pid) => ({
      id: pid,
      type: "source",
      position: Position.Right,
      x,
      y
    }))
    const targetHandles: XYFlowNode["handles"] = Object.keys(node.input).map((pid) => ({
      id: pid,
      type: "target",
      position: Position.Left,
      x,
      y
    }))
  
    return {
      id: node.id,
      type: node.type,
      dragHandle: ".node-drag-handle",
      position: node.position,
      data: { node },
      handles: sourceHandles.concat(targetHandles)
    }
  })
  )

from react-flow.

If you want to render a node immediately, you need to set width and height attributes.

However I am not sure if that's really the issue here. Could you create a codesandbox for this issue https://new.reactflow.dev ?

from react-flow.

While trying to create the sandbox, I've found the problem. Even thought reactflow knew the handles, I didn't rendered them properly. The updated handles were coming from a different source which made it unavailable during next render. No problems with reactflow, sorry for taking your time :)

from react-flow.

I am glad you could solve it 🙏

from react-flow.