Computing Flows

This example uses the computing-flow helpers — useNodesData, useNodeConnections and updateNodeData — to pass data along the graph, so a node can react to the output of the nodes connected to it.


import type { Node } from '@xyflow/vue';
 
// distributes Pick across a union so `.type` narrows `.data` (mirrors what useNodesData returns)
type DistributivePick<T, K extends keyof T> = T extends unknown ? Pick<T, K> : never;
 
export type TextNode = Node<{ text: string }, 'text'>;
export type ResultNode = Node<Record<string, never>, 'result'>;
export type UppercaseNode = Node<{ text: string }, 'uppercase'>;
export type MyNode = TextNode | ResultNode | UppercaseNode;
 
// the id/type/data slice returned by useNodesData
type MyNodeData = DistributivePick<MyNode, 'id' | 'type' | 'data'>;
 
export function isTextNode(
  node: MyNodeData | null | undefined,
): node is DistributivePick<TextNode | UppercaseNode, 'id' | 'type' | 'data'> {
  return !node ? false : node.type === 'text' || node.type === 'uppercase';
}