@sanity/sdk-react 0.0.0-alpha.1

package/src/hooks/client/useClient.test.tsx

@@ -0,0 +1,130 @@
+import {type SanityClient} from '@sanity/client'
+import {act} from '@testing-library/react'
+import type {Subscribable, Subscriber} from 'rxjs'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {renderHook} from '../../../test/test-utils'
+import {useClient} from './useClient'
+
+vi.mock(import('@sanity/sdk'), async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    getClient: vi.fn(),
+    getSubscribableClient: vi.fn(),
+  }
+})
+
+const {getClient, getSubscribableClient} = await import('@sanity/sdk')
+
+describe('useClient', () => {
+  let subscribers: {next: (client: SanityClient) => void}[] = []
+  let currentClient: SanityClient
+
+  beforeEach(() => {
+    subscribers = []
+
+    currentClient = {
+      config: () => ({token: undefined, apiVersion: 'v2024-11-12'}),
+    } as unknown as SanityClient
+
+    // Create a subscribable interface directly
+    const createSubscribable = (): Subscribable<SanityClient> => ({
+      subscribe: (subscriber: {next: (client: SanityClient) => void}) => {
+        subscribers.push(subscriber)
+        subscriber.next(currentClient)
+        return {
+          unsubscribe: () => {
+            const index = subscribers.indexOf(subscriber)
+            if (index > -1) subscribers.splice(index, 1)
+          },
+        }
+      },
+    })
+
+    vi.mocked(getClient).mockReturnValue(currentClient)
+    vi.mocked(getSubscribableClient).mockImplementation(() => createSubscribable())
+  })
+  it('should return initial client', () => {
+    const {result} = renderHook(() => useClient({apiVersion: 'v2024-11-12'}))
+
+    expect(result.current.config().token).toBeUndefined()
+    expect(result.current.config().apiVersion).toBe('v2024-11-12')
+  })
+
+  it('should handle client update through authentication changes', async () => {
+    let clientSubscriber: Subscriber<SanityClient> | undefined
+
+    // Create a subscribable that can simulate updates
+    vi.mocked(getSubscribableClient).mockImplementation(() => ({
+      subscribe: (subscriber: Subscriber<SanityClient>) => {
+        clientSubscriber = subscriber
+        // Send initial client
+        subscriber.next(currentClient)
+        return {
+          unsubscribe: vi.fn(),
+        }
+      },
+    }))
+
+    const {result} = renderHook(() => useClient({apiVersion: 'v2024-11-12'}))
+
+    // Verify initial state
+    expect(result.current.config().token).toBeUndefined()
+    expect(clientSubscriber).toBeDefined()
+
+    // Create authenticated client
+    const authenticatedClient = {
+      config: () => ({token: 'auth-token', apiVersion: 'v2024-11-12'}),
+    } as unknown as SanityClient
+
+    // Update getClient to return the new client
+    vi.mocked(getClient).mockReturnValue(authenticatedClient)
+
+    // Simulate the client update that would happen after auth change
+    await act(async () => {
+      clientSubscriber!.next(authenticatedClient)
+    })
+
+    // Verify the client was updated with the new token
+    expect(result.current.config().token).toBe('auth-token')
+  })
+
+  it('should unsubscribe on unmount', () => {
+    const unsubscribeSpy = vi.fn()
+    vi.mocked(getSubscribableClient).mockImplementation(() => ({
+      subscribe: () => ({
+        unsubscribe: unsubscribeSpy,
+      }),
+    }))
+
+    const {unmount} = renderHook(() => useClient({apiVersion: 'v2024-11-12'}))
+
+    unmount()
+    expect(unsubscribeSpy).toHaveBeenCalled()
+  })
+
+  it('should handle subscription errors', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    const testError = new Error('Subscription error')
+    let errorSubscriber: Subscriber<SanityClient> | undefined
+
+    // Mock getSubscribableClient to create a subscription that will error
+    vi.mocked(getSubscribableClient).mockImplementation(() => ({
+      subscribe: (subscriber: Subscriber<SanityClient>) => {
+        errorSubscriber = subscriber
+        return {
+          unsubscribe: vi.fn(),
+        }
+      },
+    }))
+
+    renderHook(() => useClient({apiVersion: 'v2024-11-12'}))
+
+    errorSubscriber!.error(testError)
+
+    // eslint-disable-next-line no-console
+    expect(console.error).toHaveBeenCalledWith('Error in useClient subscription:', testError)
+  })
+})

package/src/hooks/client/useClient.ts

@@ -0,0 +1,56 @@
+import {type SanityClient} from '@sanity/client'
+import {type ClientOptions, getClient, getSubscribableClient} from '@sanity/sdk'
+import {useCallback, useSyncExternalStore} from 'react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+
+/**
+ * A React hook that provides a client that subscribes to changes in your application,
+ * such as user authentication changes.
+ *
+ * @remarks
+ * The hook uses `useSyncExternalStore` to safely subscribe to changes
+ * and ensure consistency between server and client rendering.
+ *
+ * @returns A Sanity client
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const client = useClient()
+ *   const [document, setDocument] = useState(null)
+ *   useEffect(async () => {
+ *     const doc = client.fetch('*[_id == "myDocumentId"]')
+ *     setDocument(doc)
+ *   }, [])
+ *  return <div>{document ?? 'Loading...'}</div>
+ * }
+ * ```
+ *
+ * @public
+ */
+export function useClient(options: ClientOptions): SanityClient {
+  const instance = useSanityInstance()
+
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      const client$ = getSubscribableClient(options, instance)
+      const subscription = client$.subscribe({
+        next: onStoreChange,
+        error: (error) => {
+          // @TODO: We should tackle error handling / error boundaries soon
+          // eslint-disable-next-line no-console
+          console.error('Error in useClient subscription:', error)
+        },
+      })
+      return () => subscription.unsubscribe()
+    },
+    [instance, options],
+  )
+
+  const getSnapshot = useCallback(() => {
+    return getClient(options, instance)
+  }, [instance, options])
+
+  return useSyncExternalStore(subscribe, getSnapshot)
+}

package/src/hooks/context/useSanityInstance.test.tsx

@@ -0,0 +1,31 @@
+import {createSanityInstance} from '@sanity/sdk'
+import {renderHook} from '@testing-library/react'
+import React from 'react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {SanityProvider} from '../../components/context/SanityProvider'
+import {useSanityInstance} from './useSanityInstance'
+
+describe('useSanityInstance', () => {
+  const sanityInstance = createSanityInstance({projectId: 'test-project', dataset: 'production'})
+
+  it('returns sanity instance when used within provider', () => {
+    const wrapper = ({children}: {children: React.ReactNode}) => (
+      <SanityProvider sanityInstance={sanityInstance}>{children}</SanityProvider>
+    )
+
+    const {result} = renderHook(() => useSanityInstance(), {wrapper})
+
+    expect(result.current).toBe(sanityInstance)
+  })
+
+  it('throws error when used outside provider', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    expect(() => {
+      renderHook(() => useSanityInstance())
+    }).toThrow('useSanityInstance must be called from within the SanityProvider')
+
+    consoleSpy.mockRestore()
+  })
+})

package/src/hooks/context/useSanityInstance.ts

@@ -0,0 +1,23 @@
+import type {SanityInstance} from '@sanity/sdk'
+import {useContext} from 'react'
+
+import {SanityInstanceContext} from '../../components/context/SanityProvider'
+
+/**
+ * Hook that provides the current Sanity instance from the context.
+ * This must be called from within a `SanityProvider` component.
+ * @public
+ * @returns the current Sanity instance
+ * @example
+ * ```tsx
+ * const instance = useSanityInstance()
+ * ```
+ */
+export const useSanityInstance = (): SanityInstance => {
+  const sanityInstance = useContext(SanityInstanceContext)
+  if (!sanityInstance) {
+    throw new Error('useSanityInstance must be called from within the SanityProvider')
+  }
+
+  return sanityInstance
+}