@sanity/sdk-react 0.0.0-alpha.21 → 0.0.0-alpha.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/sdk-react",
-  "version": "0.0.0-alpha.21",
+  "version": "0.0.0-alpha.23",
   "private": false,
   "description": "Sanity SDK React toolkit for Content OS",
   "keywords": [
@@ -43,33 +43,35 @@
   "prettier": "@sanity/prettier-config",
   "dependencies": {
     "@sanity/logos": "^2.1.13",
-    "@sanity/message-protocol": "^0.6.0",
+    "@sanity/message-protocol": "^0.7.0",
     "@sanity/types": "^3.78.1",
+    "@types/lodash-es": "^4.17.12",
+    "lodash-es": "^4.17.21",
     "react-error-boundary": "^5.0.0",
     "rxjs": "^7.8.1",
-    "@sanity/sdk": "0.0.0-alpha.20"
+    "@sanity/sdk": "0.0.0-alpha.23"
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/client": "^6.28.3",
+    "@sanity/client": "^6.28.4",
     "@sanity/comlink": "^3.0.1",
-    "@sanity/pkg-utils": "^6.13.4",
+    "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "3.0.9",
-    "babel-plugin-react-compiler": "19.0.0-beta-bafa41b-20250307",
+    "@vitest/coverage-v8": "3.1.1",
+    "babel-plugin-react-compiler": "19.0.0-beta-e993439-20250328",
     "eslint": "^9.22.0",
     "jsdom": "^25.0.1",
     "prettier": "^3.5.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "typescript": "^5.7.3",
-    "vite": "^6.2.2",
-    "vitest": "^3.0.9",
+    "vite": "^6.2.4",
+    "vitest": "^3.1.1",
     "@repo/config-eslint": "0.0.0",
     "@repo/config-test": "0.0.1",
     "@repo/package.config": "0.0.1",
@@ -89,7 +91,7 @@
     "build": "pkg build --strict --clean --check",
     "clean": "rimraf dist",
     "dev": "pkg watch",
-    "docs": "typedoc --out docs --tsconfig ../../tsconfig.tsdoc.json",
+    "docs": "typedoc --out docs --tsconfig ./tsconfig.dist.json",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
     "test": "vitest run",

package/src/_exports/index.ts

@@ -1,14 +1,13 @@
 export {AuthBoundary} from '../components/auth/AuthBoundary'
 export {SanityApp, type SanityAppProps} from '../components/SanityApp'
 export {SDKProvider, type SDKProviderProps} from '../components/SDKProvider'
-export type {SanityProviderProps} from '../context/SanityProvider'
-export {SanityProvider} from '../context/SanityProvider'
+export {ResourceProvider, type ResourceProviderProps} from '../context/ResourceProvider'
 export {useAuthState} from '../hooks/auth/useAuthState'
 export {useAuthToken} from '../hooks/auth/useAuthToken'
 export {useCurrentUser} from '../hooks/auth/useCurrentUser'
 export {useDashboardOrganizationId} from '../hooks/auth/useDashboardOrganizationId'
 export {useHandleAuthCallback} from '../hooks/auth/useHandleAuthCallback'
-export {useLoginUrls} from '../hooks/auth/useLoginUrls'
+export {useLoginUrl} from '../hooks/auth/useLoginUrl'
 export {useLogOut} from '../hooks/auth/useLogOut'
 export {useClient} from '../hooks/client/useClient'
 export {
@@ -27,7 +26,7 @@ export {
 } from '../hooks/comlink/useWindowConnection'
 export {useSanityInstance} from '../hooks/context/useSanityInstance'
 export {useNavigateToStudioDocument} from '../hooks/dashboard/useNavigateToStudioDocument'
-export {useStudioWorkspacesByResourceId} from '../hooks/dashboard/useStudioWorkspacesByResourceId'
+export {useStudioWorkspacesByProjectIdDataset} from '../hooks/dashboard/useStudioWorkspacesByProjectIdDataset'
 export {useDatasets} from '../hooks/datasets/useDatasets'
 export {useApplyDocumentActions} from '../hooks/document/useApplyDocumentActions'
 export {useDocument} from '../hooks/document/useDocument'
@@ -58,7 +57,7 @@ export {
 export {useProject} from '../hooks/projects/useProject'
 export {type ProjectWithoutMembers, useProjects} from '../hooks/projects/useProjects'
 export {useQuery} from '../hooks/query/useQuery'
-export {useUsers, type UseUsersParams, type UseUsersResult} from '../hooks/users/useUsers'
+export {type UsersResult, useUsers} from '../hooks/users/useUsers'
 export {REACT_SDK_VERSION} from '../version'
 export {type DatasetsResponse, type SanityProject, type SanityProjectMember} from '@sanity/client'
 export {type Status as ComlinkStatus} from '@sanity/comlink'

package/src/components/SDKProvider.test.tsx

@@ -1,79 +1,103 @@
-import * as SanitySDK from '@sanity/sdk'
 import {render} from '@testing-library/react'
-import {type ReactNode} from 'react'
+import React from 'react'
 import {describe, expect, it, vi} from 'vitest'
 
-import {type SanityProviderProps} from '../context/SanityProvider'
 import {SDKProvider} from './SDKProvider'
 
-// Mock the SDK module
-vi.mock('@sanity/sdk', () => ({
-  createSanityInstance: vi.fn(() => ({
-    // Mock return value of createSanityInstance
-    id: 'mock-instance',
-  })),
-}))
-
-// Mock the SanityProvider context to verify the instance is passed correctly
-vi.mock('../context/SanityProvider', () => ({
-  SanityProvider: ({children, sanityInstances}: SanityProviderProps) => (
-    <div data-testid="sanity-provider" data-instances={JSON.stringify(sanityInstances)}>
-      {children}
-    </div>
-  ),
-  useSanity: vi.fn(),
+// Mock ResourceProvider to test nesting behavior
+vi.mock('../context/ResourceProvider', () => ({
+  ResourceProvider: ({
+    children,
+    ...props
+  }: {
+    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>
+    )
+  },
 }))
 
-// Mock the AuthBoundary component
+// Mock AuthBoundary
 vi.mock('./auth/AuthBoundary', () => ({
-  AuthBoundary: ({children}: {children: ReactNode}) => (
-    <div data-testid="auth-boundary">{children}</div>
-  ),
+  AuthBoundary: ({children}: {children: React.ReactNode}) => {
+    return <div data-testid="auth-boundary">{children}</div>
+  },
 }))
 
 describe('SDKProvider', () => {
-  const mockConfig = {
-    projectId: 'test-project',
-    dataset: 'test-dataset',
-  }
+  it('renders single ResourceProvider with AuthBoundary for a single config', () => {
+    const config = {
+      projectId: 'test-project',
+      dataset: 'production',
+    }
 
-  it('creates a Sanity instance with the provided config', () => {
-    render(
-      <SDKProvider sanityConfigs={[mockConfig]} fallback={<div>Fallback</div>}>
-        <div>Test Child</div>
+    const {getAllByTestId, getByTestId} = render(
+      <SDKProvider config={[config]} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
       </SDKProvider>,
     )
 
-    expect(SanitySDK.createSanityInstance).toHaveBeenCalledWith(mockConfig)
-  })
-
-  it('renders children within SanityProvider and AuthBoundary', () => {
-    const {getByText, getByTestId} = render(
-      <SDKProvider sanityConfigs={[mockConfig]} fallback={<div>Fallback</div>}>
-        <div>Test Child</div>
-      </SDKProvider>,
-    )
+    // Should create a single ResourceProvider
+    const providers = getAllByTestId('resource-provider')
+    expect(providers.length).toBe(1)
 
-    // Verify the component hierarchy
-    const sanityProvider = getByTestId('sanity-provider')
-    const authBoundary = getByTestId('auth-boundary')
-    const childElement = getByText('Test Child')
+    // Should create an AuthBoundary inside
+    expect(getByTestId('auth-boundary')).toBeInTheDocument()
 
-    expect(sanityProvider).toBeInTheDocument()
-    expect(authBoundary).toBeInTheDocument()
-    expect(childElement).toBeInTheDocument()
+    // Verify provider has the correct config
+    expect(JSON.parse(providers[0].getAttribute('data-config') || '{}')).toEqual({
+      projectId: 'test-project',
+      dataset: 'production',
+    })
   })
 
-  it('passes the created Sanity instance to SanityProvider', () => {
-    const {getByTestId} = render(
-      <SDKProvider sanityConfigs={[mockConfig]} fallback={<div>Fallback</div>}>
-        <div>Test Child</div>
+  it('renders nested ResourceProviders with AuthBoundary for multiple configs', () => {
+    const configs = [
+      {
+        projectId: 'project-1',
+        dataset: 'production',
+      },
+      {
+        projectId: 'project-2',
+        dataset: 'staging',
+      },
+    ]
+
+    const {getAllByTestId, getByTestId} = render(
+      <SDKProvider config={configs} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
       </SDKProvider>,
     )
 
-    const sanityProvider = getByTestId('sanity-provider')
-    const passedInstances = JSON.parse(sanityProvider.dataset['instances'] || '[]')
+    // Should create two nested ResourceProviders
+    const providers = getAllByTestId('resource-provider')
+    expect(providers.length).toBe(2)
+
+    // Should create an AuthBoundary inside the innermost provider
+    expect(getByTestId('auth-boundary')).toBeInTheDocument()
+
+    // Verify each provider has the correct config - order is based on how SDKProvider creates nestings
+    // The first provider contains config[1]
+    expect(JSON.parse(providers[0].getAttribute('data-config') || '{}')).toEqual({
+      projectId: 'project-2',
+      dataset: 'staging',
+    })
 
-    expect(passedInstances).toEqual([{id: 'mock-instance'}])
+    // The second provider contains config[0]
+    expect(JSON.parse(providers[1].getAttribute('data-config') || '{}')).toEqual({
+      projectId: 'project-1',
+      dataset: 'production',
+    })
   })
 })

package/src/components/SDKProvider.tsx

@@ -1,21 +1,15 @@
-import {createSanityInstance, type SanityConfig} from '@sanity/sdk'
-import {type ReactElement, type ReactNode, Suspense, useMemo} from 'react'
+import {type SanityConfig} from '@sanity/sdk'
+import {type ReactElement, type ReactNode} from 'react'
 
-import {SanityProvider} from '../context/SanityProvider'
-import {AuthBoundary} from './auth/AuthBoundary'
-
-const DEFAULT_FALLBACK = (
-  <>
-    Warning: No fallback provided. Please supply a fallback prop to ensure proper Suspense handling.
-  </>
-)
+import {ResourceProvider} from '../context/ResourceProvider'
+import {AuthBoundary, type AuthBoundaryProps} from './auth/AuthBoundary'
 
 /**
  * @internal
  */
-export interface SDKProviderProps {
+export interface SDKProviderProps extends AuthBoundaryProps {
   children: ReactNode
-  sanityConfigs: SanityConfig[]
+  config: SanityConfig | SanityConfig[]
   fallback: ReactNode
 }
 
@@ -23,20 +17,31 @@ export interface SDKProviderProps {
  * @internal
  *
  * Top-level context provider that provides access to the Sanity SDK.
+ * Creates a hierarchy of ResourceProviders, each providing a SanityInstance that can be
+ * accessed by hooks. The first configuration in the array becomes the default instance.
  */
-export function SDKProvider({children, sanityConfigs, fallback}: SDKProviderProps): ReactElement {
-  const sanityInstances = useMemo(() => {
-    return sanityConfigs.map((sanityConfig: SanityConfig) => createSanityInstance(sanityConfig))
-  }, [sanityConfigs])
+export function SDKProvider({
+  children,
+  config,
+  fallback,
+  ...props
+}: SDKProviderProps): ReactElement {
+  // reverse because we want the first config to be the default, but the
+  // ResourceProvider nesting makes the last one the default
+  const configs = (Array.isArray(config) ? config : [config]).slice().reverse()
+
+  // Create a nested structure of ResourceProviders for each config
+  const createNestedProviders = (index: number): ReactElement => {
+    if (index >= configs.length) {
+      return <AuthBoundary {...props}>{children}</AuthBoundary>
+    }
+
+    return (
+      <ResourceProvider {...configs[index]} fallback={fallback}>
+        {createNestedProviders(index + 1)}
+      </ResourceProvider>
+    )
+  }
 
-  return (
-    <SanityProvider sanityInstances={sanityInstances}>
-      {/* This Suspense boundary is necessary because some hooks may suspend.
-      It ensures that the Sanity instance state created above remains stable
-      before rendering the AuthBoundary and its children. */}
-      <Suspense fallback={fallback ?? DEFAULT_FALLBACK}>
-        <AuthBoundary>{children}</AuthBoundary>
-      </Suspense>
-    </SanityProvider>
-  )
+  return createNestedProviders(0)
 }

package/src/components/SanityApp.test.tsx

@@ -3,9 +3,16 @@ import {render, screen} from '@testing-library/react'
 import {describe, expect, it, vi} from 'vitest'
 
 import {SanityApp} from './SanityApp'
+import {SDKProvider} from './SDKProvider'
 
-vi.mock('@sanity/sdk', async () => {
-  const actual = await vi.importActual('@sanity/sdk')
+// Mock SDKProvider to verify it's being used correctly
+vi.mock('./SDKProvider', () => ({
+  SDKProvider: vi.fn(() => <div data-testid="sdk-provider">SDKProvider</div>),
+}))
+
+// Mock useEffect to prevent redirect logic from running in tests
+vi.mock('react', async () => {
+  const actual = await vi.importActual('react')
   return {
     ...actual,
     createSanityInstance: vi.fn(() => ({
@@ -36,20 +43,104 @@ vi.mock('../hooks/auth/useAuthState', () => ({
 }))
 
 describe('SanityApp', () => {
-  const mockSanityConfig: SanityConfig = {
-    projectId: 'test-project',
-    dataset: 'test-dataset',
-  }
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders SDKProvider with a single config', () => {
+    const singleConfig = {
+      projectId: 'test-project',
+      dataset: 'production',
+    }
+
+    render(
+      <SanityApp config={singleConfig} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SanityApp>,
+    )
+
+    // Check that the SDKProvider is rendered
+    expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
+
+    // Verify SDKProvider was called with the correct props
+    const sdkProviderCalls = vi.mocked(SDKProvider).mock.calls
+    expect(sdkProviderCalls.length).toBe(1)
+
+    const [props] = sdkProviderCalls[0]
+    const {config} = props
+
+    // Config is now passed directly as an object for single configs
+    expect(config).toEqual(singleConfig)
+    expect(props.fallback).toBeTruthy()
+  })
+
+  it('renders SDKProvider with multiple configs in original order', () => {
+    const multipleConfigs = [
+      {
+        projectId: 'project-1',
+        dataset: 'production',
+      },
+      {
+        projectId: 'project-2',
+        dataset: 'staging',
+      },
+      {
+        projectId: 'project-3',
+        dataset: 'development',
+      },
+    ]
+
+    render(
+      <SanityApp config={multipleConfigs} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
+      </SanityApp>,
+    )
+
+    // Check that the SDKProvider is rendered
+    expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
+
+    // Verify SDKProvider was called with the correct props
+    const sdkProviderCalls = vi.mocked(SDKProvider).mock.calls
+    expect(sdkProviderCalls.length).toBe(1)
+
+    const [props] = sdkProviderCalls[0]
+    const {config} = props
+
+    // Config should be passed directly to SDKProvider
+    expect(config).toEqual(multipleConfigs)
+  })
+
+  it('supports legacy sanityConfigs prop', () => {
+    const legacyConfigs = [
+      {
+        projectId: 'legacy-project-1',
+        dataset: 'production',
+      },
+      {
+        projectId: 'legacy-project-2',
+        dataset: 'staging',
+      },
+    ]
 
-  it('renders children correctly', async () => {
-    const testMessage = 'Test Child Component'
     render(
-      <SanityApp sanityConfigs={[mockSanityConfig]} fallback={<div>Fallback</div>}>
-        <div>{testMessage}</div>
+      // @ts-expect-error purposefully using the deprecated prop
+      <SanityApp sanityConfigs={legacyConfigs} fallback={<div>Loading...</div>}>
+        <div>Child Content</div>
       </SanityApp>,
     )
 
-    expect(await screen.findByText(testMessage)).toBeInTheDocument()
+    // Check that the SDKProvider is rendered
+    expect(screen.getByTestId('sdk-provider')).toBeInTheDocument()
+
+    // Verify SDKProvider was called with the correct props
+    const sdkProviderCalls = vi.mocked(SDKProvider).mock.calls
+    expect(sdkProviderCalls.length).toBe(1)
+
+    const [props] = sdkProviderCalls[0]
+    const {config} = props
+
+    // Config should be passed to SDKProvider in the same order
+    expect(config).toEqual(legacyConfigs)
   })
 
   it('handles iframe environment correctly', async () => {
@@ -57,6 +148,11 @@ describe('SanityApp', () => {
     const originalTop = window.top
     const originalSelf = window.self
 
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
+
     const mockTop = {}
     Object.defineProperty(window, 'top', {
       value: mockTop,
@@ -68,7 +164,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp sanityConfigs={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -98,13 +194,18 @@ describe('SanityApp', () => {
       href: 'http://sanity-test.app',
     }
 
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
+
     Object.defineProperty(window, 'location', {
       value: mockLocation,
       writable: true,
     })
 
     render(
-      <SanityApp sanityConfigs={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )
@@ -113,7 +214,7 @@ describe('SanityApp', () => {
     await new Promise((resolve) => setTimeout(resolve, 1010))
 
     // Add assertions based on your iframe-specific behavior
-    expect(mockLocation.replace).toHaveBeenCalledWith('https://core.sanity.io')
+    expect(mockLocation.replace).toHaveBeenCalledWith('https://sanity.io/welcome')
 
     // Clean up the mock
     Object.defineProperty(window, 'location', {
@@ -125,6 +226,11 @@ describe('SanityApp', () => {
   it('does not redirect to core if not inside iframe and local url', async () => {
     const originalLocation = window.location
 
+    const mockSanityConfig: SanityConfig = {
+      projectId: 'test-project',
+      dataset: 'test-dataset',
+    }
+
     const mockLocation = {
       replace: vi.fn(),
       href: 'http://localhost:3000',
@@ -136,7 +242,7 @@ describe('SanityApp', () => {
     })
 
     render(
-      <SanityApp sanityConfigs={[mockSanityConfig]} fallback={<div>Fallback</div>}>
+      <SanityApp config={[mockSanityConfig]} fallback={<div>Fallback</div>}>
         <div>Test Child</div>
       </SanityApp>,
     )

package/src/components/SanityApp.tsx

@@ -8,12 +8,14 @@ import {isInIframe, isLocalUrl} from './utils'
  * @public
  */
 export interface SanityAppProps {
-  sanityConfigs: SanityConfig[]
+  config: SanityConfig | SanityConfig[]
+  /** @deprecated use the `config` prop instead. */
+  sanityConfigs?: SanityConfig[]
   children: React.ReactNode
   fallback: React.ReactNode
 }
 
-const CORE_URL = 'https://core.sanity.io'
+const REDIRECT_URL = 'https://sanity.io/welcome'
 
 /**
  * @public
@@ -22,6 +24,9 @@ const CORE_URL = 'https://core.sanity.io'
  * as well as application context and state which is used by the Sanity React hooks. Your application
  * must be wrapped with the SanityApp component to function properly.
  *
+ * SanityApp creates a hierarchy of ResourceProviders, each providing a SanityInstance that can be
+ * accessed by hooks. The first configuration in the array becomes the default instance.
+ *
  * @param props - Your Sanity configuration and the React children to render
  * @returns Your Sanity application, integrated with your Sanity configuration and application context
  *
@@ -32,16 +37,14 @@ const CORE_URL = 'https://core.sanity.io'
  * import MyAppRoot from './Root'
  *
  * // Single project configuration
- * const mySanityConfigs = [
- *   {
- *     projectId: 'my-project-id',
- *     dataset: 'production',
- *   },
- * ]
+ * const mySanityConfig = {
+ *   projectId: 'my-project-id',
+ *   dataset: 'production',
+ * }
  *
  * // Or multiple project configurations
  * const multipleConfigs = [
- *   // Configuration for your main project. This will be used as the default project for all hooks if no resource ID override is provided.
+ *   // Configuration for your main project. This will be used as the default project for hooks.
  *   {
  *     projectId: 'marketing-website-project',
  *     dataset: 'production',
@@ -60,14 +63,22 @@ const CORE_URL = 'https://core.sanity.io'
  *
  * export default function MyApp() {
  *   return (
- *     <SanityApp sanityConfigs={mySanityConfigs}>
+ *     <SanityApp config={mySanityConfig} fallback={<LoadingSpinner />}>
  *       <MyAppRoot />
  *     </SanityApp>
  *   )
  * }
  * ```
  */
-export function SanityApp({sanityConfigs, children, fallback}: SanityAppProps): ReactElement {
+export function SanityApp({
+  children,
+  fallback,
+  config,
+  sanityConfigs,
+  ...props
+}: SanityAppProps): ReactElement {
+  const configs = config ?? sanityConfigs ?? []
+
   useEffect(() => {
     let timeout: NodeJS.Timeout | undefined
 
@@ -75,15 +86,15 @@ export function SanityApp({sanityConfigs, children, fallback}: SanityAppProps):
       // If the app is not running in an iframe and is not a local url, redirect to core.
       timeout = setTimeout(() => {
         // eslint-disable-next-line no-console
-        console.warn('Redirecting to core', CORE_URL)
-        window.location.replace(CORE_URL)
+        console.warn('Redirecting to core', REDIRECT_URL)
+        window.location.replace(REDIRECT_URL)
       }, 1000)
     }
     return () => clearTimeout(timeout)
-  }, [sanityConfigs])
+  }, [])
 
   return (
-    <SDKProvider sanityConfigs={sanityConfigs} fallback={fallback}>
+    <SDKProvider {...props} fallback={fallback} config={configs}>
       {children}
     </SDKProvider>
   )