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>
-        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 {
+  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 },
   },
   {