@sanity/sdk-react 0.0.0-rc.0 → 0.0.0-rc.2

package/src/hooks/document/useEditDocument.test.ts

@@ -12,7 +12,7 @@ import {renderHook} from '@testing-library/react'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {useSanityInstance} from '../context/useSanityInstance'
-import {useApplyActions} from './useApplyActions'
+import {useApplyDocumentActions} from './useApplyDocumentActions'
 import {useEditDocument} from './useEditDocument'
 
 vi.mock('@sanity/sdk', async (importOriginal) => {
@@ -29,8 +29,8 @@ vi.mock('../context/useSanityInstance', () => ({
   useSanityInstance: vi.fn(),
 }))
 
-vi.mock('./useApplyActions', () => ({
-  useApplyActions: vi.fn(),
+vi.mock('./useApplyDocumentActions', () => ({
+  useApplyDocumentActions: vi.fn(),
 }))
 
 // Create a fake instance to be returned by useSanityInstance.
@@ -66,7 +66,7 @@ describe('useEditDocument hook', () => {
     } as unknown as StateSource<SanityDocument>)
 
     const apply = vi.fn().mockResolvedValue({transactionId: 'tx1'})
-    vi.mocked(useApplyActions).mockReturnValue(apply)
+    vi.mocked(useApplyDocumentActions).mockReturnValue(apply)
 
     const {result} = renderHook(() => useEditDocument(docHandle, 'foo'))
     const promise = result.current('newValue')
@@ -87,7 +87,7 @@ describe('useEditDocument hook', () => {
     } as unknown as StateSource<SanityDocument>)
 
     const apply = vi.fn().mockResolvedValue({transactionId: 'tx2'})
-    vi.mocked(useApplyActions).mockReturnValue(apply)
+    vi.mocked(useApplyDocumentActions).mockReturnValue(apply)
 
     const {result} = renderHook(() => useEditDocument(docHandle))
     const promise = result.current({...doc, foo: 'baz', extra: 'old', _id: 'doc1'})
@@ -105,7 +105,7 @@ describe('useEditDocument hook', () => {
     } as unknown as StateSource<SanityDocument>)
 
     const apply = vi.fn().mockResolvedValue({transactionId: 'tx3'})
-    vi.mocked(useApplyActions).mockReturnValue(apply)
+    vi.mocked(useApplyDocumentActions).mockReturnValue(apply)
 
     const {result} = renderHook(() => useEditDocument(docHandle, 'foo'))
     const promise = result.current((prev: unknown) => `${prev}Updated`) // 'bar' becomes 'barUpdated'
@@ -125,7 +125,7 @@ describe('useEditDocument hook', () => {
     } as unknown as StateSource<SanityDocument>)
 
     const apply = vi.fn().mockResolvedValue({transactionId: 'tx4'})
-    vi.mocked(useApplyActions).mockReturnValue(apply)
+    vi.mocked(useApplyDocumentActions).mockReturnValue(apply)
 
     const {result} = renderHook(() => useEditDocument(docHandle))
     const promise = result.current((prevDoc) => ({...prevDoc, foo: 'baz'}))
@@ -143,7 +143,7 @@ describe('useEditDocument hook', () => {
     } as unknown as StateSource<SanityDocument>)
 
     const fakeApply = vi.fn()
-    vi.mocked(useApplyActions).mockReturnValue(fakeApply)
+    vi.mocked(useApplyDocumentActions).mockReturnValue(fakeApply)
 
     const {result} = renderHook(() => useEditDocument(docHandle))
     expect(() => result.current('notAnObject' as unknown as SanityDocument)).toThrowError(

package/src/hooks/document/useEditDocument.ts

@@ -12,7 +12,7 @@ import {type SanityDocument} from '@sanity/types'
 import {useCallback} from 'react'
 
 import {useSanityInstance} from '../context/useSanityInstance'
-import {useApplyActions} from './useApplyActions'
+import {useApplyDocumentActions} from './useApplyDocumentActions'
 
 const ignoredKeys = ['_id', '_type', '_createdAt', '_updatedAt', '_rev']
 
@@ -154,7 +154,7 @@ export function useEditDocument(
   const resourceId = getResourceId(doc.resourceId)!
   const documentId = doc._id
   const instance = useSanityInstance(resourceId)
-  const apply = useApplyActions(resourceId)
+  const apply = useApplyDocumentActions(resourceId)
   const isDocumentReady = useCallback(
     () => getDocumentState(instance, documentId).getCurrent() !== undefined,
     [instance, documentId],

package/src/hooks/{infiniteList/useInfiniteList.test.tsx → documents/useDocuments.test.tsx}

@@ -3,11 +3,11 @@ import {describe, vi} from 'vitest'
 
 import {evaluateSync, parse} from '../_synchronous-groq-js.mjs'
 import {useQuery} from '../query/useQuery'
-import {useInfiniteList} from './useInfiniteList'
+import {useDocuments} from './useDocuments'
 
 vi.mock('../query/useQuery')
 
-describe('useInfiniteList', () => {
+describe('useDocuments', () => {
   beforeEach(() => {
     const dataset = [
       {
@@ -76,13 +76,13 @@ describe('useInfiniteList', () => {
 
   it('should respect custom page size', () => {
     const customBatchSize = 2
-    const {result} = renderHook(() => useInfiniteList({batchSize: customBatchSize}))
+    const {result} = renderHook(() => useDocuments({batchSize: customBatchSize}))
 
     expect(result.current.data.length).toBe(customBatchSize)
   })
 
   it('should filter by document type', () => {
-    const {result} = renderHook(() => useInfiniteList({filter: '_type == "movie"'}))
+    const {result} = renderHook(() => useDocuments({filter: '_type == "movie"'}))
 
     expect(result.current.data.every((doc) => doc._type === 'movie')).toBe(true)
     expect(result.current.count).toBe(5) // 5 movies in the dataset
@@ -90,7 +90,7 @@ describe('useInfiniteList', () => {
 
   // groq-js doesn't support search filters yet
   it.skip('should apply search filter', () => {
-    const {result} = renderHook(() => useInfiniteList({search: 'inter'}))
+    const {result} = renderHook(() => useDocuments({search: 'inter'}))
 
     // Should match "Interstellar"
     expect(result.current.data.some((doc) => doc._id === 'movie3')).toBe(true)
@@ -98,7 +98,7 @@ describe('useInfiniteList', () => {
 
   it('should apply ordering', () => {
     const {result} = renderHook(() =>
-      useInfiniteList({
+      useDocuments({
         filter: '_type == "movie"',
         orderings: [{field: 'releaseYear', direction: 'desc'}],
       }),
@@ -110,7 +110,7 @@ describe('useInfiniteList', () => {
 
   it('should load more data when loadMore is called', () => {
     const batchSize = 2
-    const {result} = renderHook(() => useInfiniteList({batchSize: batchSize}))
+    const {result} = renderHook(() => useDocuments({batchSize: batchSize}))
 
     expect(result.current.data.length).toBe(batchSize)
 
@@ -122,7 +122,7 @@ describe('useInfiniteList', () => {
   })
 
   it('should indicate when there is more data to load', () => {
-    const {result} = renderHook(() => useInfiniteList({batchSize: 3}))
+    const {result} = renderHook(() => useDocuments({batchSize: 3}))
     expect(result.current.hasMore).toBe(true)
     // Load all remaining data
     act(() => {
@@ -133,7 +133,7 @@ describe('useInfiniteList', () => {
 
   // New test case for resetting limit when filter changes
   it('should reset limit when filter changes', () => {
-    const {result, rerender} = renderHook((props) => useInfiniteList(props), {
+    const {result, rerender} = renderHook((props) => useDocuments(props), {
       initialProps: {batchSize: 2, filter: ''},
     })
     // Initially, data length equals pageSize (2)

package/src/hooks/{infiniteList/useInfiniteList.ts → documents/useDocuments.ts}

@@ -11,18 +11,18 @@ const DEFAULT_PERSPECTIVE = 'drafts'
  * Result structure returned from the infinite list query
  * @internal
  */
-interface InfiniteListQueryResult {
+interface UseDocumentsQueryResult {
   count: number
   data: DocumentHandle[]
 }
 
 /**
- * Configuration options for the useInfiniteList hook
+ * Configuration options for the useDocuments hook
  *
  * @beta
  * @category Types
  */
-export interface InfiniteListOptions extends QueryOptions {
+export interface DocumentsOptions extends QueryOptions {
   /**
    * GROQ filter expression to apply to the query
    */
@@ -42,12 +42,12 @@ export interface InfiniteListOptions extends QueryOptions {
 }
 
 /**
- * Return value from the useInfiniteList hook
+ * Return value from the useDocuments hook
  *
  * @beta
  * @category Types
  */
-export interface InfiniteList {
+export interface DocumentsResponse {
   /**
    * Array of document handles for the current batch
    */
@@ -78,10 +78,10 @@ export interface InfiniteList {
  * @beta
  * @category Documents
  * @param options - Configuration options for the infinite list
- * @returns An object containing the list of document handles, the loading state, the total count of retrived document handles, and a function to load more
+ * @returns An object containing the list of document handles, the loading state, the total count of retrieved document handles, and a function to load more
  * @example
  * ```tsx
- * const {data, hasMore, isPending, loadMore} = useInfiniteList({
+ * const {data, hasMore, isPending, loadMore} = useDocuments({
  *   filter: '_type == "post"',
  *   search: searchTerm,
  *   batchSize: 10,
@@ -104,14 +104,14 @@ export interface InfiniteList {
  * ```
  *
  */
-export function useInfiniteList({
+export function useDocuments({
   batchSize = DEFAULT_BATCH_SIZE,
   params,
   search,
   filter,
   orderings,
   ...options
-}: InfiniteListOptions): InfiniteList {
+}: DocumentsOptions): DocumentsResponse {
   const perspective = options.perspective ?? DEFAULT_PERSPECTIVE
   const [limit, setLimit] = useState(batchSize)
 
@@ -155,7 +155,7 @@ export function useInfiniteList({
   const {
     data: {count, data},
     isPending,
-  } = useQuery<InfiniteListQueryResult>(`{"count":${countQuery},"data":${dataQuery}}`, {
+  } = useQuery<UseDocumentsQueryResult>(`{"count":${countQuery},"data":${dataQuery}}`, {
     ...options,
     params,
     perspective,

package/src/hooks/{paginatedList/usePaginatedList.test.tsx → paginatedDocuments/usePaginatedDocuments.test.tsx}

@@ -3,11 +3,11 @@ import {describe, vi} from 'vitest'
 
 import {evaluateSync, parse} from '../_synchronous-groq-js.mjs'
 import {useQuery} from '../query/useQuery'
-import {usePaginatedList} from './usePaginatedList'
+import {usePaginatedDocuments} from './usePaginatedDocuments'
 
 vi.mock('../query/useQuery')
 
-describe('usePaginatedList', () => {
+describe('usePaginatedDocuments', () => {
   beforeEach(() => {
     const dataset = [
       {
@@ -76,14 +76,14 @@ describe('usePaginatedList', () => {
 
   it('should respect custom page size', () => {
     const customPageSize = 2
-    const {result} = renderHook(() => usePaginatedList({pageSize: customPageSize}))
+    const {result} = renderHook(() => usePaginatedDocuments({pageSize: customPageSize}))
 
     expect(result.current.pageSize).toBe(customPageSize)
     expect(result.current.data.length).toBeLessThanOrEqual(customPageSize)
   })
 
   it('should filter by document type', () => {
-    const {result} = renderHook(() => usePaginatedList({filter: '_type == "movie"'}))
+    const {result} = renderHook(() => usePaginatedDocuments({filter: '_type == "movie"'}))
 
     expect(result.current.data.every((doc) => doc._type === 'movie')).toBe(true)
     expect(result.current.count).toBe(5) // 5 movies in the dataset
@@ -91,7 +91,7 @@ describe('usePaginatedList', () => {
 
   // groq-js doesn't support search filters yet
   it.skip('should apply search filter', () => {
-    const {result} = renderHook(() => usePaginatedList({search: 'inter'}))
+    const {result} = renderHook(() => usePaginatedDocuments({search: 'inter'}))
 
     // Should match "Interstellar"
     expect(result.current.data.some((doc) => doc._id === 'movie3')).toBe(true)
@@ -99,7 +99,7 @@ describe('usePaginatedList', () => {
 
   it('should apply ordering', () => {
     const {result} = renderHook(() =>
-      usePaginatedList({
+      usePaginatedDocuments({
         filter: '_type == "movie"',
         orderings: [{field: 'releaseYear', direction: 'desc'}],
       }),
@@ -111,7 +111,7 @@ describe('usePaginatedList', () => {
 
   it('should calculate pagination values correctly', () => {
     const pageSize = 2
-    const {result} = renderHook(() => usePaginatedList({pageSize}))
+    const {result} = renderHook(() => usePaginatedDocuments({pageSize}))
 
     expect(result.current.currentPage).toBe(1)
     expect(result.current.totalPages).toBe(3) // 6 items with page size 2
@@ -122,7 +122,7 @@ describe('usePaginatedList', () => {
 
   it('should navigate to next page', () => {
     const pageSize = 2
-    const {result} = renderHook(() => usePaginatedList({pageSize}))
+    const {result} = renderHook(() => usePaginatedDocuments({pageSize}))
 
     expect(result.current.currentPage).toBe(1)
     expect(result.current.data.length).toBe(pageSize)
@@ -138,7 +138,7 @@ describe('usePaginatedList', () => {
 
   it('should navigate to previous page', () => {
     const pageSize = 2
-    const {result} = renderHook(() => usePaginatedList({pageSize}))
+    const {result} = renderHook(() => usePaginatedDocuments({pageSize}))
 
     // Go to page 2 first
     act(() => {
@@ -158,7 +158,7 @@ describe('usePaginatedList', () => {
 
   it('should navigate to first page', () => {
     const pageSize = 2
-    const {result} = renderHook(() => usePaginatedList({pageSize}))
+    const {result} = renderHook(() => usePaginatedDocuments({pageSize}))
 
     // Go to last page first
     act(() => {
@@ -178,7 +178,7 @@ describe('usePaginatedList', () => {
 
   it('should navigate to last page', () => {
     const pageSize = 2
-    const {result} = renderHook(() => usePaginatedList({pageSize}))
+    const {result} = renderHook(() => usePaginatedDocuments({pageSize}))
 
     act(() => {
       result.current.lastPage()
@@ -190,7 +190,7 @@ describe('usePaginatedList', () => {
 
   it('should navigate to specific page', () => {
     const pageSize = 2
-    const {result} = renderHook(() => usePaginatedList({pageSize}))
+    const {result} = renderHook(() => usePaginatedDocuments({pageSize}))
 
     act(() => {
       result.current.goToPage(2) // Go to page 2
@@ -215,7 +215,7 @@ describe('usePaginatedList', () => {
 
   it('should set page availability flags correctly', () => {
     const pageSize = 2
-    const {result} = renderHook(() => usePaginatedList({pageSize}))
+    const {result} = renderHook(() => usePaginatedDocuments({pageSize}))
     // On first page
     expect(result.current.hasFirstPage).toBe(false)
     expect(result.current.hasPreviousPage).toBe(false)
@@ -241,7 +241,7 @@ describe('usePaginatedList', () => {
 
   // New test case for resetting the current page when filter changes
   it('should reset current page when filter changes', () => {
-    const {result, rerender} = renderHook((props) => usePaginatedList(props), {
+    const {result, rerender} = renderHook((props) => usePaginatedDocuments(props), {
       initialProps: {pageSize: 2, filter: ''},
     })
     // Initially, current page should be 1

package/src/hooks/{paginatedList/usePaginatedList.ts → paginatedDocuments/usePaginatedDocuments.ts}

@@ -7,12 +7,12 @@ import {useQuery} from '../query/useQuery'
 const DEFAULT_PERSPECTIVE = 'drafts'
 
 /**
- * Configuration options for the usePaginatedList hook
+ * Configuration options for the usePaginatedDocuments hook
  *
  * @beta
  * @category Types
  */
-export interface PaginatedListOptions extends QueryOptions {
+export interface PaginatedDocumentsOptions extends QueryOptions {
   /**
    * GROQ filter expression to apply to the query
    */
@@ -32,12 +32,12 @@ export interface PaginatedListOptions extends QueryOptions {
 }
 
 /**
- * Return value from the usePaginatedList hook
+ * Return value from the usePaginatedDocuments hook
  *
  * @beta
  * @category Types
  */
-export interface PaginatedList {
+export interface PaginatedDocumentsResponse {
   /**
    * Array of document handles for the current page
    */
@@ -136,7 +136,7 @@ export interface PaginatedList {
  *   previousPage,
  *   hasNextPage,
  *   hasPreviousPage
- * } = usePaginatedList({
+ * } = usePaginatedDocuments({
  *   filter: '_type == "post"',
  *   search: searchTerm,
  *   pageSize: 10,
@@ -160,14 +160,14 @@ export interface PaginatedList {
  * ```
  *
  */
-export function usePaginatedList({
+export function usePaginatedDocuments({
   filter = '',
   pageSize = 25,
   params = {},
   orderings,
   search,
   ...options
-}: PaginatedListOptions = {}): PaginatedList {
+}: PaginatedDocumentsOptions = {}): PaginatedDocumentsResponse {
   const [pageIndex, setPageIndex] = useState(0)
   const key = JSON.stringify({filter, search, params, orderings, pageSize})
   // Reset the pageIndex to 0 whenever any query parameters (filter, search,

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

@@ -45,12 +45,12 @@ const mockDocument: DocumentHandle = {
 
 function TestComponent({document}: {document: DocumentHandle}) {
   const ref = useRef(null)
-  const {results, isPending} = usePreview({document, ref})
+  const {data, isPending} = usePreview({document, ref})
 
   return (
     <div ref={ref}>
-      <h1>{results?.title}</h1>
-      <p>{results?.subtitle}</p>
+      <h1>{data?.title}</h1>
+      <p>{data?.subtitle}</p>
       {isPending && <div>Pending...</div>}
     </div>
   )
@@ -75,7 +75,7 @@ describe('usePreview', () => {
   test('it only subscribes when element is visible', async () => {
     // Setup initial state
     getCurrent.mockReturnValue({
-      results: {title: 'Initial Title', subtitle: 'Initial Subtitle'},
+      data: {title: 'Initial Title', subtitle: 'Initial Subtitle'},
       isPending: false,
     })
     const eventsUnsubscribe = vi.fn()
@@ -139,7 +139,7 @@ describe('usePreview', () => {
       intersectionObserverCallback([{isIntersecting: true} as IntersectionObserverEntry])
       await resolvePromise
       getCurrent.mockReturnValue({
-        results: {title: 'Resolved Title', subtitle: 'Resolved Subtitle'},
+        data: {title: 'Resolved Title', subtitle: 'Resolved Subtitle'},
         isPending: false,
       })
       subscriber?.()
@@ -156,7 +156,7 @@ describe('usePreview', () => {
     delete window.IntersectionObserver
 
     getCurrent.mockReturnValue({
-      results: {title: 'Fallback Title', subtitle: 'Fallback Subtitle'},
+      data: {title: 'Fallback Title', subtitle: 'Fallback Subtitle'},
       isPending: false,
     })
     subscribe.mockImplementation(() => vi.fn())

package/src/hooks/preview/usePreview.tsx

@@ -19,7 +19,7 @@ export interface UsePreviewOptions {
  */
 export interface UsePreviewResults {
   /** The results of resolving the document’s preview values */
-  results: PreviewValue
+  data: PreviewValue
   /** True when preview values are being refreshed */
   isPending: boolean
 }
@@ -40,7 +40,7 @@ export interface UsePreviewResults {
  * ```
  * // PreviewComponent.jsx
  * export default function PreviewComponent({ document }) {
- *   const { results: { title, subtitle, media }, isPending } = usePreview({ document })
+ *   const { data: { title, subtitle, media }, isPending } = usePreview({ document })
  *   return (
  *     <article style={{ opacity: isPending ? 0.5 : 1}}>
  *       {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
@@ -51,12 +51,12 @@ export interface UsePreviewResults {
  * }
  *
  * // DocumentList.jsx
- * const { results, isPending } = useDocuments({ filter: '_type == "movie"' })
+ * const { data } = useDocuments({ filter: '_type == "movie"' })
  * return (
  *   <div>
  *     <h1>Movies</h1>
  *     <ul>
- *       {isPending ? 'Loading…' : results.map(movie => (
+ *       {data.map(movie => (
  *         <li key={movie._id}>
  *           <Suspense fallback='Loading…'>
  *             <PreviewComponent document={movie} />
@@ -115,7 +115,7 @@ export function usePreview({document: {_id, _type}, ref}: UsePreviewOptions): Us
   // Create getSnapshot function to return current state
   const getSnapshot = useCallback(() => {
     const currentState = stateSource.getCurrent()
-    if (currentState.results === null) throw resolvePreview(instance, {document: {_id, _type}})
+    if (currentState.data === null) throw resolvePreview(instance, {document: {_id, _type}})
     return currentState as UsePreviewResults
   }, [_id, _type, instance, stateSource])
 

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

@@ -61,12 +61,12 @@ function TestComponent({
   projection: ValidProjection
 }) {
   const ref = useRef(null)
-  const {results, isPending} = useProjection<ProjectionResult>({document, projection, ref})
+  const {data, isPending} = useProjection<ProjectionResult>({document, projection, ref})
 
   return (
     <div ref={ref}>
-      <h1>{results.title}</h1>
-      <p>{results.description}</p>
+      <h1>{data.title}</h1>
+      <p>{data.description}</p>
       {isPending && <div>Pending...</div>}
     </div>
   )
@@ -91,7 +91,7 @@ describe('useProjection', () => {
   test('it only subscribes when element is visible', async () => {
     // Setup initial state
     getCurrent.mockReturnValue({
-      results: {title: 'Initial Title', description: 'Initial Description'},
+      data: {title: 'Initial Title', description: 'Initial Description'},
       isPending: false,
     })
     const eventsUnsubscribe = vi.fn()
@@ -129,12 +129,12 @@ describe('useProjection', () => {
   test('it suspends and resolves data when element becomes visible', async () => {
     // Mock the initial state to trigger suspense
     getCurrent.mockReturnValueOnce({
-      results: null,
+      data: null,
       isPending: true,
     })
 
     const resolvedData = {
-      results: {title: 'Resolved Title', description: 'Resolved Description'},
+      data: {title: 'Resolved Title', description: 'Resolved Description'},
       isPending: false,
     }
 
@@ -169,7 +169,7 @@ describe('useProjection', () => {
     delete window.IntersectionObserver
 
     getCurrent.mockReturnValue({
-      results: {title: 'Fallback Title', description: 'Fallback Description'},
+      data: {title: 'Fallback Title', description: 'Fallback Description'},
       isPending: false,
     })
     subscribe.mockImplementation(() => vi.fn())
@@ -188,7 +188,7 @@ describe('useProjection', () => {
 
   test('it updates when projection changes', async () => {
     getCurrent.mockReturnValue({
-      results: {title: 'Initial Title'},
+      data: {title: 'Initial Title'},
       isPending: false,
     })
     const eventsUnsubscribe = vi.fn()
@@ -202,7 +202,7 @@ describe('useProjection', () => {
 
     // Change projection
     getCurrent.mockReturnValue({
-      results: {title: 'Updated Title', description: 'Added Description'},
+      data: {title: 'Updated Title', description: 'Added Description'},
       isPending: false,
     })
 

package/src/hooks/projection/useProjection.ts

@@ -9,14 +9,22 @@ import {distinctUntilChanged, EMPTY, Observable, startWith, switchMap} from 'rxj
 
 import {useSanityInstance} from '../context/useSanityInstance'
 
-interface UseProjectionOptions {
+/**
+ * @public
+ * @category Types
+ */
+export interface UseProjectionOptions {
   document: DocumentHandle
   projection: ValidProjection
   ref?: React.RefObject<unknown>
 }
 
-interface UseProjectionResults<TResult extends object> {
-  results: TResult
+/**
+ * @public
+ * @category Types
+ */
+export interface UseProjectionResults<TResult extends object> {
+  data: TResult
   isPending: boolean
 }
 
@@ -32,40 +40,44 @@ interface UseProjectionResults<TResult extends object> {
  * @param options - The document handle for the document you want to project values from, the projection string, and an optional ref
  * @returns The projection values for the given document and a boolean to indicate whether the resolution is pending
  *
- * @example Using a projection to display specific document fields
+ * @example Using a projection to render a preview of document
  * ```
  * // ProjectionComponent.jsx
  * export default function ProjectionComponent({ document }) {
  *   const ref = useRef(null)
- *   const { results: { title, description, authors }, isPending } = useProjection({
+ *   const { results: { title, coverImage, authors }, isPending } = useProjection({
  *     document,
- *     projection: '{title, "description": pt::text("description"), "authors": array::join(authors[]->name, ", ")}',
- *     ref
+ *     ref,
+ *     projection: `{
+ *       title,
+ *       'coverImage': cover.asset->url,
+ *       'authors': array::join(authors[]->{'name': firstName + ' ' + lastName + ' '}.name, ', ')
+ *     }`,
  *   })
  *
  *   return (
  *     <article ref={ref} style={{ opacity: isPending ? 0.5 : 1}}>
  *       <h2>{title}</h2>
- *       <p>{description}</p>
+ *       <img src={coverImage} alt={title} />
  *       <p>{authors}</p>
  *     </article>
  *   )
  * }
  * ```
  *
- * @example Combining with useInfiniteList to render a collection with specific fields
+ * @example Combining with useDocuments to render a collection with specific fields
  * ```
  * // DocumentList.jsx
- * const { data } = useInfiniteList({ filter: '_type == "article"' })
+ * const { data } = useDocuments({ filter: '_type == "article"' })
  * return (
  *   <div>
- *     <h1>Articles</h1>
+ *     <h1>Books</h1>
  *     <ul>
- *       {data.map(article => (
- *         <li key={article._id}>
+ *       {data.map(book => (
+ *         <li key={book._id}>
  *           <Suspense fallback='Loading…'>
  *             <ProjectionComponent
- *               document={article}
+ *               document={book}
  *             />
  *           </Suspense>
  *         </li>
@@ -126,7 +138,7 @@ export function useProjection<TResult extends object>({
   // Create getSnapshot function to return current state
   const getSnapshot = useCallback(() => {
     const currentState = stateSource.getCurrent()
-    if (currentState.results === null)
+    if (currentState.data === null)
       throw resolveProjection(instance, {document: {_id, _type}, projection})
     return currentState as UseProjectionResults<TResult>
   }, [_id, _type, projection, instance, stateSource])

package/src/hooks/projects/useProject.ts

@@ -32,7 +32,10 @@ type UseProject = {
   (projectId: string): SanityProject
 }
 
-/** @public */
+/**
+ * @public
+ * @function
+ */
 export const useProject: UseProject = createStateSourceHook({
   // remove `undefined` since we're suspending when that is the case
   getState: getProjectState as (