getEdges return connections, not edges

[maliyshock]

Describe the Bug

const { setNodes, getEdges } = useReactFlow(); console.log("getEdges", getEdges());

Current behavior: you will get a list of connections with id, source, sourceHandle, target, type and targetHandle fields Which is shorten version of Edge, which is connect.

Expected behavior You should receive Edge accordingly the documentation https://reactflow.dev/api-reference/types/react-flow-instance#get-edges https://reactflow.dev/api-reference/types/edge getEdges: () => Edge<U>[]; Get edge should return array of Edges, not Connection[]

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

connect any 2 nodes and see what would you get from getEdges() function. You will get a list of connections (connection is shorten version of edge)

const { setNodes, getEdges } = useReactFlow(); console.log("getEdges", getEdges());

Current behavior: you will get a list of connections with id, source, sourceHandle, target, type and targetHandle fields Which is shorten version of Edge, which is connect.

Expected behavior

You should receive Edge accordingly the documentation https://reactflow.dev/api-reference/types/react-flow-instance#get-edges https://reactflow.dev/api-reference/types/edge getEdges: () => Edge<U>[]; Get edge should return array of Edges, not Connection[]

Screenshots or Videos

Platform

macOS Chrome "reactflow": "^11.11.2",

Additional context

No response

[moklick]

The getEdges function returns the store edges: https://github.com/xyflow/xyflow/blob/v11/packages/core/src/hooks/useReactFlow.ts#L37-L40

It will return whatever you passed as edges to the ReactFlow component. It's not a Connection or a short form of an edge.

[maliyshock]

I see. Thank you! But i am still kinda confused. my edges has been set as an empty array const [edges, , onEdgesChange] = useEdgesState([]); and these are my types

const edgeTypes = {
  "custom-edge": CustomEdge,
};

There is nothing else.

I think issue is coming from onConnect function where besides validation I have

    return setEdges(oldEdges => {
        // TODO: fix this hardcode later - there should be validation to the target input types and connection to specific one
        connection.sourceHandle = "source-0";
        connection.targetHandle = "target-0";

        // connection has id of source and target handles and also has id of source and target nodes itself
        return addEdge({ ...connection, type: "custom-edge" }, oldEdges);

So you can see that it is a connection and not an edge. This code I got from one of the documentation examples. I think from here https://reactflow.dev/examples/interaction/validation

Here you can see we set edges based on params argument

 const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), []);

which have a Connection type

So instead of setting edges you are setting connections as edges

This cause misunderstandings, because I expect having edges in edges, not connections.

[moklick]

Hey @maliyshock,

onConnect gets called when you connect two nodes. As a parameter it gets a connection, because it's not an edge yet. In your case you are using the helper function addEdge (a simple helper that adds an id and checks if that edge already exists) to create an edge of the connection.