Merge pull request #3929 from xyflow/extend-use-nodes-data

Extend useNodesData by {id, type, data}

examples/react/src/examples/UseNodesData/ResultNode.tsx

@@ -1,20 +1,18 @@
 import { memo } from 'react';
 import { Handle, Position, useHandleConnections, useNodesData } from '@xyflow/react';
+import { isTextNode, type MyNode } from '.';
 
 function ResultNode() {
   const connections = useHandleConnections({
     type: 'target',
   });
-  const nodesData = useNodesData(connections.map((connection) => connection.source));
+  const nodesData = useNodesData<MyNode>(connections.map((connection) => connection.source));
+  const textNodes = nodesData.filter(isTextNode);
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
       <Handle type="target" position={Position.Left} />
-      <div>
+      <div>incoming texts: {textNodes.map(({ data }, i) => <div key={i}>{data.text}</div>) || 'none'}</div>
-        incoming texts:{' '}
-        {nodesData?.filter((nodeData) => nodeData.text !== undefined).map(({ text }, i) => <div key={i}>{text}</div>) ||
-          'none'}
-      </div>
     </div>
   );
 }

examples/react/src/examples/UseNodesData/UppercaseNode.tsx

@@ -1,16 +1,18 @@
 import { memo, useEffect } from 'react';
 import { Position, NodeProps, useReactFlow, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
+import { isTextNode, type TextNode, type MyNode } from '.';
 
 function UppercaseNode({ id }: NodeProps) {
   const { updateNodeData } = useReactFlow();
   const connections = useHandleConnections({
     type: 'target',
   });
-  const nodeData = useNodesData(connections[0]?.source);
+  const nodesData = useNodesData<MyNode>(connections[0]?.source);
+  const textNode = isTextNode(nodesData) ? nodesData : null;
 
   useEffect(() => {
-    updateNodeData(id, { text: nodeData?.text.toUpperCase() });
+    updateNodeData(id, { text: textNode?.data.text.toUpperCase() });
-  }, [nodeData]);
+  }, [textNode]);
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>

examples/react/src/examples/UseNodesData/index.tsx

@@ -17,9 +17,13 @@ import UppercaseNode from './UppercaseNode';
 
 export type TextNode = Node<{ text: string }, 'text'>;
 export type ResultNode = Node<{}, 'result'>;
-export type UppercaseNode = Node<{}, 'uppercase'>;
+export type UppercaseNode = Node<{ text: string }, 'uppercase'>;
 export type MyNode = TextNode | ResultNode | UppercaseNode;
 
+export function isTextNode(node: any): node is TextNode {
+  return node.type === 'text';
+}
+
 const nodeTypes = {
   text: TextNode,
   result: ResultNode,
@@ -38,7 +42,7 @@ const initNodes: MyNode[] = [
   {
     id: '1a',
     type: 'uppercase',
-    data: {},
+    data: { text: '' },
     position: { x: 100, y: 0 },
   },
   {

examples/svelte/src/routes/examples/usenodesdata/+page.svelte

@@ -1,3 +1,17 @@
+<script context="module" lang="ts">
+	import type { Node } from '@xyflow/svelte';
+
+	type TextNodeType = Node<{ text: string }, 'text'>;
+	type UppercaseNodeType = Node<{ text: string }, 'uppercase'>;
+	type ResultNodeType = Node<{}, 'result'>;
+
+	export function isTextNode(node: any): node is TextNodeType {
+		return node.type === 'text';
+	}
+
+	export type MyNode = TextNodeType | UppercaseNodeType | ResultNodeType;
+</script>
+
 <script lang="ts">
 	import { writable } from 'svelte/store';
 	import {
@@ -6,7 +20,6 @@
 		Background,
 		BackgroundVariant,
 		MiniMap,
-		type Node,
 		type NodeTypes,
 		type Edge
 	} from '@xyflow/svelte';
@@ -22,7 +35,7 @@
 		result: ResultNode
 	};
 
-	const nodes = writable<Node[]>([
+	const nodes = writable<MyNode[]>([
 		{
 			id: '1',
 			type: 'text',
@@ -34,7 +47,9 @@
 		{
 			id: '1a',
 			type: 'uppercase',
-			data: {},
+			data: {
+				text: ''
+			},
 			position: { x: 100, y: 0 }
 		},
 		{

examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte

@@ -6,6 +6,7 @@
 		useNodesData,
 		type NodeProps
 	} from '@xyflow/svelte';
+	import { isTextNode, type MyNode } from './+page.svelte';
 
 	type $$Props = NodeProps;
 
@@ -16,15 +17,16 @@
 		type: 'target'
 	});
 
-	$: nodeData = useNodesData($connections.map((connection) => connection.source));
+	$: nodeData = useNodesData<MyNode>($connections.map((connection) => connection.source));
+	$: textNodes = $nodeData.filter(isTextNode);
 </script>
 
 <div class="custom">
 	<Handle type="target" position={Position.Left} />
 	<div>incoming texts:</div>
 
-	{#each $nodeData as data}
+	{#each textNodes as textNode}
-		<div>{data.text}</div>
+		<div>{textNode.data.text}</div>
 	{/each}
 </div>
 

examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte

@@ -7,6 +7,7 @@
 		useSvelteFlow,
 		type NodeProps
 	} from '@xyflow/svelte';
+	import { isTextNode, type MyNode } from './+page.svelte';
 
 	type $$Props = NodeProps;
 
@@ -18,10 +19,11 @@
 		type: 'target'
 	});
 
-	$: nodeData = useNodesData($connections[0]?.source);
+	$: nodeData = useNodesData<MyNode>($connections[0]?.source);
+	$: textNode = isTextNode($nodeData) ? $nodeData : null;
 
 	$: {
-		updateNodeData(id, { text: $nodeData?.text?.toUpperCase() || '' });
+		updateNodeData(id, { text: textNode?.data.text.toUpperCase() || '' });
 	}
 </script>
 

packages/react/src/hooks/useNodesData.ts

@@ -4,40 +4,45 @@ import { shallow } from 'zustand/shallow';
 import { useStore } from '../hooks/useStore';
 import type { Node } from '../types';
 
+export interface NodeDataReturn<NodeType extends Node> {
+  id: string;
+  type: NodeType['type'];
+  data: NodeType['data'];
+}
+
 /**
  * Hook for receiving data of one or multiple nodes
  *
  * @public
  * @param nodeId - The id (or ids) of the node to get the data from
  * @param guard - Optional guard function to narrow down the node type
- * @returns An array od data objects
+ * @returns An object (or array of object) with {id, type, data} representing each node
  */
-export function useNodesData<NodeType extends Node = Node>(nodeId: string): NodeType['data'] | null;
-export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): NodeType['data'][];
 export function useNodesData<NodeType extends Node = Node>(
-  nodeIds: string[],
+  nodeId: string
-  guard: (node: Node) => node is NodeType
+): Pick<NodeType, 'id' | 'type' | 'data'> | null;
-): NodeType['data'][];
+export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const nodesData = useStore(
     useCallback(
       (s) => {
-        if (!Array.isArray(nodeIds)) {
-          return s.nodeLookup.get(nodeIds)?.data || null;
-        }
-
         const data = [];
+        const isArrayOfIds = Array.isArray(nodeIds);
+        const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
 
-        for (const nodeId of nodeIds) {
+        for (const nodeId of _nodeIds) {
-          const nodeData = s.nodeLookup.get(nodeId)?.data;
+          const node = s.nodeLookup.get(nodeId);
-
+          if (node) {
-          if (nodeData) {
+            data.push({
-            data.push(nodeData);
+              id: node.id,
+              type: node.type,
+              data: node.data,
+            });
           }
         }
 
-        return data;
+        return isArrayOfIds ? data : data[0] ?? null;
       },
       [nodeIds]
     ),

packages/svelte/src/lib/hooks/useNodesData.ts

@@ -3,17 +3,13 @@ import { derived, type Readable } from 'svelte/store';
 import type { Node } from '$lib/types';
 import { useStore } from '$lib/store';
 
-function areNodesDataEqual(a: (Node['data'] | null)[] | null, b: (Node['data'] | null)[] | null) {
+function areNodesDataEqual(a: any[], b: any[]) {
-  if ((!a && !b) || (!a?.length && !b?.length)) {
+  if (a.length !== b.length) {
-    true;
-  }
-
-  if (!a || !b || a.length !== b.length) {
     return false;
   }
 
   for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) {
+    if (a[i].data !== b[i].data) {
       return false;
     }
   }
@@ -26,47 +22,38 @@ function areNodesDataEqual(a: (Node['data'] | null)[] | null, b: (Node['data'] |
  *
  * @public
  * @param nodeId - The id (or ids) of the node to get the data from
- * @param guard - Optional guard function to narrow down the node type
  * @returns A readable store with an array of data objects
  */
 export function useNodesData<NodeType extends Node = Node>(
   nodeId: string
-): Readable<NodeType['data'] | null>;
+): Readable<Pick<NodeType, 'id' | 'data' | 'type'> | null>;
 export function useNodesData<NodeType extends Node = Node>(
   nodeIds: string[]
-): Readable<NodeType['data'][]>;
+): Readable<Pick<NodeType, 'id' | 'data' | 'type'>[]>;
-export function useNodesData<NodeType extends Node = Node>(
-  nodeIds: string[],
-  guard: (node: Node) => node is NodeType
-): Readable<NodeType['data'][]>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const { nodes, nodeLookup } = useStore();
-  let prevNodesData: (Node['data'] | null)[] | null = null;
+  let prevNodesData: any = [];
 
   return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
-    let nextNodesData: (Node['data'] | null)[] | null = null;
+    const nextNodesData = [];
-    const nodeIdArray = Array.isArray(nodeIds);
+    const isArrayOfIds = Array.isArray(nodeIds);
+    const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
 
-    if (!nodeIdArray) {
+    for (const nodeId of _nodeIds) {
-      nextNodesData = [nodeLookup.get(nodeIds)?.data || null];
+      const node = nodeLookup.get(nodeId);
-    } else {
+      if (node) {
-      const data = [];
+        nextNodesData.push({
-
+          id: node.id,
-      for (const nodeId of nodeIds) {
+          type: node.type,
-        const nodeData = nodeLookup.get(nodeId)?.data;
+          data: node.data
-
+        });
-        if (nodeData) {
-          data.push(nodeData);
-        }
       }
-
-      nextNodesData = data;
     }
 
     if (!areNodesDataEqual(nextNodesData, prevNodesData)) {
       prevNodesData = nextNodesData;
-      set(nodeIdArray ? nextNodesData : nextNodesData[0]);
+      set(isArrayOfIds ? nextNodesData : nextNodesData[0] ?? null);
     }
   });
 }