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

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

@@ -0,0 +1,179 @@
+// tests/useEditDocument.test.ts
+import {
+  createSanityInstance,
+  type DocumentHandle,
+  editDocument,
+  getDocumentState,
+  resolveDocument,
+  type StateSource,
+} from '@sanity/sdk'
+import {type SanityDocument} from '@sanity/types'
+import {renderHook} from '@testing-library/react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useApplyDocumentActions} from './useApplyDocumentActions'
+import {useEditDocument} from './useEditDocument'
+
+vi.mock('@sanity/sdk', async (importOriginal) => {
+  const original = await importOriginal<typeof import('@sanity/sdk')>()
+  return {
+    ...original,
+    getDocumentState: vi.fn(),
+    resolveDocument: vi.fn(),
+    editDocument: vi.fn(original.editDocument),
+  }
+})
+
+vi.mock('../context/useSanityInstance', () => ({
+  useSanityInstance: vi.fn(),
+}))
+
+vi.mock('./useApplyDocumentActions', () => ({
+  useApplyDocumentActions: vi.fn(),
+}))
+
+// Create a fake instance to be returned by useSanityInstance.
+const instance = createSanityInstance({projectId: 'p', dataset: 'd'})
+
+const doc = {
+  _id: 'doc1',
+  foo: 'bar',
+  _type: 'book',
+  _rev: 'tx0',
+  _createdAt: '2025-02-06T00:11:00.000Z',
+  _updatedAt: '2025-02-06T00:11:00.000Z',
+} satisfies SanityDocument
+
+const docHandle: DocumentHandle<SanityDocument> = {
+  _id: 'doc1',
+  _type: 'book',
+  resourceId: 'document:p.d:doc1',
+}
+
+describe('useEditDocument hook', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useSanityInstance).mockReturnValue(instance)
+  })
+
+  it('applies a single edit action for the given path', async () => {
+    const getCurrent = vi.fn().mockReturnValue(doc)
+    const subscribe = vi.fn().mockReturnValue(vi.fn())
+    vi.mocked(getDocumentState).mockReturnValue({
+      getCurrent,
+      subscribe,
+    } as unknown as StateSource<SanityDocument>)
+
+    const apply = vi.fn().mockResolvedValue({transactionId: 'tx1'})
+    vi.mocked(useApplyDocumentActions).mockReturnValue(apply)
+
+    const {result} = renderHook(() => useEditDocument(docHandle, 'foo'))
+    const promise = result.current('newValue')
+    expect(editDocument).toHaveBeenCalledWith(docHandle, {set: {foo: 'newValue'}})
+    expect(apply).toHaveBeenCalledWith(editDocument(docHandle, {set: {foo: 'newValue'}}))
+    const actionsResult = await promise
+    expect(actionsResult).toEqual({transactionId: 'tx1'})
+  })
+
+  it('applies edit actions for changed fields', async () => {
+    // Set up current document state.
+    const currentDoc = {...doc, foo: 'bar', extra: 'old'}
+    const getCurrent = vi.fn().mockReturnValue(currentDoc)
+    const subscribe = vi.fn().mockReturnValue(vi.fn())
+    vi.mocked(getDocumentState).mockReturnValue({
+      getCurrent,
+      subscribe,
+    } as unknown as StateSource<SanityDocument>)
+
+    const apply = vi.fn().mockResolvedValue({transactionId: 'tx2'})
+    vi.mocked(useApplyDocumentActions).mockReturnValue(apply)
+
+    const {result} = renderHook(() => useEditDocument(docHandle))
+    const promise = result.current({...doc, foo: 'baz', extra: 'old', _id: 'doc1'})
+    expect(apply).toHaveBeenCalledWith([editDocument(docHandle, {set: {foo: 'baz'}})])
+    const actionsResult = await promise
+    expect(actionsResult).toEqual({transactionId: 'tx2'})
+  })
+
+  it('applies a single edit action using an updater function for the given path', async () => {
+    const getCurrent = vi.fn().mockReturnValue(doc.foo)
+    const subscribe = vi.fn().mockReturnValue(vi.fn())
+    vi.mocked(getDocumentState).mockReturnValue({
+      getCurrent,
+      subscribe,
+    } as unknown as StateSource<SanityDocument>)
+
+    const apply = vi.fn().mockResolvedValue({transactionId: 'tx3'})
+    vi.mocked(useApplyDocumentActions).mockReturnValue(apply)
+
+    const {result} = renderHook(() => useEditDocument(docHandle, 'foo'))
+    const promise = result.current((prev: unknown) => `${prev}Updated`) // 'bar' becomes 'barUpdated'
+    expect(editDocument).toHaveBeenCalledWith(docHandle, {set: {foo: 'barUpdated'}})
+    expect(apply).toHaveBeenCalledWith(editDocument(docHandle, {set: {foo: 'barUpdated'}}))
+    const actionsResult = await promise
+    expect(actionsResult).toEqual({transactionId: 'tx3'})
+  })
+
+  it('applies edit actions using an updater function for the entire document', async () => {
+    const currentDoc = {...doc, foo: 'bar', extra: 'old'}
+    const getCurrent = vi.fn().mockReturnValue(currentDoc)
+    const subscribe = vi.fn().mockReturnValue(vi.fn())
+    vi.mocked(getDocumentState).mockReturnValue({
+      getCurrent,
+      subscribe,
+    } as unknown as StateSource<SanityDocument>)
+
+    const apply = vi.fn().mockResolvedValue({transactionId: 'tx4'})
+    vi.mocked(useApplyDocumentActions).mockReturnValue(apply)
+
+    const {result} = renderHook(() => useEditDocument(docHandle))
+    const promise = result.current((prevDoc) => ({...prevDoc, foo: 'baz'}))
+    expect(apply).toHaveBeenCalledWith([editDocument(docHandle, {set: {foo: 'baz'}})])
+    const actionsResult = await promise
+    expect(actionsResult).toEqual({transactionId: 'tx4'})
+  })
+
+  it('throws an error if next value is not an object', () => {
+    const getCurrent = vi.fn().mockReturnValue(doc)
+    const subscribe = vi.fn().mockReturnValue(vi.fn())
+    vi.mocked(getDocumentState).mockReturnValue({
+      getCurrent,
+      subscribe,
+    } as unknown as StateSource<SanityDocument>)
+
+    const fakeApply = vi.fn()
+    vi.mocked(useApplyDocumentActions).mockReturnValue(fakeApply)
+
+    const {result} = renderHook(() => useEditDocument(docHandle))
+    expect(() => result.current('notAnObject' as unknown as SanityDocument)).toThrowError(
+      'No path was provided to `useEditDocument` and the value provided was not a document object.',
+    )
+  })
+
+  it('throws a promise (suspends) when the document is not ready', () => {
+    const getCurrent = vi.fn().mockReturnValue(undefined)
+    const subscribe = vi.fn().mockReturnValue(vi.fn())
+    vi.mocked(getDocumentState).mockReturnValue({
+      getCurrent,
+      subscribe,
+    } as unknown as StateSource<unknown>)
+
+    const resolveDocPromise = Promise.resolve(doc)
+
+    // Also, simulate resolveDocument to return a known promise.
+    vi.mocked(resolveDocument).mockReturnValue(resolveDocPromise)
+
+    // Render the hook and capture the thrown promise.
+    const {result} = renderHook(() => {
+      try {
+        return useEditDocument(docHandle)
+      } catch (e) {
+        return e
+      }
+    })
+
+    // When the document is not ready, the hook throws the promise from resolveDocument.
+    expect(result.current).toBe(resolveDocPromise)
+  })
+})

package/src/hooks/document/useEditDocument.ts

@@ -0,0 +1,195 @@
+import {
+  type ActionsResult,
+  type DocumentHandle,
+  editDocument,
+  getDocumentState,
+  getResourceId,
+  type JsonMatch,
+  type JsonMatchPath,
+  resolveDocument,
+} from '@sanity/sdk'
+import {type SanityDocument} from '@sanity/types'
+import {useCallback} from 'react'
+
+import {useSanityInstance} from '../context/useSanityInstance'
+import {useApplyDocumentActions} from './useApplyDocumentActions'
+
+const ignoredKeys = ['_id', '_type', '_createdAt', '_updatedAt', '_rev']
+
+type Updater<TValue> = TValue | ((nextValue: TValue) => TValue)
+
+/**
+ *
+ * @beta
+ *
+ * ## useEditDocument(doc, path)
+ * Edit a nested value within a document
+ *
+ * @category Documents
+ * @param doc - The document to be edited; either as a document handle or the document’s ID a string
+ * @param path - The path to the nested value to be edited
+ * @returns A function to update the nested value. Accepts either a new value, or an updater function that exposes the previous value and returns a new value.
+ * @example Update a document’s name by providing the new value directly
+ * ```
+ * const handle = { _id: 'documentId', _type: 'documentType' }
+ * const name = useDocument(handle, 'name')
+ * const editName = useEditDocument(handle, 'name')
+ *
+ * function handleNameChange(event: React.ChangeEvent<HTMLInputElement>) {
+ *   editName(event.target.value)
+ * }
+ *
+ * return (
+ *   <input type='text' value={name} onChange={handleNameChange} />
+ * )
+ * ```
+ *
+ * @example Update a count on a document by providing an updater function
+ * ```
+ * const handle = { _id: 'documentId', _type: 'documentType' }
+ * const count = useDocument(handle, 'count')
+ * const editCount = useEditDocument(handle, 'count')
+ *
+ * function incrementCount() {
+ *   editCount(previousCount => previousCount + 1)
+ * }
+ *
+ * return (
+ *   <>
+ *     <button onClick={incrementCount}>
+ *       Increment
+ *     </button>
+ *     Current count: {count}
+ *   </>
+ * )
+ * ```
+ */
+export function useEditDocument<
+  TDocument extends SanityDocument,
+  TPath extends JsonMatchPath<TDocument>,
+>(
+  doc: DocumentHandle<TDocument>,
+  path: TPath,
+): (nextValue: Updater<JsonMatch<TDocument, TPath>>) => Promise<ActionsResult<TDocument>>
+
+/**
+ *
+ * @beta
+ *
+ * ## useEditDocument(doc)
+ * Edit an entire document
+ * @param doc - The document to be edited; either as a document handle or the document’s ID a string. If you pass a `DocumentHandle` with a `resourceId` (in the format of `document:projectId.dataset:documentId`)
+ * the document will be read from the specified Sanity project and dataset that is included in the handle. If no `resourceId` is provided, the default project and dataset from your `SanityApp` configuration will be used.
+ * @returns A function to update the document state. Accepts either a new document state, or an updater function that exposes the previous document state and returns the new document state.
+ * @example
+ * ```
+ * const myDocumentHandle = { _id: 'documentId', _type: 'documentType' }
+ *
+ * const myDocument = useDocument(myDocumentHandle)
+ * const { title, price } = myDocument
+ *
+ * const editMyDocument = useEditDocument(myDocumentHandle)
+ *
+ * function handleFieldChange(e: React.ChangeEvent<HTMLInputElement>) {
+ *   const {name, value} = e.currentTarget
+ *   // Use an updater function to update the document state based on the previous state
+ *   editMyDocument(previousDocument => ({
+ *     ...previousDocument,
+ *     [name]: value
+ *   }))
+ * }
+ *
+ * function handleSaleChange(e: React.ChangeEvent<HTMLInputElement>) {
+ *   const { checked } = e.currentTarget
+ *   if (checked) {
+ *     // Use an updater function to add a new salePrice field;
+ *     // set it at a 20% discount off the normal price
+ *     editMyDocument(previousDocument => ({
+ *       ...previousDocument,
+ *       salePrice: previousDocument.price * 0.8,
+ *     }))
+ *   } else {
+ *     // Get the document state without the salePrice field
+ *     const { salePrice, ...rest } = myDocument
+ *     // Update the document state to remove the salePrice field
+ *     editMyDocument(rest)
+ *   }
+ * }
+ *
+ * return (
+ *   <>
+ *     <form onSubmit={e => e.preventDefault()}>
+ *       <input name='title' type='text' value={title} onChange={handleFieldChange} />
+ *       <input name='price' type='number' value={price} onChange={handleFieldChange} />
+ *       <input
+ *         name='salePrice'
+ *         type='checkbox'
+ *         checked={Object(myDocument).hasOwnProperty('salePrice')}
+ *         onChange={handleSaleChange}
+ *       />
+ *     </form>
+ *     <pre><code>
+ *       {JSON.stringify(myDocument, null, 2)}
+ *     </code></pre>
+ *   </>
+ * )
+ * ```
+ */
+export function useEditDocument<TDocument extends SanityDocument>(
+  doc: DocumentHandle<TDocument>,
+): (nextValue: Updater<TDocument>) => Promise<ActionsResult<TDocument>>
+
+/**
+ *
+ * @beta
+ *
+ * Enables editing of a document’s state.
+ * When called with a `path` argument, the hook will return a function for updating a nested value.
+ * When called without a `path` argument, the hook will return a function for updating the entire document.
+ */
+export function useEditDocument(
+  doc: DocumentHandle,
+  path?: string,
+): (updater: Updater<unknown>) => Promise<ActionsResult> {
+  const resourceId = getResourceId(doc.resourceId)!
+  const documentId = doc._id
+  const instance = useSanityInstance(resourceId)
+  const apply = useApplyDocumentActions(resourceId)
+  const isDocumentReady = useCallback(
+    () => getDocumentState(instance, documentId).getCurrent() !== undefined,
+    [instance, documentId],
+  )
+  if (!isDocumentReady()) throw resolveDocument(instance, documentId)
+
+  return (updater: Updater<unknown>) => {
+    if (path) {
+      const nextValue =
+        typeof updater === 'function'
+          ? updater(getDocumentState(instance, documentId, path).getCurrent())
+          : updater
+
+      return apply(editDocument(doc, {set: {[path]: nextValue}}))
+    }
+
+    const current = getDocumentState(instance, documentId).getCurrent()
+    const nextValue = typeof updater === 'function' ? updater(current) : updater
+
+    if (typeof nextValue !== 'object' || !nextValue) {
+      throw new Error(
+        `No path was provided to \`useEditDocument\` and the value provided was not a document object.`,
+      )
+    }
+
+    const allKeys = Object.keys({...current, ...nextValue})
+    const editActions = allKeys
+      .filter((key) => !ignoredKeys.includes(key))
+      .filter((key) => current?.[key] !== nextValue[key])
+      .map((key) =>
+        key in nextValue
+          ? editDocument(doc, {set: {[key]: nextValue[key]}})
+          : editDocument(doc, {unset: [key]}),
+      )
+
+    return apply(editActions)
+  }
+}

package/src/hooks/documents/useDocuments.test.tsx

@@ -0,0 +1,152 @@
+import {act, renderHook} from '@testing-library/react'
+import {describe, vi} from 'vitest'
+
+import {evaluateSync, parse} from '../_synchronous-groq-js.mjs'
+import {useQuery} from '../query/useQuery'
+import {useDocuments} from './useDocuments'
+
+vi.mock('../query/useQuery')
+
+describe('useDocuments', () => {
+  beforeEach(() => {
+    const dataset = [
+      {
+        _id: 'movie1',
+        _type: 'movie',
+        title: 'The Matrix',
+        releaseYear: 1999,
+        _createdAt: '2021-03-09T00:00:00.000Z',
+        _updatedAt: '2021-03-09T00:00:00.000Z',
+        _rev: 'tx0',
+      },
+      {
+        _id: 'movie2',
+        _type: 'movie',
+        title: 'Inception',
+        releaseYear: 2010,
+        _createdAt: '2021-03-10T00:00:00.000Z',
+        _updatedAt: '2021-03-10T00:00:00.000Z',
+        _rev: 'tx1',
+      },
+      {
+        _id: 'movie3',
+        _type: 'movie',
+        title: 'Interstellar',
+        releaseYear: 2014,
+        _createdAt: '2021-03-11T00:00:00.000Z',
+        _updatedAt: '2021-03-11T00:00:00.000Z',
+        _rev: 'tx2',
+      },
+      {
+        _id: 'book1',
+        _type: 'book',
+        title: 'Dune',
+        _createdAt: '2021-03-12T00:00:00.000Z',
+        _updatedAt: '2021-03-12T00:00:00.000Z',
+        _rev: 'tx3',
+      },
+      {
+        _id: 'movie4',
+        _type: 'movie',
+        title: 'The Dark Knight',
+        releaseYear: 2008,
+        _createdAt: '2021-03-13T00:00:00.000Z',
+        _updatedAt: '2021-03-13T00:00:00.000Z',
+        _rev: 'tx4',
+      },
+      {
+        _id: 'movie5',
+        _type: 'movie',
+        title: 'Pulp Fiction',
+        releaseYear: 1994,
+        _createdAt: '2021-03-14T00:00:00.000Z',
+        _updatedAt: '2021-03-14T00:00:00.000Z',
+        _rev: 'tx5',
+      },
+    ]
+
+    vi.mocked(useQuery).mockImplementation((query, options) => {
+      const result = evaluateSync(parse(query), {dataset, params: options?.params}).get()
+      return {
+        data: result,
+        isPending: false,
+      }
+    })
+  })
+
+  it('should respect custom page size', () => {
+    const customBatchSize = 2
+    const {result} = renderHook(() => useDocuments({batchSize: customBatchSize}))
+
+    expect(result.current.data.length).toBe(customBatchSize)
+  })
+
+  it('should filter by document type', () => {
+    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(() => useDocuments({search: 'inter'}))
+
+    // Should match "Interstellar"
+    expect(result.current.data.some((doc) => doc._id === 'movie3')).toBe(true)
+  })
+
+  it('should apply ordering', () => {
+    const {result} = renderHook(() =>
+      useDocuments({
+        filter: '_type == "movie"',
+        orderings: [{field: 'releaseYear', direction: 'desc'}],
+      }),
+    )
+
+    // First item should be the most recent movie (Interstellar, 2014)
+    expect(result.current.data[0]._id).toBe('movie3')
+  })
+
+  it('should load more data when loadMore is called', () => {
+    const batchSize = 2
+    const {result} = renderHook(() => useDocuments({batchSize: batchSize}))
+
+    expect(result.current.data.length).toBe(batchSize)
+
+    act(() => {
+      result.current.loadMore()
+    })
+
+    expect(result.current.data.length).toBe(batchSize * 2)
+  })
+
+  it('should indicate when there is more data to load', () => {
+    const {result} = renderHook(() => useDocuments({batchSize: 3}))
+    expect(result.current.hasMore).toBe(true)
+    // Load all remaining data
+    act(() => {
+      result.current.loadMore()
+    })
+    expect(result.current.hasMore).toBe(false)
+  })
+
+  // New test case for resetting limit when filter changes
+  it('should reset limit when filter changes', () => {
+    const {result, rerender} = renderHook((props) => useDocuments(props), {
+      initialProps: {batchSize: 2, filter: ''},
+    })
+    // Initially, data length equals pageSize (2)
+    expect(result.current.data.length).toBe(2)
+    // Load more to increase limit
+    act(() => {
+      result.current.loadMore()
+    })
+    // After loadMore, data length should be increased (2 + 2 = 4)
+    expect(result.current.data.length).toBe(4)
+    // Now update filter to trigger resetting the limit
+    rerender({batchSize: 2, filter: '_type == "movie"'})
+    // With the filter applied, the limit is reset to pageSize (i.e. 2)
+    expect(result.current.data.length).toBe(2)
+  })
+})

package/src/hooks/documents/useDocuments.ts

@@ -0,0 +1,174 @@
+import {type DocumentHandle, type QueryOptions} from '@sanity/sdk'
+import {type SortOrderingItem} from '@sanity/types'
+import {useCallback, useEffect, useMemo, useState} from 'react'
+
+import {useQuery} from '../query/useQuery'
+
+const DEFAULT_BATCH_SIZE = 25
+const DEFAULT_PERSPECTIVE = 'drafts'
+
+/**
+ * Result structure returned from the infinite list query
+ * @internal
+ */
+interface UseDocumentsQueryResult {
+  count: number
+  data: DocumentHandle[]
+}
+
+/**
+ * Configuration options for the useDocuments hook
+ *
+ * @beta
+ * @category Types
+ */
+export interface DocumentsOptions extends QueryOptions {
+  /**
+   * GROQ filter expression to apply to the query
+   */
+  filter?: string
+  /**
+   * Number of items to load per batch (defaults to 25)
+   */
+  batchSize?: number
+  /**
+   * Sorting configuration for the results
+   */
+  orderings?: SortOrderingItem[]
+  /**
+   * Text search query to filter results
+   */
+  search?: string
+}
+
+/**
+ * Return value from the useDocuments hook
+ *
+ * @beta
+ * @category Types
+ */
+export interface DocumentsResponse {
+  /**
+   * Array of document handles for the current batch
+   */
+  data: DocumentHandle[]
+  /**
+   * Whether there are more items available to load
+   */
+  hasMore: boolean
+  /**
+   * Total count of items matching the query
+   */
+  count: number
+  /**
+   * Whether a query is currently in progress
+   */
+  isPending: boolean
+  /**
+   * Function to load the next batch of results
+   */
+  loadMore: () => void
+}
+
+/**
+ * Retrieves batches of {@link DocumentHandle}s, narrowed by optional filters, text searches, and custom ordering,
+ * with infinite scrolling support. The number of document handles returned per batch is customizable,
+ * and additional batches can be loaded using the supplied `loadMore` function.
+ *
+ * @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 retrieved document handles, and a function to load more
+ * @example
+ * ```tsx
+ * const {data, hasMore, isPending, loadMore} = useDocuments({
+ *   filter: '_type == "post"',
+ *   search: searchTerm,
+ *   batchSize: 10,
+ *   orderings: [{field: '_createdAt', direction: 'desc'}]
+ * })
+ *
+ * return (
+ *   <div>
+ *     Total documents: {count}
+ *     <ol>
+ *       {data.map((doc) => (
+ *         <li key={doc._id}>
+ *           <MyDocumentComponent doc={doc} />
+ *         </li>
+ *       ))}
+ *     </ol>
+ *     {hasMore && <button onClick={loadMore}>Load More</button>}
+ *   </div>
+ * )
+ * ```
+ *
+ */
+export function useDocuments({
+  batchSize = DEFAULT_BATCH_SIZE,
+  params,
+  search,
+  filter,
+  orderings,
+  ...options
+}: DocumentsOptions): DocumentsResponse {
+  const perspective = options.perspective ?? DEFAULT_PERSPECTIVE
+  const [limit, setLimit] = useState(batchSize)
+
+  // Reset the limit to the current batchSize whenever any query parameters
+  // (filter, search, params, orderings) or batchSize changes
+  const key = JSON.stringify({filter, search, params, orderings, batchSize})
+  useEffect(() => {
+    setLimit(batchSize)
+  }, [key, batchSize])
+
+  const filterClause = useMemo(() => {
+    const conditions: string[] = []
+
+    // Add search query if specified
+    if (search?.trim()) {
+      conditions.push(`[@] match text::query("${search.trim()}")`)
+    }
+
+    // Add additional filter if specified
+    if (filter) {
+      conditions.push(`(${filter})`)
+    }
+
+    return conditions.length ? `[${conditions.join(' && ')}]` : ''
+  }, [filter, search])
+
+  const orderClause = orderings
+    ? `| order(${orderings
+        .map((ordering) =>
+          [ordering.field, ordering.direction.toLowerCase()]
+            .map((str) => str.trim())
+            .filter(Boolean)
+            .join(' '),
+        )
+        .join(',')})`
+    : ''
+
+  const dataQuery = `*${filterClause}${orderClause}[0...${limit}]{_id,_type}`
+  const countQuery = `count(*${filterClause})`
+
+  const {
+    data: {count, data},
+    isPending,
+  } = useQuery<UseDocumentsQueryResult>(`{"count":${countQuery},"data":${dataQuery}}`, {
+    ...options,
+    params,
+    perspective,
+  })
+
+  const hasMore = data.length < count
+
+  const loadMore = useCallback(() => {
+    setLimit((prev) => Math.min(prev + batchSize, count))
+  }, [count, batchSize])
+
+  return useMemo(
+    () => ({data, hasMore, count, isPending, loadMore}),
+    [data, hasMore, count, isPending, loadMore],
+  )
+}