feat(react): add comlink fetch hook (#338)

Author: cngonzalez

apps/kitchensink-react/src/Comlink/Framed.tsx

@@ -1,15 +1,18 @@
 import {type ComlinkStatus, useWindowConnection} from '@sanity/sdk-react'
 import {Box, Button, Card, Container, Label, Stack, Text, TextInput} from '@sanity/ui'
-import {type ReactElement, useState} from 'react'
+import {type ReactElement, useEffect, useRef, useState} from 'react'
 
-import {FromIFrameMessage, ToIFrameMessage} from './types'
+import {FromIFrameMessage, ToIFrameMessage, UserData} from './types'
 
 const Framed = (): ReactElement => {
-  const [message, setMessage] = useState('')
   const [status, setStatus] = useState<ComlinkStatus>('idle')
   const [receivedMessages, setReceivedMessages] = useState<string[]>([])
+  const [users, setUsers] = useState<UserData[]>([])
+  const [error, setError] = useState<string | null>(null)
 
-  const {sendMessage} = useWindowConnection<FromIFrameMessage, ToIFrameMessage>({
+  const messageInputRef = useRef<HTMLInputElement>(null)
+
+  const {sendMessage, fetch} = useWindowConnection<FromIFrameMessage, ToIFrameMessage>({
     name: 'frame',
     connectTo: 'main-app',
     onStatus: setStatus,
@@ -20,15 +23,44 @@ const Framed = (): ReactElement => {
     },
   })
 
+  // Fetch all users when connected
+  useEffect(() => {
+    if (!fetch || status !== 'connected') return
+
+    async function fetchUsers(signal: AbortSignal) {
+      try {
+        const data = await fetch<UserData[]>('FETCH_USERS', undefined, {signal})
+        setUsers(data)
+        setError(null)
+      } catch (err) {
+        if (err?.name !== 'AbortError') {
+          setError('Failed to fetch users')
+        }
+      }
+    }
+
+    const controller = new AbortController()
+    fetchUsers(controller.signal)
+
+    return () => {
+      controller.abort()
+    }
+  }, [fetch, status])
+
   const sendMessageToParent = () => {
+    const message = messageInputRef.current?.value || ''
     if (message.trim()) {
       sendMessage('FROM_IFRAME', {message})
-      setMessage('')
+      if (messageInputRef.current) {
+        messageInputRef.current.value = ''
+      }
     }
   }
 
+  const isConnected = status === 'connected'
+
   return (
-    <Container height={'fill'}>
+    <Container height="fill">
       <Card tone="transparent">
         <Stack padding={4} space={4}>
           <Text weight="semibold" size={2}>
@@ -41,21 +73,49 @@ const Framed = (): ReactElement => {
             <Box display="flex">
               <Box flex={1}>
                 <TextInput
-                  value={message}
-                  onChange={(event) => setMessage(event.currentTarget.value)}
+                  ref={messageInputRef}
                   onKeyDown={(e) => e.key === 'Enter' && sendMessageToParent()}
-                  disabled={status !== 'connected'}
+                  disabled={!isConnected}
                 />
               </Box>
               <Button
                 text="Send"
                 tone="primary"
                 onClick={sendMessageToParent}
-                disabled={status !== 'connected'}
+                disabled={!isConnected}
               />
             </Box>
           </Stack>
 
+          {/* Users section */}
+          <Card padding={3} border radius={2}>
+            <Stack space={3}>
+              <Label>Users</Label>
+              {users.length > 0 ? (
+                <Stack space={2}>
+                  {users.map((user) => (
+                    <Card key={user.id} padding={3} tone="positive" radius={2}>
+                      <Stack space={2}>
+                        <Text size={1} weight="semibold">
+                          {user.name}
+                        </Text>
+                        <Text size={1}>{user.email}</Text>
+                      </Stack>
+                    </Card>
+                  ))}
+                </Stack>
+              ) : error ? (
+                <Card padding={3} tone="critical" radius={2}>
+                  <Text size={1}>{error}</Text>
+                </Card>
+              ) : (
+                <Card padding={3} tone="default" radius={2}>
+                  <Text size={1}>Loading users...</Text>
+                </Card>
+              )}
+            </Stack>
+          </Card>
+
           {/* Received messages */}
           <Box flex={1} style={{height: '500px'}}>
             <Stack space={3}>

apps/kitchensink-react/src/Comlink/ParentApp.tsx

@@ -3,32 +3,57 @@ import {Box, Button, Card, Label, Stack, Text, TextInput} from '@sanity/ui'
 import {ReactElement, useEffect, useRef, useState} from 'react'
 
 import {PageLayout} from '../components/PageLayout'
-import {FromIFrameMessage, ToIFrameMessage} from './types'
+import {FetchUsersRequest, FromIFrameMessage, ToIFrameMessage, UserData} from './types'
+
+// Add this mock data
+const MOCK_USERS: Record<string, UserData> = {
+  1: {id: '1', name: 'Alice Johnson', email: '[email protected]'},
+  2: {id: '2', name: 'Bob Smith', email: '[email protected]'},
+  3: {id: '3', name: 'Carol Williams', email: '[email protected]'},
+}
 
 const ParentApp = (): ReactElement => {
   const [selectedFrame, setSelectedFrame] = useState<number>(1)
-  const [message, setMessage] = useState('')
   const [status, setStatus] = useState<ComlinkStatus>('idle')
   const [receivedMessages, setReceivedMessages] = useState<Array<{from: string; message: string}>>(
     [],
   )
+
+  const messageInputRef = useRef<HTMLInputElement>(null)
   const iframeRef = useRef<HTMLIFrameElement>(null)
 
-  const {sendMessage, connect} = useFrameConnection<ToIFrameMessage, FromIFrameMessage>({
+  const {sendMessage, connect} = useFrameConnection<
+    ToIFrameMessage,
+    FromIFrameMessage | FetchUsersRequest
+  >({
     name: 'main-app',
     connectTo: 'frame',
     targetOrigin: '*',
     onStatus: setStatus,
+    heartbeat: true,
     onMessage: {
       FROM_IFRAME: (data: {message: string}) => {
         setReceivedMessages((prev) => [
           ...prev,
           {from: `Frame ${selectedFrame}`, message: data.message},
         ])
       },
+      FETCH_USERS: () => {
+        return Object.values(MOCK_USERS)
+      },
     },
   })
 
+  const sendMessageToFramedApp = () => {
+    const message = messageInputRef.current?.value || ''
+    if (message.trim()) {
+      sendMessage('TO_IFRAME', {message})
+      if (messageInputRef.current) {
+        messageInputRef.current.value = ''
+      }
+    }
+  }
+
   useEffect(() => {
     let cleanupIframeConnection: (() => void) | undefined
 
@@ -57,19 +82,12 @@ const ParentApp = (): ReactElement => {
     }
   }, [connect, selectedFrame])
 
-  const sendMessageToFramedApp = () => {
-    if (message.trim()) {
-      sendMessage('TO_IFRAME', {message})
-      setMessage('')
-    }
-  }
-
   const frames = [1, 2, 3]
 
   return (
     <PageLayout
       title="Comlink demo"
-      subtitle="Explore comlink connections"
+      subtitle="Explore comlink connections and fetch operations"
       homePath="/comlink-demo"
       homeText="Comlink Demo Home"
     >
@@ -107,9 +125,8 @@ const ParentApp = (): ReactElement => {
                     <Box display="flex">
                       <Box flex={1}>
                         <TextInput
-                          value={message}
-                          onChange={(event) => setMessage(event.currentTarget.value)}
-                          onKeyPress={(e) => e.key === 'Enter' && sendMessageToFramedApp()}
+                          ref={messageInputRef}
+                          onKeyDown={(e) => e.key === 'Enter' && sendMessageToFramedApp()}
                           disabled={status !== 'connected'}
                         />
                       </Box>

apps/kitchensink-react/src/Comlink/types.ts

@@ -1,9 +1,19 @@
-export type ToIFrameMessage = {
+export interface UserData {
+  id: string
+  name: string
+  email: string
+}
+
+export interface ToIFrameMessage {
   type: 'TO_IFRAME'
   data: {message: string}
 }
 
-export type FromIFrameMessage = {
+export interface FromIFrameMessage {
   type: 'FROM_IFRAME'
   data: {message: string}
 }
+
+export interface FetchUsersRequest {
+  type: 'FETCH_USERS'
+}

packages/react/src/hooks/comlink/useWindowConnection.ts

@@ -1,4 +1,4 @@
-import {type Node, type Status} from '@sanity/comlink'
+import {type MessageData, type Node, type Status} from '@sanity/comlink'
 import {type FrameMessage, getOrCreateNode, releaseNode, type WindowMessage} from '@sanity/sdk'
 import {useCallback, useEffect, useRef} from 'react'
 
@@ -29,10 +29,25 @@ export interface WindowConnection<TMessage extends WindowMessage> {
     type: TType,
     data?: Extract<TMessage, {type: TType}>['data'],
   ) => void
+  fetch: <TResponse>(
+    type: string,
+    data?: MessageData,
+    options?: {
+      signal?: AbortSignal
+      suppressWarnings?: boolean
+      responseTimeout?: number
+    },
+  ) => Promise<TResponse>
 }
 
 /**
  * @internal
+ * Hook to wrap a Comlink node in a React hook.
+ * Our store functionality takes care of the lifecycle of the node,
+ * as well as sharing a single node between invocations if they share the same name.
+ *
+ * Generally not to be used directly, but to be used as a dependency of
+ * Comlink-powered hooks like `useManageFavorite`.
  */
 export function useWindowConnection<
   TWindowMessage extends WindowMessage,
@@ -86,7 +101,22 @@ export function useWindowConnection<
     [],
   )
 
+  const fetch = useCallback(
+    <TResponse>(
+      type: string,
+      data?: MessageData,
+      fetchOptions?: {
+        responseTimeout?: number
+        signal?: AbortSignal
+        suppressWarnings?: boolean
+      },
+    ): Promise<TResponse> => {
+      return nodeRef.current?.fetch(type, data, fetchOptions ?? {}) as Promise<TResponse>
+    },
+    [],
+  )
   return {
     sendMessage,
+    fetch,
   }
 }