Cannot add item: item with id <ID> already exists. Graph not updating.

[Rishabh Chandra]

const [graphData, setGraphData] = useState(g1)

// addNode onClick function for button Change Graph.

const addNode = (e) => {
    e.preventDefault()
    console.log('addNode clicked!')
    setGraphData(g2)
  }

return
<div className='graphContainer'>
          <Graph
                graph={graphData}
                options={options}
            />
</div>

graphData is updated with correct data but component gives error saying Cannot add item with existing ID but g1 and g2 has nodes with different IDs.

[Henry Olson]

I have the same issue - not sure how to update the graph with new data, all the examples I've seen are only with static data.

[Greyson Nevins-Archer]

@chandrarishabh so I had an example where I select a graph number to load with useState and got the same result of where it breaks from already exists so I added a key prop to the Graph like I would for mapping children and for some reason that resolves it for me.

basically, react needs a way to identify it as a new child of the whole component so that it doesn't rerender an older one.

<Graph
                key={selectGroup}
                graph={
                  {
                    nodes: graph.nodes.filter(n => n.network === parseInt(selectGroup)),
                    edges: graph.edges.filter(n => n.network === parseInt(selectGroup)),
                  }
                }
                options={options}
                events={events}

            />```

[Rishabh Chandra]

@greysonevins Thanks for your input. Can you please explain me what value does selectGroup exactly holds. Do you have any working repository which I can use as reference? I just want to add nodes and edges to my graph and then from the given graph present a new graph. Any help will be much appreciated. Thanks.

[Greyson Nevins-Archer]

@chandrarishabh I made a codesandbox for it

https://codesandbox.io/s/interesting-spence-onwor?file=/src/App.js

Basically the selectGroup in my case was an id to graph, in this example, I add a new random node and edge to the graph and use a uuid as key.

You'll see that there are two factors that fix this bug, a deep clone of the graph when reseting or adding a node and the uuid for the key.

I think the issue is that when you manipulate the data as is without deepcloning it, the graph representation of the object tells the Graph that it hasn't changed and without a key, the wrapper doesn't know it is a different graph

[Benjamin Maisano]

this error is still happening for me, not sure if its related to using useEffect to load from an api....

[Tyler]

@chandrarishabh I made a codesandbox for it

https://codesandbox.io/s/interesting-spence-onwor?file=/src/App.js

Basically the selectGroup in my case was an id to graph, in this example, I add a new random node and edge to the graph and use a uuid as key.

You'll see that there are two factors that fix this bug, a deep clone of the graph when reseting or adding a node and the uuid for the key.

I think the issue is that when you manipulate the data as is without deepcloning it, the graph representation of the object tells the Graph that it hasn't changed and without a key, the wrapper doesn't know it is a different graph

I tried this exact code in React 17. It no longer works. Error shows same as OP - node with ID 6 already exists. Downgraded to the version in the sandbox and works again. Seems there was a breaking change causing the method to now fail

[Vincent Lecrubier]

Can someone try with the latest version (1.0.7) and send a reproduction ?

[Igor]

hey, just wanted to share:
I am getting this error on undefined value, spent like 1,5 hours 😅 to figure out what was going on

setGraphData(({nodes, edges}) => ({
        nodes: [
          ...nodes,
          {
            id: modifiedId,
            label,
            title,
            image: image, // 
            level: 2,
          },
        ],
        edges: [...edges, {from: id, to: modifiedId}],
      }))```
      
      
`image` was `undefined`