@sanity/sdk-react 2.8.0 → 3.0.0-rc.0

package/src/hooks/document/useEditDocument.ts

@@ -1,84 +1,44 @@
-import {
-  type ActionsResult,
-  type DocumentOptions,
-  editDocument,
-  getDocumentState,
-  type JsonMatch,
-  resolveDocument,
-} from '@sanity/sdk'
-import {type SanityDocument} from 'groq'
+import {type ActionsResult, editDocument, getDocumentState, resolveDocument} from '@sanity/sdk'
 import {useCallback} from 'react'
 
+import {type DocumentHandle} from '../../config/handles'
 import {useSanityInstance} from '../context/useSanityInstance'
+import {useNormalizedResourceOptions} from '../helpers/useNormalizedResourceOptions'
 import {useApplyDocumentActions} from './useApplyDocumentActions'
 
 const ignoredKeys = ['_id', '_type', '_createdAt', '_updatedAt', '_rev']
 
 type Updater<TValue> = TValue | ((currentValue: TValue) => TValue)
 
-// Overload 1: No path, relies on Typegen
-/**
- * @public
- * Edit an entire document, relying on Typegen for the type.
- *
- * @param options - Document options including `documentId`, `documentType`, and optionally `projectId`/`dataset`.
- * @returns A stable function to update the document state. Accepts either the new document state or an updater function `(currentValue) => nextValue`.
- *          Returns a promise resolving to the {@link ActionsResult}.
- */
-export function useEditDocument<
-  TDocumentType extends string = string,
-  TDataset extends string = string,
-  TProjectId extends string = string,
->(
-  options: DocumentOptions<undefined, TDocumentType, TDataset, TProjectId>,
-): (
-  nextValue: Updater<SanityDocument<TDocumentType, `${TProjectId}.${TDataset}`>>,
-) => Promise<ActionsResult<SanityDocument<TDocumentType, `${TProjectId}.${TDataset}`>>>
-
-// Overload 2: Path provided, relies on Typegen
-/**
- * @public
- * Edit a specific path within a document, relying on Typegen for the type.
- *
- * @param options - Document options including `documentId`, `documentType`, `path`, and optionally `projectId`/`dataset`.
- * @returns A stable function to update the value at the specified path. Accepts either the new value or an updater function `(currentValue) => nextValue`.
- *          Returns a promise resolving to the {@link ActionsResult}.
- */
-export function useEditDocument<
-  TPath extends string = string,
-  TDocumentType extends string = string,
-  TDataset extends string = string,
-  TProjectId extends string = string,
->(
-  options: DocumentOptions<TPath, TDocumentType, TDataset, TProjectId>,
-): (
-  nextValue: Updater<JsonMatch<SanityDocument<TDocumentType, `${TProjectId}.${TDataset}`>, TPath>>,
-) => Promise<ActionsResult<SanityDocument<TDocumentType, `${TProjectId}.${TDataset}`>>>
+/** React-layer edit document options: DocumentHandle with optional path */
+type EditDocumentOptions<TPath extends string | undefined = undefined> = DocumentHandle & {
+  path?: TPath
+}
 
-// Overload 3: Explicit type, no path
+// Overload 1: Explicit type, no path
 /**
  * @public
  * Edit an entire document with an explicit type `TData`.
  *
- * @param options - Document options including `documentId` and optionally `projectId`/`dataset`.
+ * @param options - Document options including `documentId` and optionally `resource` or `resourceName`.
  * @returns A stable function to update the document state. Accepts either the new document state (`TData`) or an updater function `(currentValue: TData) => nextValue: TData`.
  *          Returns a promise resolving to the {@link ActionsResult}.
  */
 export function useEditDocument<TData>(
-  options: DocumentOptions<undefined>,
+  options: EditDocumentOptions<undefined>,
 ): (nextValue: Updater<TData>) => Promise<ActionsResult>
 
-// Overload 4: Explicit type, path provided
+// Overload 2: Explicit type, path provided
 /**
  * @public
  * Edit a specific path within a document with an explicit type `TData`.
  *
- * @param options - Document options including `documentId`, `path`, and optionally `projectId`/`dataset`.
+ * @param options - Document options including `documentId`, `path`, and optionally `resource` or `resourceName`.
  * @returns A stable function to update the value at the specified path. Accepts either the new value (`TData`) or an updater function `(currentValue: TData) => nextValue: TData`.
  *          Returns a promise resolving to the {@link ActionsResult}.
  */
 export function useEditDocument<TData>(
-  options: DocumentOptions<string>,
+  options: EditDocumentOptions<string>,
 ): (nextValue: Updater<TData>) => Promise<ActionsResult>
 
 /**
@@ -94,11 +54,9 @@ export function useEditDocument<TData>(
  * - Integrating with the active {@link SanityInstance} context.
  * - Utilizing `useApplyDocumentActions` internally for optimistic updates and transaction handling.
  *
- * It offers several overloads for flexibility:
- * 1. **Typegen (Full Document):** Edit the entire document, inferring types from your schema.
- * 2. **Typegen (Specific Path):** Edit a specific field, inferring types.
- * 3. **Explicit Type (Full Document):** Edit the entire document with a manually specified type.
- * 4. **Explicit Type (Specific Path):** Edit a specific field with a manually specified type.
+ * It offers overloads for flexibility:
+ * 1. **Explicit Type (Full Document):** Edit the entire document with a manually specified type.
+ * 2. **Explicit Type (Specific Path):** Edit a specific field with a manually specified type.
  *
  * **LiveEdit Documents:**
  * For documents using {@link DocumentHandle.liveEdit | liveEdit mode} (set via `liveEdit: true` in the document handle), edits are applied directly to the published document without creating a draft.
@@ -106,87 +64,7 @@ export function useEditDocument<TData>(
  * This hook relies on the document state being loaded. If the document is not yet available
  * (e.g., during initial load), the component using this hook will suspend.
  *
- * @example Basic Usage (Typegen, Full Document)
- * ```tsx
- * import {useCallback} from 'react';
- * import {useEditDocument, useDocument, type DocumentHandle} from '@sanity/sdk-react'
- *
- * // Assume 'product' schema has a 'title' field (string)
- * interface ProductEditorProps {
- *   productHandle: DocumentHandle<'product'> // Typegen infers 'product' type
- * }
- *
- * function ProductEditor({ productHandle }: ProductEditorProps) {
- *   // Fetch the document to display its current state (optional)
- *   const {data: product} = useDocument(productHandle);
- *   // Get the edit function for the full document
- *   const editProduct = useEditDocument(productHandle);
- *
- *   // Use useCallback for stable event handlers
- *   const handleTitleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
- *     const newTitle = event.target.value;
- *     // Use the functional updater for safe partial updates
- *     editProduct(prev => ({
- *       ...prev,
- *       title: newTitle,
- *     })).
- *   }, [editProduct]);
- *
- *   return (
- *     <div>
- *       <label>
- *         Product Title:
- *         <input
- *           type="text"
- *           value={product?.title ?? ''}
- *           onChange={handleTitleChange}
- *         />
- *       </label>
- *     </div>
- *   );
- * }
- * ```
- *
- * @example Editing a Specific Path (Typegen)
- * ```tsx
- * import React, { useCallback } from 'react';
- * import {useEditDocument, useDocument, type DocumentHandle, type DocumentOptions} from '@sanity/sdk-react'
- *
- * // Assume 'product' schema has a 'price' field (number)
- * interface ProductPriceEditorProps {
- *   productHandle: DocumentHandle<'product'>;
- * }
- *
- * function ProductPriceEditor({ productHandle }: ProductPriceEditorProps) {
- *   // Construct DocumentOptions internally, combining the handle and a hardcoded path
- *   const priceOptions {
- *     ...productHandle,
- *     path: 'price', // Hardcode the path to edit
- *   };
- *
- *   // Fetch the current price to display it
- *   const {data: currentPrice} = useDocument(priceOptions);
- *   // Get the edit function for the specific path 'price'
- *   const editPrice = useEditDocument(priceOptions);
- *
- *   const handleSetFixedPrice = useCallback(() => {
- *     // Update the price directly to a hardcoded value
- *     editPrice(99.99)
- *   }, [editPrice]);
- *
- *   return (
- *     <div>
- *       <p>Current Price: {currentPrice}</p>
- *       <button onClick={handleSetFixedPrice}>
- *         Set Price to $99.99
- *       </button>
- *     </div>
- *   );
- * }
- *
- * ```
- *
- * @example Usage with Explicit Types (Full Document)
+ * @example Basic Usage with Explicit Types (Full Document)
  * ```tsx
  * import React, { useCallback } from 'react';
  * import {useEditDocument, useDocument, type DocumentHandle, type SanityDocument} from '@sanity/sdk-react'
@@ -262,20 +140,22 @@ export function useEditDocument<TData>(
 export function useEditDocument({
   path,
   ...doc
-}: DocumentOptions<string | undefined>): (updater: Updater<unknown>) => Promise<ActionsResult> {
-  const instance = useSanityInstance(doc)
+}: EditDocumentOptions<string | undefined>): (updater: Updater<unknown>) => Promise<ActionsResult> {
+  const instance = useSanityInstance()
+  const normalizedDoc = useNormalizedResourceOptions(doc)
+
   const apply = useApplyDocumentActions()
   const isDocumentReady = useCallback(
-    () => getDocumentState(instance, doc).getCurrent() !== undefined,
-    [instance, doc],
+    () => getDocumentState(instance, normalizedDoc).getCurrent() !== undefined,
+    [instance, normalizedDoc],
   )
-  if (!isDocumentReady()) throw resolveDocument(instance, doc)
+  if (!isDocumentReady()) throw resolveDocument(instance, normalizedDoc)
 
   return (updater: Updater<unknown>) => {
     const currentPath = path
 
     if (currentPath) {
-      const stateWithOptions = getDocumentState(instance, {...doc, path})
+      const stateWithOptions = getDocumentState(instance, {...normalizedDoc, path})
       const currentValue = stateWithOptions.getCurrent()
 
       const nextValue =
@@ -283,10 +163,10 @@ export function useEditDocument({
           ? (updater as (prev: typeof currentValue) => typeof currentValue)(currentValue)
           : updater
 
-      return apply(editDocument(doc, {set: {[currentPath]: nextValue}}))
+      return apply(editDocument(normalizedDoc, {set: {[currentPath]: nextValue}}))
     }
 
-    const fullDocState = getDocumentState(instance, {...doc, path})
+    const fullDocState = getDocumentState(instance, {...normalizedDoc, path})
     const current = fullDocState.getCurrent() as object | null | undefined
     const nextValue =
       typeof updater === 'function'
@@ -308,8 +188,8 @@ export function useEditDocument({
       )
       .map((key) =>
         key in nextValue
-          ? editDocument(doc, {set: {[key]: (nextValue as Record<string, unknown>)[key]}})
-          : editDocument(doc, {unset: [key]}),
+          ? editDocument(normalizedDoc, {set: {[key]: (nextValue as Record<string, unknown>)[key]}})
+          : editDocument(normalizedDoc, {unset: [key]}),
       )
 
     return apply(editActions)

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

@@ -1,8 +1,10 @@
-import {act, renderHook} from '@testing-library/react'
+import {type DatasetResource} from '@sanity/sdk'
 import {evaluateSync, parse, toJS} from 'groq-js'
 import {describe, vi} from 'vitest'
 
+import {act, renderHook} from '../../../test/test-utils'
 import {ResourceProvider} from '../../context/ResourceProvider'
+import {ResourcesContext} from '../../context/ResourcesContext'
 import {useQuery} from '../query/useQuery'
 import {useDocuments} from './useDocuments'
 
@@ -77,25 +79,13 @@ describe('useDocuments', () => {
 
   it('should respect custom page size', () => {
     const customBatchSize = 2
-    const {result} = renderHook(() => useDocuments({batchSize: customBatchSize}), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
+    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"'}), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
+    const {result} = renderHook(() => useDocuments({filter: '_type == "movie"'}))
 
     expect(result.current.data.every((doc) => doc.documentType === 'movie')).toBe(true)
     expect(result.current.count).toBe(5) // 5 movies in the dataset
@@ -103,32 +93,18 @@ describe('useDocuments', () => {
 
   // groq-js doesn't support search filters yet
   it.skip('should apply search filter', () => {
-    const {result} = renderHook(() => useDocuments({search: 'inter'}), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
+    const {result} = renderHook(() => useDocuments({search: 'inter'}))
 
     // Should match "Interstellar"
     expect(result.current.data.some((doc) => doc.documentId === 'movie3')).toBe(true)
   })
 
   it('should apply ordering', () => {
-    const {result} = renderHook(
-      () =>
-        useDocuments({
-          filter: '_type == "movie"',
-          orderings: [{field: 'releaseYear', direction: 'desc'}],
-        }),
-      {
-        wrapper: ({children}) => (
-          <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-            {children}
-          </ResourceProvider>
-        ),
-      },
+    const {result} = renderHook(() =>
+      useDocuments({
+        filter: '_type == "movie"',
+        orderings: [{field: 'releaseYear', direction: 'desc'}],
+      }),
     )
 
     // First item should be the most recent movie (Interstellar, 2014)
@@ -137,13 +113,7 @@ describe('useDocuments', () => {
 
   it('should load more data when loadMore is called', () => {
     const batchSize = 2
-    const {result} = renderHook(() => useDocuments({batchSize: batchSize}), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
+    const {result} = renderHook(() => useDocuments({batchSize: batchSize}))
 
     expect(result.current.data.length).toBe(batchSize)
 
@@ -155,13 +125,7 @@ describe('useDocuments', () => {
   })
 
   it('should indicate when there is more data to load', () => {
-    const {result} = renderHook(() => useDocuments({batchSize: 3}), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
+    const {result} = renderHook(() => useDocuments({batchSize: 3}))
     expect(result.current.hasMore).toBe(true)
     // Load all remaining data
     act(() => {
@@ -174,11 +138,6 @@ describe('useDocuments', () => {
   it('should reset limit when filter changes', () => {
     const {result, rerender} = renderHook((props) => useDocuments(props), {
       initialProps: {batchSize: 2, filter: ''},
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
     })
     // Initially, data length equals pageSize (2)
     expect(result.current.data.length).toBe(2)
@@ -194,23 +153,44 @@ describe('useDocuments', () => {
     expect(result.current.data.length).toBe(2)
   })
 
-  it('should add projectId and dataset to document handles', () => {
-    const {result} = renderHook(() => useDocuments({}), {
+  it('should add resources to document handles', () => {
+    const {result} = renderHook(() => useDocuments({}))
+
+    // Check that the first document handle has the projectId and dataset
+    expect((result.current.data[0].resource as DatasetResource).projectId).toBe('test')
+    expect((result.current.data[0].resource as DatasetResource).dataset).toBe('test')
+
+    // Verify all document handles have these properties
+    expect(
+      result.current.data.every(
+        (doc) =>
+          (doc.resource as DatasetResource).projectId === 'test' &&
+          (doc.resource as DatasetResource).dataset === 'test',
+      ),
+    ).toBe(true)
+  })
+
+  it('should resolve resourceName to the named dataset resource', () => {
+    const resources = {
+      default: {projectId: 'test-project', dataset: 'test-dataset'},
+      secondary: {projectId: 'secondary-project', dataset: 'secondary-dataset'},
+    }
+
+    const {result} = renderHook(() => useDocuments({resourceName: 'secondary'}), {
       wrapper: ({children}) => (
-        <ResourceProvider projectId="test-project" dataset="test-dataset" fallback={null}>
-          {children}
+        <ResourceProvider resource={resources.default} fallback={null}>
+          <ResourcesContext.Provider value={resources}>{children}</ResourcesContext.Provider>
         </ResourceProvider>
       ),
     })
 
-    // Check that the first document handle has the projectId and dataset
-    expect(result.current.data[0].projectId).toBe('test-project')
-    expect(result.current.data[0].dataset).toBe('test-dataset')
-
-    // Verify all document handles have these properties
+    expect((result.current.data[0].resource as DatasetResource).projectId).toBe('secondary-project')
+    expect((result.current.data[0].resource as DatasetResource).dataset).toBe('secondary-dataset')
     expect(
       result.current.data.every(
-        (doc) => doc.projectId === 'test-project' && doc.dataset === 'test-dataset',
+        (doc) =>
+          (doc.resource as DatasetResource).projectId === 'secondary-project' &&
+          (doc.resource as DatasetResource).dataset === 'secondary-dataset',
       ),
     ).toBe(true)
   })

package/src/hooks/documents/useDocuments.ts

@@ -1,14 +1,10 @@
-import {
-  createGroqSearchFilter,
-  type DatasetHandle,
-  type DocumentHandle,
-  type QueryOptions,
-} from '@sanity/sdk'
+import {createGroqSearchFilter, type QueryOptions} from '@sanity/sdk'
 import {type SortOrderingItem} from '@sanity/types'
 import {pick} from 'lodash-es'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
-import {useSanityInstance} from '../context/useSanityInstance'
+import {type DocumentHandle, type ResourceHandle} from '../../config/handles'
+import {useNormalizedResourceOptions} from '../helpers/useNormalizedResourceOptions'
 import {useQuery} from '../query/useQuery'
 
 const DEFAULT_BATCH_SIZE = 25
@@ -24,7 +20,9 @@ export interface DocumentsOptions<
   TDataset extends string = string,
   TProjectId extends string = string,
 >
-  extends DatasetHandle<TDataset, TProjectId>, Pick<QueryOptions, 'perspective' | 'params'> {
+  extends
+    ResourceHandle<TProjectId, TDataset>,
+    Pick<QueryOptions<TDocumentType, TDataset, TProjectId>, 'params'> {
   /**
    * Filter documents by their `_type`. Can be a single type or an array of types.
    */
@@ -92,18 +90,16 @@ export interface DocumentsResponse<
  * @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
  *
  * @remarks
- * - The returned document handles include projectId and dataset information from the current Sanity instance
+ * - The returned document handles include resource information from the current Sanity instance
  * - This makes them ready to use with document operations and other document hooks
- * - The hook automatically uses the correct Sanity instance based on the projectId and dataset in the options
+ * - The hook automatically uses the correct Sanity instance based on the resource in the options
  *
  * @example Basic infinite list with loading more
  * ```tsx
  * import {
  *   useDocuments,
- *   createDatasetHandle,
- *   type DatasetHandle,
  *   type DocumentHandle,
- *   type SortOrderingItem
+ *   type DocumentResource,
  * } from '@sanity/sdk-react'
  * import {Suspense} from 'react'
  *
@@ -119,14 +115,14 @@ export interface DocumentsResponse<
  *
  * // Define props for the list component
  * interface DocumentListProps {
- *   dataset: DatasetHandle
+ *   resource: DocumentResource
  *   documentType: string
  *   search?: string
  * }
  *
- * function DocumentList({dataset, documentType, search}: DocumentListProps) {
+ * function DocumentList({resource, documentType, search}: DocumentListProps) {
  *   const { data, hasMore, isPending, loadMore, count } = useDocuments({
- *     ...dataset,
+ *     resource,
  *     documentType,
  *     search,
  *     batchSize: 10,
@@ -140,7 +136,7 @@ export interface DocumentsResponse<
  *         {data.map((docHandle) => (
  *           <li key={docHandle.documentId}>
  *            <Suspense fallback="Loading…">
- *              <MyDocumentComponent docHandle={docHandle} />
+ *              <MyDocumentComponent doc={docHandle} />
  *            </Suspense>
  *           </li>
  *         ))}
@@ -155,8 +151,7 @@ export interface DocumentsResponse<
  * }
  *
  * // Usage:
- * // const myDatasetHandle = createDatasetHandle({ projectId: 'p1', dataset: 'production' })
- * // <DocumentList dataset={myDatasetHandle} documentType="post" search="Sanity" />
+ * // <DocumentList resource={{projectId: 'p1', dataset: 'production'}} documentType="post" search="Sanity" />
  * ```
  *
  * @example Using `filter` and `params` options for narrowing a collection
@@ -201,13 +196,14 @@ export function useDocuments<
   filter,
   orderings,
   documentType,
-  ...options
+  ...rawOptions
 }: DocumentsOptions<TDocumentType, TDataset, TProjectId>): DocumentsResponse<
   TDocumentType,
   TDataset,
   TProjectId
 > {
-  const instance = useSanityInstance(options)
+  const options =
+    useNormalizedResourceOptions<DocumentsOptions<TDocumentType, TDataset, TProjectId>>(rawOptions)
   const [limit, setLimit] = useState(batchSize)
   const documentTypes = useMemo(
     () =>
@@ -279,10 +275,8 @@ export function useDocuments<
     query: `{"count":${countQuery},"data":${dataQuery}}`,
     params: {
       ...params,
-      __handle: {
-        ...pick(instance.config, 'projectId', 'dataset', 'perspective'),
-        ...pick(options, 'projectId', 'dataset', 'perspective'),
-      },
+      // these are passed back to the user as part of each document handle
+      __handle: pick(options, ['resource', 'perspective']),
       __types: documentTypes,
     },
   })

package/src/hooks/helpers/createCallbackHook.test.tsx

@@ -1,7 +1,7 @@
 import {type SanityInstance} from '@sanity/sdk'
-import {renderHook} from '@testing-library/react'
 import {describe, expect, it, vi} from 'vitest'
 
+import {renderHook} from '../../../test/test-utils'
 import {ResourceProvider} from '../../context/ResourceProvider'
 import {createCallbackHook} from './createCallbackHook'
 
@@ -21,13 +21,7 @@ describe('createCallbackHook', () => {
     const useTestHook = createCallbackHook(testCallback)
 
     // Render the hook
-    const {result, rerender} = renderHook(() => useTestHook(), {
-      wrapper: ({children}) => (
-        <ResourceProvider projectId="p" dataset="d" fallback={null}>
-          {children}
-        </ResourceProvider>
-      ),
-    })
+    const {result, rerender} = renderHook(() => useTestHook())
 
     // Test the callback with parameters
     const result1 = result.current('test', 123)
@@ -44,13 +38,17 @@ describe('createCallbackHook', () => {
 
   it('should create new callback when instance changes', () => {
     // Create a test callback
-    const testCallback = (instance: SanityInstance) => instance.config.projectId
+    const testCallback = (instance: SanityInstance) => instance.config.studio?.projectId
 
     // Create and render our hook with first provider
     const useTestHook = createCallbackHook(testCallback)
     const {result, unmount} = renderHook(() => useTestHook(), {
       wrapper: ({children}) => (
-        <ResourceProvider projectId="p1" dataset="d" fallback={null}>
+        <ResourceProvider
+          studio={{projectId: 'p1'}}
+          resource={{projectId: 'p1', dataset: 'd'}}
+          fallback={null}
+        >
           {children}
         </ResourceProvider>
       ),
@@ -66,7 +64,11 @@ describe('createCallbackHook', () => {
     // Re-render with different provider configuration
     const {result: result2} = renderHook(() => useTestHook(), {
       wrapper: ({children}) => (
-        <ResourceProvider projectId="p2" dataset="d" fallback={null}>
+        <ResourceProvider
+          studio={{projectId: 'p2'}}
+          resource={{projectId: 'p2', dataset: 'd'}}
+          fallback={null}
+        >
           {children}
         </ResourceProvider>
       ),
@@ -85,7 +87,7 @@ describe('createCallbackHook', () => {
       method: string,
       data: object,
     ) => ({
-      url: `${instance.config.projectId}${path}`,
+      url: `${instance.config.studio?.projectId}${path}`,
       method,
       data,
     })
@@ -93,7 +95,11 @@ describe('createCallbackHook', () => {
     const useTestHook = createCallbackHook(testCallback)
     const {result} = renderHook(() => useTestHook(), {
       wrapper: ({children}) => (
-        <ResourceProvider projectId="p" dataset="d" fallback={null}>
+        <ResourceProvider
+          studio={{projectId: 'p'}}
+          resource={{projectId: 'p', dataset: 'd'}}
+          fallback={null}
+        >
           {children}
         </ResourceProvider>
       ),