search

crubier / react-graph-vis

A react component to render nice graphs using vis.js
http://crubier.github.io/react-graph-vis/
MIT License
958 stars 171 forks source link

Using Fetch Api Call with React Graph Vis #87

Open SHASHANK9743 opened 4 years ago

SHASHANK9743 commented 4 years ago

Hi, I am serving the data directly from an API in the specified format. I am rendering the graph inside a Class component. the initial state is as follows graph = {nodes : [], edges : []}

I am fetching the data inside Component Did Mount and then setting the state of the Graph.

However while rendering it always gives me the error Node with ID "some id" already exist. Please help I have been struggling with this for a long time now.

morenonaitana commented 4 years ago

Did you check if the answer from your API call does not return data with twice the same ID ?

cjdellomes commented 4 years ago

@SHASHANK9743 I ran into a similar issue on one of my own projects, in which I was also fetching data to add to the graph.

I discovered that this error is thrown when a node with an image property has a nuill value before being pushed to the nodes array. This happens even if all the nodes actually have unique IDs. I got around this by setting the value to an empty string instead of null. Empty strings seem to work just fine, and result in a blank node when drawn. Not sure if this is the issue for you, but I suggest double checking this.

Below is an example object that I push onto the nodes array of my graph. If artistImage is null, the error you encountered is thrown. Again, I got around this by making sure artistImage is an empty string if there's no associated image url.

const artistNode = { id: artist.id, label: artist.name, title: artist.name, shape: "circularImage", image: artistImage };