Refresh custom node useNode on graph reload

[fabiomaistro]

Good morning, apologies if this question has already been asked.
I'm using a concept similar to this example:
https://vueflow.dev/examples/save.html
where I reload the JSON of the flow from a server after changes have been made elsewhere and try to re-render the flow in vue-flow with the new changes. In my case though I have a custom node where I use useNode() composable to render the label and some additional text taken from the data attribute of the node. Basically something like this:

<template>
    <div>
        <div>
            <strong>{{node?.label ?? ""}}</strong>
        </div>
        <div>{{node.data.additionalText}}</div>
    </div>
</template>

<script setup lang="ts">
    import { useNode } from '@vue-flow/core'
    const { node } = useNode();
</script>

Now, the problem is that the custom node "label" and "additionalText" don't refresh when the setNodes and setEdges are called. Obviously, I found the usual Vue workaround of applying a key attribute to the custom node component and changing that causes a refresh, but I was wondering if there is a more linear way to do this. Maybe I'm missing an event I can listen to or something similar?

[bcakmakoglu]

Can you provide a sandbox for this issue?
In another project I do use setNodes/setEdges + useNode/useEdge and do not experience this problems at all 🤔

[fabiomaistro]

Here you are @bcakmakoglu, please notice how the custom label doesn't change from "Custom" to "ABC" when pressing the button...

https://stackblitz.com/edit/vitejs-vite-busjzd?embed=1&file=src%2FApp.vue

[bcakmakoglu]

Try this instead: https://stackblitz.com/edit/vitejs-vite-piblhn?file=src%2FApp.vue

<script setup lang="ts">
import { computed, inject } from 'vue';
import { useVueFlow, NodeIdInjection } from '@vue-flow/core';

const { findNode } = useVueFlow();

const node = computed(() => findNode(inject(NodeIdInjection)));
</script>

The issue here is that useNode currently does not supply a reactive node obj, but will only call findNode once and thus you're sort of stuck with the old node obj (before you overwrote it).

This will be fixed in 2.0.0 (relevant PR is ready here #640) but as this constitutes a breaking change, this will not be available in any 1.x.x version, sorry :/

[fabiomaistro]

Great, that works, thanks.
What I see from the release 2.0.0 sounds promising, any ETA on the official release of the package?

[bcakmakoglu]

Honestly, not really - some time during this year is the best ETA I can give 🥲
I still have some stuff I need to work out before releasing but I do plan on releasing an alpha/beta version soon(ish) (some time during the summer I'd say)

[bcakmakoglu]

Btw just for completions sake, you can also just use regular props (which work fine with overwriting)

<template #node-custom="props">
      <CustomNode :label="props.label"></CustomNode>
</template>

// CustomNode.vue
<script setup lang="ts">
defineProps<{ label: string }>();
</script>