feat!: rename useInfiniteList → useDocuments (#363)

* feat!: rename useInfiniteList → useDocuments

Author: ryanbonial

apps/kitchensink-react/src/DocumentCollection/DocumentCoreInteractionsRoute.tsx

@@ -1,6 +1,6 @@
 import {
   DocumentHandle,
-  useInfiniteList,
+  useDocuments,
   useManageFavorite,
   useNavigateToStudioDocument,
   useRecordDocumentHistoryEvent,
@@ -54,7 +54,7 @@ function ActionButtons({document}: {document: DocumentHandle}) {
 }
 
 export function DocumentCoreInteractionsRoute(): JSX.Element {
-  const {isPending, data, hasMore, loadMore} = useInfiniteList({
+  const {isPending, data, hasMore, loadMore} = useDocuments({
     filter: '_type == "book"',
     orderings: [{field: '_updatedAt', direction: 'desc'}],
   })

apps/kitchensink-react/src/DocumentCollection/DocumentGridRoute.tsx

@@ -1,12 +1,12 @@
-import {useInfiniteList} from '@sanity/sdk-react'
+import {useDocuments} from '@sanity/sdk-react'
 import {Box, Button, Heading} from '@sanity/ui'
 import {type JSX} from 'react'
 
 import {DocumentGridLayout} from '../components/DocumentGridLayout/DocumentGridLayout'
 import {DocumentPreview} from './DocumentPreview'
 
 export function DocumentGridRoute(): JSX.Element {
-  const {isPending, data, hasMore, loadMore} = useInfiniteList({
+  const {isPending, data, hasMore, loadMore} = useDocuments({
     filter: '_type == "author"',
     orderings: [{field: 'name', direction: 'asc'}],
   })

apps/kitchensink-react/src/DocumentCollection/DocumentListRoute.tsx

@@ -1,4 +1,4 @@
-import {useInfiniteList} from '@sanity/sdk-react'
+import {useDocuments} from '@sanity/sdk-react'
 import {Box, Heading} from '@sanity/ui'
 import {type JSX} from 'react'
 
@@ -7,7 +7,7 @@ import {DocumentPreview} from './DocumentPreview'
 import {LoadMore} from './LoadMore'
 
 export function DocumentListRoute(): JSX.Element {
-  const {isPending, data, hasMore, loadMore} = useInfiniteList({
+  const {isPending, data, hasMore, loadMore} = useDocuments({
     filter: '_type == "author"',
     orderings: [{field: '_updatedAt', direction: 'asc'}],
   })

apps/kitchensink-react/src/DocumentCollection/SearchRoute.tsx

@@ -1,4 +1,4 @@
-import {type DocumentHandle, useInfiniteList} from '@sanity/sdk-react'
+import {type DocumentHandle, useDocuments} from '@sanity/sdk-react'
 import {Box, Heading, Stack, Text, TextInput} from '@sanity/ui'
 import {type JSX, useState} from 'react'
 
@@ -9,7 +9,7 @@ import {LoadMore} from './LoadMore'
 export function SearchRoute(): JSX.Element {
   const [searchQuery, setSearchQuery] = useState('')
 
-  const {isPending, data, hasMore, loadMore, count} = useInfiniteList({
+  const {isPending, data, hasMore, loadMore, count} = useDocuments({
     search: searchQuery,
     filter: '_type == "book"',
     orderings: [{field: '_updatedAt', direction: 'desc'}],

packages/react/src/_exports/index.ts

@@ -36,10 +36,10 @@ export {useDocumentSyncStatus} from '../hooks/document/useDocumentSyncStatus'
 export {useEditDocument} from '../hooks/document/useEditDocument'
 export {usePermissions} from '../hooks/document/usePermissions'
 export {
-  type InfiniteList,
-  type InfiniteListOptions,
-  useInfiniteList,
-} from '../hooks/infiniteList/useInfiniteList'
+  type DocumentsOptions,
+  type DocumentsResponse,
+  useDocuments,
+} from '../hooks/documents/useDocuments'
 export {
   type PaginatedDocumentsOptions,
   type PaginatedDocumentsResponse,

packages/react/src/hooks/infiniteList/useInfiniteList.test.tsx renamed to packages/react/src/hooks/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,29 +76,29 @@ 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
   })
 
   // 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)
   })
 
   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)

packages/react/src/hooks/infiniteList/useInfiniteList.ts renamed to packages/react/src/hooks/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,

packages/react/src/hooks/preview/usePreview.tsx

@@ -36,7 +36,7 @@ export interface UsePreviewResults {
  * @param options - The document handle for the document you want to resolve preview values for, and an optional ref
  * @returns The preview values for the given document and a boolean to indicate whether the resolution is pending
  *
- * @example Combining with useInfiniteList to render a collection of document previews
+ * @example Combining with useDocuments to render a collection of document previews
  * ```
  * // PreviewComponent.jsx
  * export default function PreviewComponent({ document }) {
@@ -51,7 +51,7 @@ export interface UsePreviewResults {
  * }
  *
  * // DocumentList.jsx
- * const { data } = useInfiniteList({ filter: '_type == "movie"' })
+ * const { data } = useDocuments({ filter: '_type == "movie"' })
  * return (
  *   <div>
  *     <h1>Movies</h1>

packages/react/src/hooks/projection/useProjection.ts

@@ -65,10 +65,10 @@ export interface UseProjectionResults<TResult extends object> {
  * }
  * ```
  *
- * @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>Books</h1>