@sanity/sdk-react 0.0.0-alpha.18 → 0.0.0-alpha.2

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`

package/src/vite-env.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vite/types/importMeta.d.ts" />
-
-interface ImportMetaEnv {
-  DEV: boolean
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
-}