@sanity/sdk-react 2.2.0 → 2.3.1

package/src/hooks/presence/usePresence.test.tsx

@@ -1,8 +1,9 @@
 import {getPresence, type SanityUser, type UserPresence} from '@sanity/sdk'
+import {act, renderHook} from '@testing-library/react'
 import {NEVER} from 'rxjs'
 import {describe, expect, it, vi} from 'vitest'
 
-import {act, renderHook} from '../../../test/test-utils'
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {usePresence} from './usePresence'
 
 vi.mock('@sanity/sdk', () => ({
@@ -14,10 +15,6 @@ vi.mock('@sanity/sdk', () => ({
   })),
 }))
 
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn(() => ({config: {projectId: 'test', dataset: 'test'}})),
-}))
-
 describe('usePresence', () => {
   it('should return presence locations and update when the store changes', () => {
     const initialLocations: UserPresence[] = [
@@ -60,7 +57,13 @@ describe('usePresence', () => {
     }
     vi.mocked(getPresence).mockReturnValue(mockPresenceSource)
 
-    const {result, unmount} = renderHook(() => usePresence())
+    const {result, unmount} = renderHook(() => usePresence(), {
+      wrapper: ({children}) => (
+        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
+          {children}
+        </ResourceProvider>
+      ),
+    })
 
     // Initial state should be correct
     expect(result.current.locations).toEqual(initialLocations)

package/src/hooks/preview/useDocumentPreview.test.tsx

@@ -1,8 +1,9 @@
 import {type DocumentHandle, getPreviewState, type PreviewValue, resolvePreview} from '@sanity/sdk'
 import {act, render, screen} from '@testing-library/react'
-import {Suspense, useRef} from 'react'
+import {useRef} from 'react'
 import {type Mock} from 'vitest'
 
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {useDocumentPreview} from './useDocumentPreview'
 
 // Mock IntersectionObserver
@@ -24,20 +25,18 @@ beforeAll(() => {
 })
 
 // Mock the preview store
-vi.mock('@sanity/sdk', () => {
+vi.mock('@sanity/sdk', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@sanity/sdk')>()
   const getCurrent = vi.fn()
   const subscribe = vi.fn()
 
   return {
+    ...actual,
     resolvePreview: vi.fn(),
     getPreviewState: vi.fn().mockReturnValue({getCurrent, subscribe}),
   }
 })
 
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: () => ({}),
-}))
-
 const mockDocument: DocumentHandle = {
   documentId: 'doc1',
   documentType: 'exampleType',
@@ -82,9 +81,9 @@ describe('useDocumentPreview', () => {
     subscribe.mockImplementation(() => eventsUnsubscribe)
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <TestComponent {...mockDocument} />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Initially, element is not intersecting
@@ -127,9 +126,9 @@ describe('useDocumentPreview', () => {
     })
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <TestComponent {...mockDocument} />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     expect(screen.getByText('Loading...')).toBeInTheDocument()
@@ -162,9 +161,9 @@ describe('useDocumentPreview', () => {
     subscribe.mockImplementation(() => vi.fn())
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <TestComponent {...mockDocument} />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     expect(screen.getByText('Fallback Title')).toBeInTheDocument()
@@ -192,9 +191,9 @@ describe('useDocumentPreview', () => {
     }
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <NoRefComponent {...mockDocument} />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Should subscribe immediately without waiting for intersection
@@ -222,9 +221,9 @@ describe('useDocumentPreview', () => {
     }
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <NonHtmlRefComponent {...mockDocument} />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Should subscribe immediately without waiting for intersection

package/src/hooks/projection/useDocumentProjection.test.tsx

@@ -1,13 +1,9 @@
-import {
-  type DocumentHandle,
-  getProjectionState,
-  resolveProjection,
-  type ValidProjection,
-} from '@sanity/sdk'
+import {type DocumentHandle, getProjectionState, resolveProjection} from '@sanity/sdk'
 import {act, render, screen} from '@testing-library/react'
-import {Suspense, useRef} from 'react'
+import {useRef} from 'react'
 import {type Mock} from 'vitest'
 
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {useDocumentProjection} from './useDocumentProjection'
 
 // Mock IntersectionObserver
@@ -29,20 +25,18 @@ beforeAll(() => {
 })
 
 // Mock the projection store
-vi.mock('@sanity/sdk', () => {
+vi.mock('@sanity/sdk', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@sanity/sdk')>()
   const getCurrent = vi.fn()
   const subscribe = vi.fn()
 
   return {
+    ...actual,
     resolveProjection: vi.fn(),
     getProjectionState: vi.fn().mockReturnValue({getCurrent, subscribe}),
   }
 })
 
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: () => ({}),
-}))
-
 const mockDocument: DocumentHandle = {
   documentId: 'doc1',
   documentType: 'exampleType',
@@ -53,13 +47,7 @@ interface ProjectionResult {
   description: string
 }
 
-function TestComponent({
-  document,
-  projection,
-}: {
-  document: DocumentHandle
-  projection: ValidProjection
-}) {
+function TestComponent({document, projection}: {document: DocumentHandle; projection: string}) {
   const ref = useRef(null)
   const {data, isPending} = useDocumentProjection<ProjectionResult>({...document, projection, ref})
 
@@ -98,9 +86,9 @@ describe('useDocumentProjection', () => {
     subscribe.mockImplementation(() => eventsUnsubscribe)
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <TestComponent document={mockDocument} projection="{name, description}" />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Initially, element is not intersecting
@@ -148,9 +136,9 @@ describe('useDocumentProjection', () => {
     subscribe.mockReturnValue(() => {})
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <TestComponent document={mockDocument} projection="{title, description}" />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     await act(async () => {
@@ -175,9 +163,9 @@ describe('useDocumentProjection', () => {
     subscribe.mockImplementation(() => vi.fn())
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <TestComponent document={mockDocument} projection="{title, description}" />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     expect(screen.getByText('Fallback Title')).toBeInTheDocument()
@@ -195,9 +183,9 @@ describe('useDocumentProjection', () => {
     subscribe.mockImplementation(() => eventsUnsubscribe)
 
     const {rerender} = render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <TestComponent document={mockDocument} projection="{title}" />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Change projection
@@ -207,9 +195,9 @@ describe('useDocumentProjection', () => {
     })
 
     rerender(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <TestComponent document={mockDocument} projection="{title, description}" />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     expect(screen.getByText('Updated Title')).toBeInTheDocument()
@@ -224,10 +212,7 @@ describe('useDocumentProjection', () => {
     const eventsUnsubscribe = vi.fn()
     subscribe.mockImplementation(() => eventsUnsubscribe)
 
-    function NoRefComponent({
-      projection,
-      ...docHandle
-    }: DocumentHandle & {projection: ValidProjection}) {
+    function NoRefComponent({projection, ...docHandle}: DocumentHandle & {projection: string}) {
       const {data} = useDocumentProjection<ProjectionResult>({...docHandle, projection}) // No ref provided
       return (
         <div>
@@ -238,9 +223,9 @@ describe('useDocumentProjection', () => {
     }
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <NoRefComponent {...mockDocument} projection="{title, description}" />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Should subscribe immediately without waiting for intersection
@@ -259,7 +244,7 @@ describe('useDocumentProjection', () => {
     function NonHtmlRefComponent({
       projection,
       ...docHandle
-    }: DocumentHandle & {projection: ValidProjection}) {
+    }: DocumentHandle & {projection: string}) {
       const ref = useRef({}) // ref.current is not an HTML element
       const {data} = useDocumentProjection<ProjectionResult>({...docHandle, projection, ref})
       return (
@@ -271,9 +256,9 @@ describe('useDocumentProjection', () => {
     }
 
     render(
-      <Suspense fallback={<div>Loading...</div>}>
+      <ResourceProvider fallback={<div>Loading...</div>}>
         <NonHtmlRefComponent {...mockDocument} projection="{title, description}" />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Should subscribe immediately without waiting for intersection

package/src/hooks/projection/useDocumentProjection.ts

@@ -1,9 +1,4 @@
-import {
-  type DocumentHandle,
-  getProjectionState,
-  resolveProjection,
-  type ValidProjection,
-} from '@sanity/sdk'
+import {type DocumentHandle, getProjectionState, resolveProjection} from '@sanity/sdk'
 import {type SanityProjectionResult} from 'groq'
 import {useCallback, useSyncExternalStore} from 'react'
 import {distinctUntilChanged, EMPTY, Observable, startWith, switchMap} from 'rxjs'
@@ -15,7 +10,7 @@ import {useSanityInstance} from '../context/useSanityInstance'
  * @category Types
  */
 export interface useDocumentProjectionOptions<
-  TProjection extends ValidProjection = ValidProjection,
+  TProjection extends string = string,
   TDocumentType extends string = string,
   TDataset extends string = string,
   TProjectId extends string = string,
@@ -115,7 +110,7 @@ export interface useDocumentProjectionResults<TData> {
  * ```
  */
 export function useDocumentProjection<
-  TProjection extends ValidProjection = ValidProjection,
+  TProjection extends string = string,
   TDocumentType extends string = string,
   TDataset extends string = string,
   TProjectId extends string = string,

package/src/hooks/query/useQuery.test.tsx

@@ -1,9 +1,10 @@
 import {getQueryState, resolveQuery, type StateSource} from '@sanity/sdk'
 import {act, render, screen} from '@testing-library/react'
-import {Suspense, useState} from 'react'
+import {useState} from 'react'
 import {type Observable, Subject} from 'rxjs'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {useQuery} from './useQuery'
 
 // Mock the functions from '@sanity/sdk'
@@ -16,11 +17,6 @@ vi.mock('@sanity/sdk', async (importOriginal) => {
   }
 })
 
-// Mock the Sanity instance hook to return a dummy instance
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn().mockReturnValue({}),
-}))
-
 describe('useQuery', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -45,7 +41,11 @@ describe('useQuery', () => {
       )
     }
 
-    render(<TestComponent />)
+    render(
+      <ResourceProvider projectId="p" dataset="d" fallback={<p>Loading...</p>}>
+        <TestComponent />
+      </ResourceProvider>,
+    )
 
     // Verify that the output contains the data and that isPending is false
     expect(screen.getByTestId('output').textContent).toContain('test data')
@@ -87,9 +87,13 @@ describe('useQuery', () => {
     }
 
     render(
-      <Suspense fallback={<div data-testid="fallback">Loading...</div>}>
+      <ResourceProvider
+        projectId="p"
+        dataset="d"
+        fallback={<div data-testid="fallback">Loading...</div>}
+      >
         <TestComponent />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Initially, since storeValue is undefined, the component should suspend and fallback is shown
@@ -159,7 +163,11 @@ describe('useQuery', () => {
       )
     }
 
-    render(<WrapperComponent />)
+    render(
+      <ResourceProvider projectId="p" dataset="d" fallback={<p>Loading...</p>}>
+        <WrapperComponent />
+      </ResourceProvider>,
+    )
 
     // Initially, should show data1 and not pending
     expect(screen.getByTestId('output').textContent).toContain('data1')

package/src/hooks/releases/useActiveReleases.test.tsx

@@ -1,16 +1,11 @@
-import {getActiveReleasesState, type ReleaseDocument, type SanityInstance} from '@sanity/sdk'
+import {getActiveReleasesState, type ReleaseDocument} from '@sanity/sdk'
 import {renderHook} from '@testing-library/react'
 import {BehaviorSubject} from 'rxjs'
 import {describe, expect, it, vi} from 'vitest'
 
-import {useSanityInstance} from '../context/useSanityInstance'
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {useActiveReleases} from './useActiveReleases'
 
-// Mock the useSanityInstance hook
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn(),
-}))
-
 // Mock the getActiveReleasesState function
 vi.mock('@sanity/sdk', async () => {
   const actual = await vi.importActual('@sanity/sdk')
@@ -26,9 +21,6 @@ describe('useActiveReleases', () => {
   })
 
   it('should suspend when initial state is undefined', () => {
-    const mockInstance = {} as SanityInstance
-    vi.mocked(useSanityInstance).mockReturnValue(mockInstance)
-
     const mockSubject = new BehaviorSubject<ReleaseDocument[] | undefined>(undefined)
     const mockStateSource = {
       subscribe: vi.fn((callback) => {
@@ -41,13 +33,22 @@ describe('useActiveReleases', () => {
 
     vi.mocked(getActiveReleasesState).mockReturnValue(mockStateSource)
 
-    const {result} = renderHook(() => {
-      try {
-        return useActiveReleases()
-      } catch (e) {
-        return e
-      }
-    })
+    const {result} = renderHook(
+      () => {
+        try {
+          return useActiveReleases()
+        } catch (e) {
+          return e
+        }
+      },
+      {
+        wrapper: ({children}) => (
+          <ResourceProvider projectId="p" dataset="d" fallback={<p>Loading...</p>}>
+            {children}
+          </ResourceProvider>
+        ),
+      },
+    )
 
     // Verify that the hook threw a promise (suspended)
     expect(result.current).toBeInstanceOf(Promise)
@@ -55,9 +56,6 @@ describe('useActiveReleases', () => {
   })
 
   it('should resolve with releases when data is available', () => {
-    const mockInstance = {} as SanityInstance
-    vi.mocked(useSanityInstance).mockReturnValue(mockInstance)
-
     const mockReleases: ReleaseDocument[] = [
       {_id: 'release1', _type: 'release'} as ReleaseDocument,
       {_id: 'release2', _type: 'release'} as ReleaseDocument,
@@ -75,7 +73,13 @@ describe('useActiveReleases', () => {
 
     vi.mocked(getActiveReleasesState).mockReturnValue(mockStateSource)
 
-    const {result} = renderHook(() => useActiveReleases())
+    const {result} = renderHook(() => useActiveReleases(), {
+      wrapper: ({children}) => (
+        <ResourceProvider projectId="p" dataset="d" fallback={<p>Loading...</p>}>
+          {children}
+        </ResourceProvider>
+      ),
+    })
 
     // Verify that the hook returned the releases without suspending
     expect(result.current).toEqual(mockReleases)

package/src/hooks/releases/usePerspective.test.tsx

@@ -4,20 +4,14 @@ import {
   getPerspectiveState,
   type PerspectiveHandle,
   type ReleaseDocument,
-  type SanityInstance,
 } from '@sanity/sdk'
 import {renderHook} from '@testing-library/react'
 import {BehaviorSubject} from 'rxjs'
 import {describe, expect, it, vi} from 'vitest'
 
-import {useSanityInstance} from '../context/useSanityInstance'
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {usePerspective} from './usePerspective'
 
-// Mock the useSanityInstance hook
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn(),
-}))
-
 // Mock the SDK functions
 vi.mock('@sanity/sdk', async () => {
   const actual = await vi.importActual('@sanity/sdk')
@@ -36,9 +30,6 @@ describe('usePerspective', () => {
   })
 
   it('should suspend when initial state is undefined', () => {
-    const mockInstance = {} as SanityInstance
-    vi.mocked(useSanityInstance).mockReturnValue(mockInstance)
-
     const perspectiveHandle: PerspectiveHandle = {
       perspective: 'published',
     }
@@ -76,13 +67,18 @@ describe('usePerspective', () => {
     vi.mocked(getPerspectiveState).mockReturnValue(mockStateSource)
     vi.mocked(getActiveReleasesState).mockReturnValue(mockReleasesStateSource)
 
-    const {result} = renderHook(() => {
-      try {
-        return usePerspective(perspectiveHandle)
-      } catch (e) {
-        return e
-      }
-    })
+    const {result} = renderHook(
+      () => {
+        try {
+          return usePerspective(perspectiveHandle)
+        } catch (e) {
+          return e
+        }
+      },
+      {
+        wrapper: ({children}) => <ResourceProvider fallback={null}>{children}</ResourceProvider>,
+      },
+    )
 
     // Verify that the hook threw a promise (suspended)
     expect(result.current).toBeInstanceOf(Promise)
@@ -90,9 +86,6 @@ describe('usePerspective', () => {
   })
 
   it('should resolve with perspective when data is available', () => {
-    const mockInstance = {} as SanityInstance
-    vi.mocked(useSanityInstance).mockReturnValue(mockInstance)
-
     const perspectiveHandle: PerspectiveHandle = {
       perspective: 'published',
     }
@@ -110,11 +103,12 @@ describe('usePerspective', () => {
 
     vi.mocked(getPerspectiveState).mockReturnValue(mockStateSource)
 
-    const {result} = renderHook(() => usePerspective(perspectiveHandle))
+    const {result} = renderHook(() => usePerspective(perspectiveHandle), {
+      wrapper: ({children}) => <ResourceProvider fallback={null}>{children}</ResourceProvider>,
+    })
 
     // Verify that the hook returned the perspective without suspending
     expect(result.current).toEqual(mockPerspective)
     expect(mockStateSource.getCurrent).toHaveBeenCalled()
-    expect(getPerspectiveState).toHaveBeenCalledWith(mockInstance, perspectiveHandle)
   })
 })

package/src/hooks/users/useUser.test.tsx

@@ -6,10 +6,11 @@ import {
   type UserProfile,
 } from '@sanity/sdk'
 import {act, fireEvent, render, screen} from '@testing-library/react'
-import {Suspense, useState} from 'react'
+import {useState} from 'react'
 import {type Observable, Subject} from 'rxjs'
 import {describe, expect, it, vi} from 'vitest'
 
+import {ResourceProvider} from '../../context/ResourceProvider'
 import {useUser} from './useUser'
 
 // Mock the functions from '@sanity/sdk'
@@ -22,11 +23,6 @@ vi.mock('@sanity/sdk', async (importOriginal) => {
   }
 })
 
-// Mock the Sanity instance hook to return a dummy instance
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn().mockReturnValue({config: {projectId: 'p'}}),
-}))
-
 describe('useUser', () => {
   // Create mock user profiles with all required fields
   const mockUserProfile: UserProfile = {
@@ -91,7 +87,11 @@ describe('useUser', () => {
       )
     }
 
-    render(<TestComponent />)
+    render(
+      <ResourceProvider projectId="p" fallback={null}>
+        <TestComponent />
+      </ResourceProvider>,
+    )
 
     // Verify that the output contains the user data and that isPending is false
     expect(screen.getByTestId('output').textContent).toContain('John Doe (gabc123)')
@@ -146,9 +146,9 @@ describe('useUser', () => {
     }
 
     render(
-      <Suspense fallback={<div data-testid="fallback">Loading...</div>}>
+      <ResourceProvider fallback={<div data-testid="fallback">Loading...</div>}>
         <TestComponent />
-      </Suspense>,
+      </ResourceProvider>,
     )
 
     // Initially, since storeValue is undefined, the component should suspend and fallback is shown
@@ -237,7 +237,11 @@ describe('useUser', () => {
       )
     }
 
-    render(<WrapperComponent />)
+    render(
+      <ResourceProvider fallback={null}>
+        <WrapperComponent />
+      </ResourceProvider>,
+    )
 
     // Initially, should show data for first user and not pending
     expect(screen.getByTestId('output').textContent).toContain('John Doe')
@@ -290,7 +294,11 @@ describe('useUser', () => {
       )
     }
 
-    render(<TestComponent />)
+    render(
+      <ResourceProvider fallback={null}>
+        <TestComponent />
+      </ResourceProvider>,
+    )
 
     expect(screen.getByTestId('output').textContent).toContain('User not found')
     expect(screen.getByTestId('output').textContent).toContain('not pending')
@@ -331,7 +339,11 @@ describe('useUser', () => {
       )
     }
 
-    render(<TestComponent />)
+    render(
+      <ResourceProvider projectId="test-project" fallback={null}>
+        <TestComponent />
+      </ResourceProvider>,
+    )
 
     expect(screen.getByTestId('output').textContent).toContain('John Doe (p12345)')
   })
@@ -360,8 +372,9 @@ describe('useUser', () => {
       const {data} = useUser({
         userId: 'gabc123',
         resourceType,
-        projectId: resourceType === 'project' ? 'test-project' : undefined,
-        organizationId: resourceType === 'organization' ? 'test-org' : undefined,
+        ...(resourceType === 'project'
+          ? {projectId: 'test-project'}
+          : {organizationId: 'test-org'}),
       })
       return (
         <div>
@@ -373,7 +386,11 @@ describe('useUser', () => {
       )
     }
 
-    render(<WrapperComponent />)
+    render(
+      <ResourceProvider projectId="test-project" fallback={null}>
+        <WrapperComponent />
+      </ResourceProvider>,
+    )
 
     // Initially should show project user
     expect(screen.getByTestId('output').textContent).toContain('John Doe')