useHandleConnections does't updates

[allangnutzmans]

Greetings!
I'm trying to make a custom Node, that reads all the connections made with it, to further process the data...
But for some reason the hook only returns the edges declared on inintialization:

export const initialEdges = [
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3', markerEnd: MarkerType.ArrowClosed },
]

When I try to console.log(targetConnections.value);
or
console.log(targetConnections);

It is not updating the value.

Can you help me find out why the hook is not returning properly?

<script setup>
import { defineProps } from "vue";
import { Handle, Position, useHandleConnections } from '@vue-flow/core';

const props = defineProps({
  id: Number,
  type: String,
  position: Object,
  class: String,
  targetPosition: String,
  data: null
});

const targetConnections = useHandleConnections({ type: 'target' });

const handleGetConnections = () => {
  console.log(targetConnections.value);
}
</script>

<template>
  <Handle type="target" :position="Position.Top"/>
  <h5>Output</h5>
  <button @click="handleGetConnections">
    GET TARGETS
  </button>
  <p>{{ props.data }}</p>
</template>

<style scoped>
/* Estilos opcionais para seu componente */
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

[bcakmakoglu]

Works fine for me: https://codesandbox.io/p/devbox/stoic-stitch-2mr7vj?file=%2Fsrc%2FCustomNode.vue%3A14%2C63&workspaceId=b0b5eb08-9090-4c77-9dc6-14c25ecc472e

[bcakmakoglu]

Should work now ^^ I forgot to set it to public 😅

[allangnutzmans]

No prob, but still not working 😅. You sure the link is correct?
I'm getting:
Error: Error: (404) Not found
Version: 0.0.315
Environment: production

[bcakmakoglu]

Could you retry one more time?

[allangnutzmans]

Worked out fine, but still, it returns only the first connection (index 0). When connecting with another node, the output remains the same.

[spencerjsmall]

I'm experiencing the same issue. useHandleConnections is not updating when I, for example, add an edge after deleting an edge

[Ghostff]

I noticed the array is also empty when the edge has a targetHandle/Handle has an id.
Or you can keep targetHandle but useHandleConnections would look something like this:

useHandleConnections({
    type: 'target',
    id: `target-handle-id`
})

[sefgit]

Probably it's not a bug, but strange behaviour by design ?
In a custom component I need a way to inspect connections added during runtime.

import { ref, computed, watch, onMounted } from 'vue'
import { Handle, useHandleConnections, Position, useVueFlow, useNodesData } from '@vue-flow/core'

const props = defineProps({data:{}});

const connections = useHandleConnections({
	type:'source',
	id: 'source-lwc',
});
const nodesData = useNodesData(() => {
	console.log("*******","connections:", connections.value);
	connections.value[0]?.source;
});

const update_data = (newData) => {
               /* BUG? 
               FAILED TO GET CONNECTIONS HERE:
               */
		const connections = useHandleConnections({
			type:'source',
			id: 'source-lwc',
		})
		const nodesData = useNodesData(() => {
			console.log("*******","connections:", connections.value);
			connections.value[0]?.source;
		})
		console.log("*nodesData:", nodesData);
		console.log("*value:", nodesData.value);
};

watch(
	() => props.data,
	newData => update_data(newData),
);

onMounted(() => {	
        /* IT WORKS HERE, 
        connections returned, an array[1] of connections:
        [ {
        "edgeId": "e199-200",
        "source": "199",
        "target": "200",
        "sourceHandle": "source-lwc",
        "targetHandle": "target-lwc"
      }]
        */
	console.log("===connections:", connections);
	console.log("nodesData",nodesData);
	console.log(nodesData.value);
});

Update:
tracing inside the

function useHandleConnections(params) {
  . . .
  const _nodeId = useNodeId();
  const currentNodeId = vue.toRef(() => vue.toValue(nodeId) ?? _nodeId);
  const handleType = vue.toRef(() => vue.toValue(type));
  const handleId = vue.toRef(() => vue.toValue(id2) ?? null);
  . . .
  const lookup_id = `${currentNodeId.value}-${handleType.value}-${handleId.value}`;
  console.log("***lookup_id:", lookup_id);

}

it shows that the ${currentNodeId.value} is undefined for custom component.

lookup_id: undefined-source-source-lwc

[bcakmakoglu]

Never use a composable inside a function.
Composables, just like react hooks, are meant to be called inside the setup body of a component.

[sefgit]

thanks for the info.