@sanity/sdk-react 0.0.0-alpha.20 → 0.0.0-alpha.4

package/src/hooks/projects/useProjects.ts

@@ -1,41 +0,0 @@
-import {type SanityProject} from '@sanity/client'
-import {getProjectsState, resolveProjects, type SanityInstance, type StateSource} from '@sanity/sdk'
-
-import {createStateSourceHook} from '../helpers/createStateSourceHook'
-
-/**
- * @public
- * @category Types
- */
-export type ProjectWithoutMembers = Omit<SanityProject, 'members'>
-
-type UseProjects = {
-  /**
-   *
-   * Returns metadata for each project in your organization.
-   *
-   * @category Projects
-   * @returns An array of metadata (minus the projects’ members) for each project in your organization
-   * @example
-   * ```tsx
-   * const projects = useProjects()
-   *
-   * return (
-   *   <select>
-   *     {projects.map((project) => (
-   *       <option key={project.id}>{project.displayName}</option>
-   *     ))}
-   *   </select>
-   * )
-   * ```
-   */
-  (): ProjectWithoutMembers[]
-}
-
-/** @public */
-export const useProjects: UseProjects = createStateSourceHook({
-  // remove `undefined` since we're suspending when that is the case
-  getState: getProjectsState as (instance: SanityInstance) => StateSource<ProjectWithoutMembers[]>,
-  shouldSuspend: (instance) => getProjectsState(instance).getCurrent() === undefined,
-  suspender: resolveProjects,
-})

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

@@ -1,188 +0,0 @@
-import {getQueryState, resolveQuery, type StateSource} from '@sanity/sdk'
-import {act, render, screen} from '@testing-library/react'
-import {Suspense, useState} from 'react'
-import {type Observable, Subject} from 'rxjs'
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {useQuery} from './useQuery'
-
-// Mock the functions from '@sanity/sdk'
-vi.mock('@sanity/sdk', async (importOriginal) => {
-  const original = await importOriginal<typeof import('@sanity/sdk')>()
-  return {
-    ...original,
-    getQueryState: vi.fn(),
-    resolveQuery: vi.fn(),
-  }
-})
-
-// Mock the Sanity instance hook to return a dummy instance
-vi.mock('../context/useSanityInstance', () => ({
-  useSanityInstance: vi.fn().mockReturnValue({}),
-}))
-
-describe('useQuery', () => {
-  beforeEach(() => {
-    vi.resetAllMocks()
-  })
-
-  it('should render data immediately when available', () => {
-    const getCurrent = vi.fn().mockReturnValue('test data')
-    vi.mocked(getQueryState).mockReturnValue({
-      getCurrent,
-      subscribe: vi.fn(),
-      get observable(): Observable<unknown> {
-        throw new Error('Not implemented')
-      },
-    } as StateSource<unknown>)
-
-    function TestComponent() {
-      const {data, isPending} = useQuery<string>('test query')
-      return (
-        <div data-testid="output">
-          {data} - {isPending ? 'pending' : 'not pending'}
-        </div>
-      )
-    }
-
-    render(<TestComponent />)
-
-    // Verify that the output contains the data and that isPending is false
-    expect(screen.getByTestId('output').textContent).toContain('test data')
-    expect(screen.getByTestId('output').textContent).toContain('not pending')
-  })
-
-  it('should suspend rendering until data is resolved via Suspense', async () => {
-    const ref = {current: undefined as string | undefined}
-    const getCurrent = vi.fn(() => ref.current)
-    const storeChanged$ = new Subject<void>()
-
-    vi.mocked(getQueryState).mockReturnValue({
-      getCurrent,
-      subscribe: vi.fn((cb) => {
-        const subscription = storeChanged$.subscribe(cb)
-        return () => subscription.unsubscribe()
-      }),
-      get observable(): Observable<unknown> {
-        throw new Error('Not implemented')
-      },
-    } as StateSource<unknown>)
-
-    // Create a controllable promise to simulate the query resolution
-    let resolvePromise: () => void
-    // Mock resolveQuery to return our fake promise
-    vi.mocked(resolveQuery).mockReturnValue(
-      new Promise<void>((resolve) => {
-        resolvePromise = () => {
-          ref.current = 'resolved data'
-          storeChanged$.next()
-          resolve()
-        }
-      }),
-    )
-
-    function TestComponent() {
-      const {data} = useQuery<string>('test query')
-      return <div data-testid="output">{data}</div>
-    }
-
-    render(
-      <Suspense fallback={<div data-testid="fallback">Loading...</div>}>
-        <TestComponent />
-      </Suspense>,
-    )
-
-    // Initially, since storeValue is undefined, the component should suspend and fallback is shown
-    expect(screen.getByTestId('fallback')).toBeInTheDocument()
-
-    // Now simulate that data becomes available
-    await act(async () => {
-      resolvePromise()
-    })
-
-    expect(screen.getByTestId('output').textContent).toContain('resolved data')
-  })
-
-  it('should display transition pending state during query change', async () => {
-    const ref = {current: undefined as string | undefined}
-    const getCurrent = vi.fn(() => ref.current)
-    const storeChanged$ = new Subject<void>()
-
-    vi.mocked(getQueryState).mockImplementation((_instance, query) => {
-      if (query === 'query1') {
-        return {
-          getCurrent: vi.fn().mockReturnValue('data1'),
-          subscribe: vi.fn(),
-          get observable(): Observable<unknown> {
-            throw new Error('Not implemented')
-          },
-        }
-      }
-
-      return {
-        getCurrent,
-        subscribe: vi.fn((cb) => {
-          const subscription = storeChanged$.subscribe(cb)
-          return () => subscription.unsubscribe()
-        }),
-        get observable(): Observable<unknown> {
-          throw new Error('Not implemented')
-        },
-      }
-    })
-
-    // Create a controllable promise to simulate the query resolution
-    let resolvePromise: () => void
-    // Mock resolveQuery to return our fake promise
-    vi.mocked(resolveQuery).mockReturnValue(
-      new Promise<void>((resolve) => {
-        resolvePromise = () => {
-          ref.current = 'data2'
-          storeChanged$.next()
-          resolve()
-        }
-      }),
-    )
-
-    function WrapperComponent() {
-      const [query, setQuery] = useState('query1')
-      const {data, isPending} = useQuery<string>(query)
-      return (
-        <div>
-          <div data-testid="output">
-            {data} - {isPending ? 'pending' : 'not pending'}
-          </div>
-          <button data-testid="button" onClick={() => setQuery('query2')}>
-            Change Query
-          </button>
-        </div>
-      )
-    }
-
-    render(<WrapperComponent />)
-
-    // Initially, should show data1 and not pending
-    expect(screen.getByTestId('output').textContent).toContain('data1')
-    expect(screen.getByTestId('output').textContent).toContain('not pending')
-
-    // Trigger query change to "query2"
-    act(() => {
-      screen.getByTestId('button').click()
-    })
-
-    // Immediately after clicking, deferredQueryKey is still for query1,
-    // so the hook returns data from the previous query ('data1') but isPending should now be true.
-    expect(screen.getByTestId('output').textContent).toContain('data1')
-    expect(screen.getByTestId('output').textContent).toContain('pending')
-
-    // Simulate the completion of the transition.
-    await act(async () => {
-      // Update the global variable so that getCurrent now returns data2 for the new query.
-      resolvePromise()
-    })
-
-    // Now, the component should render with the new deferred query and display new data.
-    expect(screen.getByTestId('output').textContent).toContain('data2')
-    expect(screen.getByTestId('output').textContent).toContain('not pending')
-  })
-})

package/src/hooks/query/useQuery.ts

@@ -1,103 +0,0 @@
-import {
-  getQueryKey,
-  getQueryState,
-  parseQueryKey,
-  type QueryOptions,
-  resolveQuery,
-} from '@sanity/sdk'
-import {useEffect, useMemo, useState, useSyncExternalStore, useTransition} from 'react'
-
-import {useSanityInstance} from '../context/useSanityInstance'
-
-/**
- * Executes GROQ queries against a Sanity dataset.
- *
- * This hook provides a convenient way to fetch and subscribe to real-time updates
- * for your Sanity content. Changes made to the dataset’s content will trigger
- * automatic updates.
- *
- * @remarks
- * The returned `isPending` flag indicates when a React transition is in progress,
- * which can be used to show loading states for query changes.
- *
- * @beta
- * @category GROQ
- * @param query - GROQ query string to execute
- * @param options - Optional configuration for the query
- * @returns Object containing the query result and a pending state flag
- *
- * @example Basic usage
- * ```tsx
- * const {data, isPending} = useQuery<Movie[]>('*[_type == "movie"]')
- * ```
- *
- * @example Using parameters
- * ```tsx
- * // With parameters
- * const {data} = useQuery<Movie>('*[_type == "movie" && _id == $id][0]', {
- *   params: { id: 'movie-123' }
- * })
- * ```
- *
- * @example With a loading state for transitions
- * ```tsx
- * const {data, isPending} = useQuery<Movie[]>('*[_type == "movie"]')
- * return (
- *   <div>
- *     {isPending && <div>Updating...</div>}
- *     <ul>
- *       {data.map(movie => <li key={movie._id}>{movie.title}</li>)}
- *     </ul>
- *   </div>
- * )
- * ```
- *
- */
-export function useQuery<T>(query: string, options?: QueryOptions): {data: T; isPending: boolean} {
-  const instance = useSanityInstance(options?.resourceId)
-  // Use React's useTransition to avoid UI jank when queries change
-  const [isPending, startTransition] = useTransition()
-
-  // Get the unique key for this query and its options
-  const queryKey = getQueryKey(query, options)
-  // Use a deferred state to avoid immediate re-renders when the query changes
-  const [deferredQueryKey, setDeferredQueryKey] = useState(queryKey)
-  // Parse the deferred query key back into a query and options
-  const deferred = useMemo(() => parseQueryKey(deferredQueryKey), [deferredQueryKey])
-
-  // Create an AbortController to cancel in-flight requests when needed
-  const [ref, setRef] = useState<AbortController>(new AbortController())
-
-  // When the query or options change, start a transition to update the query
-  useEffect(() => {
-    if (queryKey === deferredQueryKey) return
-
-    startTransition(() => {
-      // Abort any in-flight requests for the previous query
-      if (ref && !ref.signal.aborted) {
-        ref.abort()
-        setRef(new AbortController())
-      }
-
-      setDeferredQueryKey(queryKey)
-    })
-  }, [deferredQueryKey, queryKey, ref])
-
-  // Get the state source for this query from the query store
-  const {getCurrent, subscribe} = useMemo(
-    () => getQueryState(instance, deferred.query, deferred.options),
-    [instance, deferred],
-  )
-
-  // If data isn't available yet, suspend rendering until it is
-  // This is the React Suspense integration - throwing a promise
-  // will cause React to show the nearest Suspense fallback
-  if (getCurrent() === undefined) {
-    throw resolveQuery(instance, deferred.query, {...deferred.options, signal: ref.signal})
-  }
-
-  // Subscribe to updates and get the current data
-  // useSyncExternalStore ensures the component re-renders when the data changes
-  const data = useSyncExternalStore(subscribe, getCurrent) as T
-  return {data, isPending}
-}

package/src/hooks/users/useUsers.test.ts

@@ -1,163 +0,0 @@
-import {createUsersStore, type ResourceType, type SanityUser} from '@sanity/sdk'
-import {act, renderHook} from '@testing-library/react'
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {useSanityInstance} from '../context/useSanityInstance'
-import {useUsers} from './useUsers'
-
-vi.mock('@sanity/sdk')
-vi.mock('../context/useSanityInstance')
-
-describe('useUsers', () => {
-  const mockInstance = {}
-  const mockUser: SanityUser = {
-    profile: {
-      id: 'user1',
-      displayName: 'Test User',
-      email: 'test@test.com',
-      provider: 'test',
-      createdAt: '2021-01-01',
-    },
-    sanityUserId: 'user1',
-    memberships: [],
-  }
-
-  const getCurrent = vi.fn().mockReturnValue({
-    users: [],
-    totalCount: 0,
-    nextCursor: null,
-    hasMore: false,
-    initialFetchCompleted: false,
-    options: {
-      resourceType: '' as ResourceType,
-      resourceId: '',
-      limit: 100,
-    },
-  })
-  const unsubscribe = vi.fn()
-  const subscribe = vi.fn().mockReturnValue(unsubscribe)
-  const dispose = vi.fn()
-
-  const mockUsersStore: ReturnType<typeof createUsersStore> = {
-    setOptions: vi.fn(),
-    loadMore: vi.fn(),
-    resolveUsers: vi.fn(),
-    getState: vi.fn().mockReturnValue({getCurrent, subscribe}),
-    dispose,
-  }
-
-  beforeEach(() => {
-    vi.mocked(useSanityInstance).mockReturnValue(
-      mockInstance as unknown as ReturnType<typeof useSanityInstance>,
-    )
-    vi.mocked(createUsersStore).mockReturnValue(
-      mockUsersStore as unknown as ReturnType<typeof createUsersStore>,
-    )
-  })
-
-  afterEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should initialize with given params', () => {
-    renderHook(() =>
-      useUsers({
-        resourceType: 'project',
-        resourceId: 'proj1',
-      }),
-    )
-
-    expect(createUsersStore).toHaveBeenCalledWith(mockInstance)
-    expect(mockUsersStore.setOptions).toHaveBeenCalledWith({
-      resourceType: 'project',
-      resourceId: 'proj1',
-    })
-  })
-
-  it('should subscribe to users store changes', () => {
-    renderHook(() =>
-      useUsers({
-        resourceType: 'organization',
-        resourceId: 'org1',
-      }),
-    )
-    expect(subscribe).toHaveBeenCalledTimes(1)
-  })
-
-  it('should return current users state', () => {
-    const mockState = {users: [mockUser], hasMore: true}
-    getCurrent.mockReturnValue(mockState)
-
-    const {result} = renderHook(() =>
-      useUsers({
-        resourceType: 'project',
-        resourceId: 'proj1',
-      }),
-    )
-    expect(result.current).toMatchObject(mockState)
-  })
-
-  it('should call loadMore when loadMore is invoked', () => {
-    const {result} = renderHook(() =>
-      useUsers({
-        resourceType: 'project',
-        resourceId: 'proj1',
-      }),
-    )
-
-    act(() => {
-      result.current.loadMore()
-    })
-
-    expect(mockUsersStore.loadMore).toHaveBeenCalled()
-  })
-
-  it('should update options when params change', () => {
-    const initialParams = {resourceType: 'project' as ResourceType, resourceId: 'proj1'}
-    const {rerender} = renderHook(({params}) => useUsers(params), {
-      initialProps: {params: initialParams},
-    })
-
-    const newParams = {resourceType: 'organization' as ResourceType, resourceId: 'org1'}
-    rerender({params: newParams})
-
-    expect(mockUsersStore.setOptions).toHaveBeenCalledWith(newParams)
-  })
-
-  it('should resolve users if initial fetch not completed', () => {
-    getCurrent.mockReturnValue({initialFetchCompleted: false})
-
-    renderHook(() =>
-      useUsers({
-        resourceType: 'project',
-        resourceId: 'proj1',
-      }),
-    )
-    expect(mockUsersStore.resolveUsers).toHaveBeenCalled()
-  })
-
-  it('should not resolve users if initial fetch already completed', () => {
-    getCurrent.mockReturnValue({initialFetchCompleted: true})
-
-    renderHook(() =>
-      useUsers({
-        resourceType: 'project',
-        resourceId: 'proj1',
-      }),
-    )
-    expect(mockUsersStore.resolveUsers).not.toHaveBeenCalled()
-  })
-
-  it('should clean up store on unmount', () => {
-    const {unmount} = renderHook(() =>
-      useUsers({
-        resourceType: 'project',
-        resourceId: 'proj1',
-      }),
-    )
-
-    unmount()
-    expect(mockUsersStore.dispose).toHaveBeenCalled()
-    expect(unsubscribe).toHaveBeenCalled()
-  })
-})

package/src/hooks/users/useUsers.ts

@@ -1,107 +0,0 @@
-import {createUsersStore, type ResourceType, type SanityUser} from '@sanity/sdk'
-import {useCallback, useEffect, useState, useSyncExternalStore} from 'react'
-
-import {useSanityInstance} from '../context/useSanityInstance'
-
-/**
- * @public
- * @category Types
- */
-export interface UseUsersParams {
-  /**
-   * The type of resource to fetch users for.
-   */
-  resourceType: ResourceType
-  /**
-   * The ID of the resource to fetch users for.
-   */
-  resourceId: string
-  /**
-   * The limit of users to fetch.
-   */
-  limit?: number
-}
-
-/**
- * @public
- * @category Types
- */
-export interface UseUsersResult {
-  /**
-   * The users fetched.
-   */
-  users: SanityUser[]
-  /**
-   * Whether there are more users to fetch.
-   */
-  hasMore: boolean
-  /**
-   * Load more users.
-   */
-  loadMore: () => void
-}
-
-/**
- *
- * @public
- *
- * Retrieves the users for a given resource (either a project or an organization).
- *
- * @category Users
- * @param params - The resource type and its ID, and the limit of users to fetch
- * @returns A list of users, a boolean indicating whether there are more users to fetch, and a function to load more users
- *
- * @example
- * ```
- * const { users, hasMore, loadMore } = useUsers({
- *   resourceType: 'organization',
- *   resourceId: 'my-org-id',
- *   limit: 10,
- * })
- *
- * return (
- *   <div>
- *     {users.map(user => (
- *       <figure key={user.sanityUserId}>
- *         <img src={user.profile.imageUrl} alt='' />
- *         <figcaption>{user.profile.displayName}</figcaption>
- *         <address>{user.profile.email}</address>
- *       </figure>
- *     ))}
- *     {hasMore && <button onClick={loadMore}>Load More</button>}
- *   </div>
- * )
- * ```
- */
-export function useUsers(params: UseUsersParams): UseUsersResult {
-  const instance = useSanityInstance(params.resourceId)
-  const [store] = useState(() => createUsersStore(instance))
-
-  useEffect(() => {
-    store.setOptions({
-      resourceType: params.resourceType,
-      resourceId: params.resourceId,
-    })
-  }, [params.resourceType, params.resourceId, store])
-
-  const subscribe = useCallback(
-    (onStoreChanged: () => void) => {
-      if (store.getState().getCurrent().initialFetchCompleted === false) {
-        store.resolveUsers()
-      }
-      const unsubscribe = store.getState().subscribe(onStoreChanged)
-
-      return () => {
-        unsubscribe()
-        store.dispose()
-      }
-    },
-    [store],
-  )
-
-  const getSnapshot = useCallback(() => store.getState().getCurrent(), [store])
-
-  const {users, hasMore} = useSyncExternalStore(subscribe, getSnapshot) || {}
-
-  return {users, hasMore, loadMore: store.loadMore}
-}

package/src/utils/getEnv.ts

@@ -1,21 +0,0 @@
-// Local type declaration for Remix
-type WindowWithEnv = Window &
-  typeof globalThis & {
-    ENV?: Record<string, unknown>
-  }
-
-type KnownEnvVar = 'DEV' | 'PKG_VERSION'
-
-export function getEnv(key: KnownEnvVar): unknown {
-  if (typeof import.meta !== 'undefined' && import.meta.env) {
-    // Vite environment variables
-    return (import.meta.env as unknown as Record<string, unknown>)[key]
-  } else if (typeof process !== 'undefined' && process.env) {
-    // Node.js or server-side environment variables
-    return process.env[key]
-  } else if (typeof window !== 'undefined' && (window as WindowWithEnv).ENV) {
-    // Remix-style client-side environment variables
-    return (window as WindowWithEnv).ENV?.[key]
-  }
-  return undefined
-}

package/src/version.ts

@@ -1,8 +0,0 @@
-import {version} from '../package.json'
-import {getEnv} from './utils/getEnv'
-
-/**
- * This version is provided by pkg-utils at build time
- * @internal
- */
-export const REACT_SDK_VERSION = getEnv('PKG_VERSION') || `${version}-development`