@sanity/sdk-react 2.15.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -44,14 +44,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@sanity/client": "^7.23.0",
+    "@sanity/client": "^7.23.1",
     "@sanity/message-protocol": "^0.23.0",
-    "@sanity/types": "^6.1.0",
+    "@sanity/types": "^6.2.0",
     "groq": "3.88.1-typegen-experimental.0",
-    "react-compiler-runtime": "19.1.0-rc.2",
+    "react-compiler-runtime": "^1.0.0",
     "react-error-boundary": "^6.1.2",
     "rxjs": "^7.8.2",
-    "@sanity/sdk": "2.15.0"
+    "@sanity/sdk": "2.16.0"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
@@ -62,24 +62,24 @@
     "@types/node": "^24.12.4",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.2.0",
-    "@vitest/coverage-v8": "^4.1.9",
-    "babel-plugin-react-compiler": "19.1.0-rc.1",
-    "eslint": "^9.39.4",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^10.6.0",
     "groq-js": "^1.30.2",
     "jsdom": "^29.1.1",
-    "oxfmt": "^0.55.0",
+    "oxfmt": "^0.58.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "rollup-plugin-visualizer": "^7.0.1",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.5",
-    "vitest": "^4.1.9",
-    "@repo/package.bundle": "3.82.0",
-    "@repo/config-eslint": "0.0.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10",
     "@repo/config-test": "0.0.1",
+    "@repo/tsconfig": "0.0.1",
     "@repo/package.config": "0.0.1",
-    "@repo/tsconfig": "0.0.1"
+    "@repo/package.bundle": "3.82.0",
+    "@repo/config-eslint": "0.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/SDKProvider.test.tsx

@@ -1,41 +1,67 @@
+import {createSanityInstance, type SanityConfig} from '@sanity/sdk'
 import {render} from '@testing-library/react'
 import React from 'react'
-import {describe, expect, it, vi} from 'vitest'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
 
+import {useDashboardOrganizationId} from '../hooks/auth/useDashboardOrganizationId'
+import {resolveOrgResources} from '../utils/resolveOrgResources'
 import {SDKProvider} from './SDKProvider'
 
-// Mock ResourceProvider to test nesting behavior
+const instance = createSanityInstance()
+
+// Returns the same object on every call so the module-level WeakMap cache works across renders.
+vi.mock('../hooks/context/useSanityInstance', () => {
+  return {useSanityInstance: () => instance}
+})
+
+vi.mock('../hooks/auth/useDashboardOrganizationId', () => ({
+  useDashboardOrganizationId: vi.fn(),
+}))
+
+vi.mock('../utils/resolveOrgResources', () => ({
+  resolveOrgResources: vi.fn(),
+}))
+
 vi.mock('../context/ResourceProvider', () => ({
   ResourceProvider: ({
     children,
-    ...props
+    // exclude fallback: it's a real ResourceProvider prop but not part of config
+    fallback: _fallback,
+    resource,
+    ...config
   }: {
     children: React.ReactNode
-    projectId?: string
-    dataset?: string
-  }) => {
-    return (
-      <div
-        data-testid="resource-provider"
-        data-config={JSON.stringify({
-          projectId: props.projectId,
-          dataset: props.dataset,
-        })}
-      >
-        {children}
-      </div>
-    )
-  },
+    fallback?: React.ReactNode
+    resource?: {projectId?: string; dataset?: string}
+  }) => (
+    <div
+      data-testid="resource-provider"
+      data-config={JSON.stringify(config)}
+      data-resource={JSON.stringify(resource ?? null)}
+    >
+      {children}
+    </div>
+  ),
 }))
 
-// Mock AuthBoundary
 vi.mock('./auth/AuthBoundary', () => ({
-  AuthBoundary: ({children}: {children: React.ReactNode}) => {
-    return <div data-testid="auth-boundary">{children}</div>
-  },
+  AuthBoundary: ({children, projectIds}: {children: React.ReactNode; projectIds?: string[]}) => (
+    <div data-testid="auth-boundary" data-project-ids={JSON.stringify(projectIds ?? [])}>
+      {children}
+    </div>
+  ),
 }))
 
+const mockResolveOrgResources = vi.mocked(resolveOrgResources)
+const mockUseDashboardOrganizationId = vi.mocked(useDashboardOrganizationId)
+
 describe('SDKProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockResolveOrgResources.mockResolvedValue({})
+    mockUseDashboardOrganizationId.mockReturnValue(undefined)
+  })
+
   it('renders single ResourceProvider with AuthBoundary for a single config', () => {
     const config = {
       projectId: 'test-project',
@@ -93,4 +119,91 @@ describe('SDKProvider', () => {
       dataset: 'production',
     })
   })
+
+  it('preserves non-resource config fields (e.g. studio auth, perspective) on the root provider', () => {
+    const tokenSource = {subscribe: () => ({unsubscribe: () => {}})}
+    const config: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'production',
+      perspective: 'published',
+      studio: {authenticated: true, auth: {token: tokenSource}},
+    }
+
+    const {getAllByTestId} = render(
+      <SDKProvider config={config} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    const providers = getAllByTestId('resource-provider')
+    // The full first config is spread onto the root ResourceProvider so the
+    // root SanityInstance retains auth/perspective/etc. (The token source is a
+    // function and doesn't survive JSON serialization, so assert on the
+    // serializable fields and that the studio config object is carried through.)
+    const spreadConfig = JSON.parse(providers[0].getAttribute('data-config') || '{}')
+    expect(spreadConfig).toMatchObject({
+      projectId: 'test-project',
+      dataset: 'production',
+      perspective: 'published',
+      studio: {authenticated: true},
+    })
+  })
+
+  it('synthesizes the default resource from the first config when none is explicit', () => {
+    const config = {projectId: 'test-project', dataset: 'production'}
+
+    const {getAllByTestId} = render(
+      <SDKProvider config={config} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    const providers = getAllByTestId('resource-provider')
+    expect(JSON.parse(providers[0].getAttribute('data-resource') || 'null')).toEqual({
+      projectId: 'test-project',
+      dataset: 'production',
+    })
+  })
+
+  it('uses an explicitly provided "default" resource over the config-derived one', () => {
+    const config = {projectId: 'config-project', dataset: 'production'}
+    const resources = {default: {projectId: 'explicit-project', dataset: 'staging'}}
+
+    const {getAllByTestId} = render(
+      <SDKProvider config={config} resources={resources} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    const providers = getAllByTestId('resource-provider')
+    // Config fields still flow through for instance creation…
+    expect(JSON.parse(providers[0].getAttribute('data-config') || '{}')).toEqual(config)
+    // …but the explicit default resource wins as the resource context value.
+    expect(JSON.parse(providers[0].getAttribute('data-resource') || 'null')).toEqual(
+      resources.default,
+    )
+  })
+
+  it('collects deduped projectIds from both config and explicit resources', () => {
+    const configs = [
+      {projectId: 'project-1', dataset: 'production'},
+      {projectId: 'project-2', dataset: 'production'},
+    ]
+    const resources = {
+      // duplicates project-1 (should be deduped)
+      default: {projectId: 'project-1', dataset: 'production'},
+      other: {projectId: 'project-3', dataset: 'production'},
+    }
+
+    const {getByTestId} = render(
+      <SDKProvider config={configs} resources={resources} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SDKProvider>,
+    )
+
+    const projectIds = JSON.parse(
+      getByTestId('auth-boundary').getAttribute('data-project-ids') || '[]',
+    )
+    expect([...projectIds].sort()).toEqual(['project-1', 'project-2', 'project-3'])
+  })
 })

package/src/components/SDKProvider.tsx

@@ -1,10 +1,15 @@
-import {type DocumentResource, isImportError, type SanityConfig} from '@sanity/sdk'
+import {
+  type DocumentResource,
+  isDatasetResource,
+  isImportError,
+  type SanityConfig,
+} from '@sanity/sdk'
 import {type ReactElement, type ReactNode, useEffect, useMemo} from 'react'
 import {ErrorBoundary, type FallbackProps} from 'react-error-boundary'
 
 import {DEFAULT_RESOURCE_NAME} from '../constants'
+import {OrganizationResourcesProvider} from '../context/OrganizationResourcesProvider'
 import {ResourceProvider} from '../context/ResourceProvider'
-import {ResourcesContext} from '../context/ResourcesContext'
 import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
 import {ChunkLoadError} from './errors/ChunkLoadError'
 import {clearChunkReloadFlag} from './errors/chunkReloadStorage'
@@ -17,6 +22,8 @@ export interface SDKProviderProps extends AuthBoundaryProps {
   config: SanityConfig | SanityConfig[]
   fallback: ReactNode
   resources?: Record<string, DocumentResource>
+  /** When set, automatically fetches and registers the organization's media library and canvas as named resources. */
+  inferMediaLibraryAndCanvas?: boolean
 }
 
 /**
@@ -40,38 +47,68 @@ export function SDKProvider({
   children,
   config,
   fallback,
+  inferMediaLibraryAndCanvas,
   ...props
 }: SDKProviderProps): ReactElement {
-  const allConfigs = Array.isArray(config) ? config : [config]
-  const resolvedConfig = allConfigs[0]
-  const projectIds = allConfigs.map((c) => c.projectId).filter((id): id is string => !!id)
+  // For legacy config support, extract the first config object as a default resource,
+  // matching the legacy behavior nesting ResourceProviders with the first config closest to users' application code.
+  // This should be removed when we remove legacy config support.
+  const defaultConfig = Array.isArray(config) ? config[0] : config
+  const defaultProjectId = defaultConfig?.projectId
+  const defaultDataset = defaultConfig?.dataset
 
-  // Extract static fields so the memo below doesn't take a reference dependency
-  // on `config` — inline config objects change identity on every render.
-  const singleConfig = Array.isArray(config) ? null : config
-  const defaultProjectId = singleConfig?.projectId
-  const defaultDataset = singleConfig?.dataset
-
-  // For a single config, synthesize a 'default' resource from its projectId/dataset
-  // so that hooks can resolve it via resourceName: 'default' or fall back to it
-  // automatically when no resource info is provided.
   const resourcesValue = useMemo(() => {
     const explicit = props.resources ?? {}
     if (defaultProjectId && defaultDataset && !Object.hasOwn(explicit, DEFAULT_RESOURCE_NAME)) {
       return {
-        [DEFAULT_RESOURCE_NAME]: {projectId: defaultProjectId, dataset: defaultDataset},
+        [DEFAULT_RESOURCE_NAME]: {
+          projectId: defaultProjectId,
+          dataset: defaultDataset,
+        },
         ...explicit,
       }
     }
     return explicit
   }, [defaultProjectId, defaultDataset, props.resources])
 
+  // Collect all projectIds from both resources and config, deduped so
+  // AuthBoundary doesn't verify the same project more than once.
+  const projectIds = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          [
+            ...Object.values(resourcesValue)
+              .filter(isDatasetResource)
+              .map((resource) => resource.projectId),
+            ...(Array.isArray(config) ? config : [config]).map((configObj) => configObj.projectId),
+          ].filter((id): id is string => !!id),
+        ),
+      ),
+    [resourcesValue, config],
+  )
+
   return (
     <ErrorBoundary FallbackComponent={ChunkAwareFallback}>
       <ResetChunkReloadFlagOnMount />
-      <ResourceProvider {...resolvedConfig} fallback={fallback}>
+      {/* Spread the first config so SanityInstance can use the auth,
+        perspective, and other config fields; `resource` lets an explicitly
+        provided `default` resource override the config-derived resource. */}
+      <ResourceProvider
+        {...defaultConfig}
+        resource={resourcesValue[DEFAULT_RESOURCE_NAME]}
+        fallback={fallback}
+      >
         <AuthBoundary {...props} projectIds={projectIds}>
-          <ResourcesContext.Provider value={resourcesValue}>{children}</ResourcesContext.Provider>
+          {/* OrganizationResourcesProvider wraps ResourcesContext.
+            It merges explicit resources with lazily inferred org resources (media
+            library, canvas) and provides the combined map to the subtree. */}
+          <OrganizationResourcesProvider
+            resources={resourcesValue}
+            inferMediaLibraryAndCanvas={inferMediaLibraryAndCanvas}
+          >
+            {children}
+          </OrganizationResourcesProvider>
         </AuthBoundary>
       </ResourceProvider>
     </ErrorBoundary>

package/src/components/SanityApp.tsx

@@ -23,6 +23,35 @@ export interface SanityAppProps {
   children: React.ReactNode
   /* Fallback content to show when child components are suspending. Same as the `fallback` prop for React Suspense. */
   fallback: React.ReactNode
+  /**
+   * Set this to automatically fetch and register the organization's media library and canvas as named resources.
+   * These resources will be available to hooks as `media-library` and `canvas`.
+   *
+   * The SDK App must be running in the organization's Dashboard to use this feature.
+   *
+   * @example
+   * ```tsx
+   *
+   * const MyApp = () => {
+   *   // should "just work" because of inferMediaLibraryAndCanvas.
+   *   const {data: assets} = useDocuments({
+   *     documentType: 'sanity.asset',
+   *     resourceName: 'media-library',
+   *   })
+   *   return (
+   *     <div>
+   *       {assets.map((asset) => (
+   *         <div key={asset._id}>{asset.originalFilename}</div>
+   *       ))}
+   *     </div>
+   *   )
+   * }
+   * <SanityApp inferMediaLibraryAndCanvas>
+   *   <MyApp />
+   * </SanityApp>
+   * ```
+   */
+  inferMediaLibraryAndCanvas?: boolean
 }
 
 const REDIRECT_URL = 'https://sanity.io/welcome'

package/src/context/OrganizationResourcesProvider.test.tsx

@@ -0,0 +1,189 @@
+import {createSanityInstance, type DocumentResource} from '@sanity/sdk'
+import {act, render} from '@testing-library/react'
+import {type ReactNode, Suspense, useContext, useEffect} from 'react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {useDashboardOrganizationId} from '../hooks/auth/useDashboardOrganizationId'
+import {resolveOrgResources} from '../utils/resolveOrgResources'
+import {OrganizationResourcesProvider} from './OrganizationResourcesProvider'
+import {ResourcesContext} from './ResourcesContext'
+
+function promiseWithResolvers<T>(): {
+  promise: Promise<T>
+  resolve: (value: T) => void
+} {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((res) => {
+    resolve = res
+  })
+  return {promise, resolve}
+}
+
+// Reset to a fresh instance per test so the module-level WeakMap cache (keyed by
+// instance) starts empty. `useSanityInstance` returns the same object across
+// renders within a test, which is what the cache relies on.
+let instance = createSanityInstance()
+
+vi.mock('../hooks/context/useSanityInstance', () => {
+  return {useSanityInstance: () => instance}
+})
+
+vi.mock('../hooks/auth/useDashboardOrganizationId', () => ({
+  useDashboardOrganizationId: vi.fn(),
+}))
+
+vi.mock('../utils/resolveOrgResources', () => ({
+  resolveOrgResources: vi.fn(),
+}))
+
+const mockResolveOrgResources = vi.mocked(resolveOrgResources)
+const mockUseDashboardOrganizationId = vi.mocked(useDashboardOrganizationId)
+
+describe('OrganizationResourcesProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    instance = createSanityInstance()
+    mockResolveOrgResources.mockResolvedValue({})
+    mockUseDashboardOrganizationId.mockReturnValue(undefined)
+  })
+
+  // Captures ResourcesContext via useEffect (side-effect territory, not render)
+  // to satisfy the react-compiler purity rule.
+  function makeCapture() {
+    const deferred = promiseWithResolvers<Record<string, DocumentResource>>()
+
+    const CaptureContexts = () => {
+      const resources = useContext(ResourcesContext)
+      useEffect(() => {
+        deferred.resolve(resources)
+      }, [resources])
+      return null
+    }
+
+    return {CaptureContexts, capturedResources: deferred.promise}
+  }
+
+  function renderProvider(
+    children: ReactNode,
+    options?: {
+      resources?: Record<string, DocumentResource>
+      inferMediaLibraryAndCanvas?: boolean
+    },
+  ) {
+    return render(
+      <Suspense fallback={<div>loading</div>}>
+        <OrganizationResourcesProvider
+          resources={options?.resources}
+          inferMediaLibraryAndCanvas={options?.inferMediaLibraryAndCanvas}
+        >
+          {children}
+        </OrganizationResourcesProvider>
+      </Suspense>,
+    )
+  }
+
+  it('does not suspend when inferMediaLibraryAndCanvas is not set', async () => {
+    const {CaptureContexts, capturedResources} = makeCapture()
+    renderProvider(<CaptureContexts />)
+    const resources = await capturedResources
+    expect(Object.keys(resources)).toHaveLength(0)
+    expect(mockResolveOrgResources).not.toHaveBeenCalled()
+  })
+
+  it('suspends children while org resources are being fetched, then renders with resolved resources', async () => {
+    mockUseDashboardOrganizationId.mockReturnValue('org-suspend-test')
+    const {promise, resolve} = promiseWithResolvers<void>()
+    mockResolveOrgResources.mockReturnValue(
+      promise.then(() => ({
+        mediaLibrary: {mediaLibraryId: 'ml-id'},
+        canvas: {canvasId: 'canvas-id'},
+      })) as ReturnType<typeof mockResolveOrgResources>,
+    )
+
+    const {CaptureContexts, capturedResources} = makeCapture()
+    await act(async () => {
+      renderProvider(<CaptureContexts />, {inferMediaLibraryAndCanvas: true})
+    })
+
+    await act(async () => {
+      resolve()
+    })
+
+    const resources = await capturedResources
+    expect(resources['media-library']).toEqual({mediaLibraryId: 'ml-id'})
+    expect(resources['canvas']).toEqual({canvasId: 'canvas-id'})
+  })
+
+  it('renders without inferred entries and logs a warning when resolveOrgResources rejects', async () => {
+    mockUseDashboardOrganizationId.mockReturnValue('org-warn-test')
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mockResolveOrgResources.mockRejectedValue(new Error('fetch failed'))
+
+    const {CaptureContexts, capturedResources} = makeCapture()
+    await act(async () => {
+      renderProvider(<CaptureContexts />, {inferMediaLibraryAndCanvas: true})
+    })
+
+    const resources = await capturedResources
+    expect(resources['media-library']).toBeUndefined()
+    expect(resources['canvas']).toBeUndefined()
+    expect(consoleSpy).toHaveBeenCalledWith(
+      '[sanity/sdk] Failed to infer org resources:',
+      expect.any(Error),
+    )
+    consoleSpy.mockRestore()
+  })
+
+  it('caches Promise references across providers for the same instance', () => {
+    mockUseDashboardOrganizationId.mockReturnValue('org-cache-test')
+    render(
+      <Suspense fallback={null}>
+        <OrganizationResourcesProvider inferMediaLibraryAndCanvas>
+          {null}
+        </OrganizationResourcesProvider>
+      </Suspense>,
+    )
+    render(
+      <Suspense fallback={null}>
+        <OrganizationResourcesProvider inferMediaLibraryAndCanvas>
+          {null}
+        </OrganizationResourcesProvider>
+      </Suspense>,
+    )
+
+    // resolveOrgResources should only have been called once across both providers.
+    expect(mockResolveOrgResources).toHaveBeenCalledTimes(1)
+  })
+
+  it('explicit resources are passed through to ResourcesContext', async () => {
+    const explicitResources = {
+      default: {projectId: 'p1', dataset: 'prod'},
+      secondary: {projectId: 'p2', dataset: 'staging'},
+    }
+
+    const {CaptureContexts, capturedResources} = makeCapture()
+    renderProvider(<CaptureContexts />, {resources: explicitResources})
+
+    expect(await capturedResources).toEqual(explicitResources)
+  })
+
+  it('explicit resources take precedence over inferred ones', async () => {
+    mockUseDashboardOrganizationId.mockReturnValue('org-override-test')
+    mockResolveOrgResources.mockResolvedValue({
+      mediaLibrary: {mediaLibraryId: 'inferred-ml'},
+      canvas: {canvasId: 'inferred-canvas'},
+    })
+
+    const explicitResources = {'media-library': {mediaLibraryId: 'explicit-ml'}}
+    const {CaptureContexts, capturedResources} = makeCapture()
+    await act(async () => {
+      renderProvider(<CaptureContexts />, {
+        resources: explicitResources,
+        inferMediaLibraryAndCanvas: true,
+      })
+    })
+
+    const resources = await capturedResources
+    expect(resources['media-library']).toEqual({mediaLibraryId: 'explicit-ml'})
+  })
+})