added id, type to result from useNodesData

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

@@ -1,20 +1,20 @@
 import { memo } from 'react';
 import { Handle, Position, useHandleConnections, useNodesData } from '@xyflow/react';
+import { TextNode, 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) as TextNode[];
+
+  textNodes[0].data;
 
   return (
     <div style={{ background: '#eee', color: '#222', padding: 10, fontSize: 12, borderRadius: 10 }}>
       <Handle type="target" position={Position.Left} />
-      <div>
-        incoming texts:{' '}
-        {nodesData?.filter((nodeData) => nodeData.text !== undefined).map(({ text }, i) => <div key={i}>{text}</div>) ||
-          'none'}
-      </div>
+      <div>incoming texts: {textNodes.map(({ data }, i) => <div key={i}>{data.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() });
-  }, [nodeData]);
+    updateNodeData(id, { text: textNode?.data.text.toUpperCase() });
+  }, [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 | UppercaseNode {
+  return node.type === 'text' || node.type === 'uppercase';
+}
+
 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,15 @@
+<script context="module" lang="ts">
+	import TextNode from './TextNode.svelte';
+	import UppercaseNode from './UppercaseNode.svelte';
+	import ResultNode from './ResultNode.svelte';
+
+	export function isTextNode(node: any): node is TextNode | UppercaseNode {
+		return node.type === 'text' || node.type === 'uppercase';
+	}
+
+	export type MyNode = TextNode | UppercaseNode | ResultNode;
+</script>
+
 <script lang="ts">
 	import { writable } from 'svelte/store';
 	import {
@@ -12,10 +24,6 @@
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
 
-	import TextNode from './TextNode.svelte';
-	import UppercaseNode from './UppercaseNode.svelte';
-	import ResultNode from './ResultNode.svelte';
-
 	const nodeTypes: NodeTypes = {
 		text: TextNode,
 		uppercase: UppercaseNode,
@@ -34,7 +42,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 } from './+page.svelte';
 
 	type $$Props = NodeProps;
 
@@ -17,14 +18,15 @@
 	});
 
 	$: nodeData = useNodesData($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}
-		<div>{data.text}</div>
+	{#each textNodes as textNode}
+		<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>