@sanity/sdk-react 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/index.d.ts +302 -273
- package/dist/index.js +14 -7
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/_exports/sdk-react.ts +8 -8
- package/src/hooks/document/useApplyDocumentActions.ts +4 -4
- package/src/hooks/document/useDocument.test.ts +8 -10
- package/src/hooks/document/useDocument.ts +50 -33
- package/src/hooks/document/useDocumentEvent.ts +2 -2
- package/src/hooks/document/useDocumentSyncStatus.ts +1 -1
- package/src/hooks/document/useEditDocument.ts +15 -15
- package/src/hooks/documents/useDocuments.ts +5 -5
- package/src/hooks/paginatedDocuments/usePaginatedDocuments.ts +5 -5
- package/src/hooks/preview/{usePreview.test.tsx → useDocumentPreview.test.tsx} +5 -5
- package/src/hooks/preview/{usePreview.tsx → useDocumentPreview.tsx} +11 -8
- package/src/hooks/projection/{useProjection.test.tsx → useDocumentProjection.test.tsx} +5 -5
- package/src/hooks/projection/{useProjection.ts → useDocumentProjection.ts} +22 -17
- package/src/hooks/query/useQuery.ts +5 -5
package/dist/index.d.ts
CHANGED
|
@@ -27,7 +27,7 @@ import {ReleaseDocument} from '@sanity/sdk'
|
|
|
27
27
|
import {SanityClient} from '@sanity/client'
|
|
28
28
|
import {SanityConfig} from '@sanity/sdk'
|
|
29
29
|
import {SanityDocument} from '@sanity/types'
|
|
30
|
-
import {
|
|
30
|
+
import {SanityDocument as SanityDocument_2} from 'groq'
|
|
31
31
|
import {SanityInstance} from '@sanity/sdk'
|
|
32
32
|
import {SanityProject} from '@sanity/sdk'
|
|
33
33
|
import {SanityProject as SanityProject_2} from '@sanity/client'
|
|
@@ -138,7 +138,7 @@ declare interface DocumentInteractionHistory {
|
|
|
138
138
|
/**
|
|
139
139
|
* Configuration options for the useDocuments hook
|
|
140
140
|
*
|
|
141
|
-
* @
|
|
141
|
+
* @public
|
|
142
142
|
* @category Types
|
|
143
143
|
*/
|
|
144
144
|
export declare interface DocumentsOptions<
|
|
@@ -172,7 +172,7 @@ export declare interface DocumentsOptions<
|
|
|
172
172
|
/**
|
|
173
173
|
* Return value from the useDocuments hook
|
|
174
174
|
*
|
|
175
|
-
* @
|
|
175
|
+
* @public
|
|
176
176
|
* @category Types
|
|
177
177
|
*/
|
|
178
178
|
export declare interface DocumentsResponse<
|
|
@@ -261,7 +261,7 @@ export declare interface NavigateToStudioResult {
|
|
|
261
261
|
/**
|
|
262
262
|
* Configuration options for the usePaginatedDocuments hook
|
|
263
263
|
*
|
|
264
|
-
* @
|
|
264
|
+
* @public
|
|
265
265
|
* @category Types
|
|
266
266
|
*/
|
|
267
267
|
export declare interface PaginatedDocumentsOptions<
|
|
@@ -291,7 +291,7 @@ export declare interface PaginatedDocumentsOptions<
|
|
|
291
291
|
/**
|
|
292
292
|
* Return value from the usePaginatedDocuments hook
|
|
293
293
|
*
|
|
294
|
-
* @
|
|
294
|
+
* @public
|
|
295
295
|
* @category Types
|
|
296
296
|
*/
|
|
297
297
|
export declare interface PaginatedDocumentsResponse<
|
|
@@ -585,7 +585,7 @@ declare type UseActiveReleases = {
|
|
|
585
585
|
export declare const useActiveReleases: UseActiveReleases
|
|
586
586
|
|
|
587
587
|
/**
|
|
588
|
-
* @
|
|
588
|
+
* @public
|
|
589
589
|
*/
|
|
590
590
|
declare interface UseApplyDocumentActions {
|
|
591
591
|
(): <
|
|
@@ -597,11 +597,11 @@ declare interface UseApplyDocumentActions {
|
|
|
597
597
|
| DocumentAction<TDocumentType, TDataset, TProjectId>
|
|
598
598
|
| DocumentAction<TDocumentType, TDataset, TProjectId>[],
|
|
599
599
|
options?: ApplyDocumentActionsOptions,
|
|
600
|
-
) => Promise<ActionsResult<
|
|
600
|
+
) => Promise<ActionsResult<SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`>>>
|
|
601
601
|
}
|
|
602
602
|
|
|
603
603
|
/**
|
|
604
|
-
* @
|
|
604
|
+
* @public
|
|
605
605
|
*
|
|
606
606
|
* Provides a stable callback function for applying one or more document actions.
|
|
607
607
|
*
|
|
@@ -840,7 +840,9 @@ declare interface UseDocument {
|
|
|
840
840
|
/** @internal */
|
|
841
841
|
<TDocumentType extends string, TDataset extends string, TProjectId extends string = string>(
|
|
842
842
|
options: DocumentOptions<undefined, TDocumentType, TDataset, TProjectId>,
|
|
843
|
-
):
|
|
843
|
+
): {
|
|
844
|
+
data: SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`> | null
|
|
845
|
+
}
|
|
844
846
|
/** @internal */
|
|
845
847
|
<
|
|
846
848
|
TPath extends string,
|
|
@@ -849,15 +851,21 @@ declare interface UseDocument {
|
|
|
849
851
|
TProjectId extends string = string,
|
|
850
852
|
>(
|
|
851
853
|
options: DocumentOptions<TPath, TDocumentType, TDataset, TProjectId>,
|
|
852
|
-
):
|
|
854
|
+
): {
|
|
855
|
+
data: JsonMatch<SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`>, TPath> | undefined
|
|
856
|
+
}
|
|
853
857
|
/** @internal */
|
|
854
|
-
<TData>(options: DocumentOptions<undefined>):
|
|
858
|
+
<TData>(options: DocumentOptions<undefined>): {
|
|
859
|
+
data: TData | null
|
|
860
|
+
}
|
|
855
861
|
/** @internal */
|
|
856
|
-
<TData>(options: DocumentOptions<string>):
|
|
862
|
+
<TData>(options: DocumentOptions<string>): {
|
|
863
|
+
data: TData | undefined
|
|
864
|
+
}
|
|
857
865
|
/**
|
|
858
866
|
* ## useDocument via Type Inference (Recommended)
|
|
859
867
|
*
|
|
860
|
-
* @
|
|
868
|
+
* @public
|
|
861
869
|
*
|
|
862
870
|
* The preferred way to use this hook when working with Sanity Typegen.
|
|
863
871
|
*
|
|
@@ -892,7 +900,7 @@ declare interface UseDocument {
|
|
|
892
900
|
* }
|
|
893
901
|
*
|
|
894
902
|
* function ProductView({doc}: ProductViewProps) {
|
|
895
|
-
* const product = useDocument({...doc}) // Fully typed product
|
|
903
|
+
* const {data: product} = useDocument({...doc}) // Fully typed product
|
|
896
904
|
* return <h1>{product.title ?? 'Untitled'}</h1>
|
|
897
905
|
* }
|
|
898
906
|
* ```
|
|
@@ -906,7 +914,7 @@ declare interface UseDocument {
|
|
|
906
914
|
* }
|
|
907
915
|
*
|
|
908
916
|
* function ProductTitle({doc}: ProductTitleProps) {
|
|
909
|
-
* const title = useDocument({
|
|
917
|
+
* const {data: title} = useDocument({
|
|
910
918
|
* ...doc,
|
|
911
919
|
* path: 'title' // Returns just the title field
|
|
912
920
|
* })
|
|
@@ -924,10 +932,16 @@ declare interface UseDocument {
|
|
|
924
932
|
>(
|
|
925
933
|
options: DocumentOptions<TPath, TDocumentType, TDataset, TProjectId>,
|
|
926
934
|
): TPath extends string
|
|
927
|
-
?
|
|
928
|
-
|
|
935
|
+
? {
|
|
936
|
+
data:
|
|
937
|
+
| JsonMatch<SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`>, TPath>
|
|
938
|
+
| undefined
|
|
939
|
+
}
|
|
940
|
+
: {
|
|
941
|
+
data: SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`> | null
|
|
942
|
+
}
|
|
929
943
|
/**
|
|
930
|
-
* @
|
|
944
|
+
* @public
|
|
931
945
|
*
|
|
932
946
|
* ## useDocument via Explicit Types
|
|
933
947
|
*
|
|
@@ -965,7 +979,7 @@ declare interface UseDocument {
|
|
|
965
979
|
* }
|
|
966
980
|
*
|
|
967
981
|
* function BookView({doc}: BookViewProps) {
|
|
968
|
-
* const book = useDocument<Book>({...doc})
|
|
982
|
+
* const {data: book} = useDocument<Book>({...doc})
|
|
969
983
|
* return <h1>{book?.title ?? 'Untitled'} by {book?.author ?? 'Unknown'}</h1>
|
|
970
984
|
* }
|
|
971
985
|
* ```
|
|
@@ -979,7 +993,7 @@ declare interface UseDocument {
|
|
|
979
993
|
* }
|
|
980
994
|
*
|
|
981
995
|
* function BookTitle({doc}: BookTitleProps) {
|
|
982
|
-
* const title = useDocument<string>({...doc, path: 'title'})
|
|
996
|
+
* const {data: title} = useDocument<string>({...doc, path: 'title'})
|
|
983
997
|
* return <h1>{title ?? 'Untitled'}</h1>
|
|
984
998
|
* }
|
|
985
999
|
* ```
|
|
@@ -988,15 +1002,23 @@ declare interface UseDocument {
|
|
|
988
1002
|
*/
|
|
989
1003
|
<TData, TPath extends string>(
|
|
990
1004
|
options: DocumentOptions<TPath>,
|
|
991
|
-
): TPath extends string
|
|
1005
|
+
): TPath extends string
|
|
1006
|
+
? {
|
|
1007
|
+
data: TData | undefined
|
|
1008
|
+
}
|
|
1009
|
+
: {
|
|
1010
|
+
data: TData | null
|
|
1011
|
+
}
|
|
992
1012
|
/**
|
|
993
1013
|
* @internal
|
|
994
1014
|
*/
|
|
995
|
-
(options: DocumentOptions):
|
|
1015
|
+
(options: DocumentOptions): {
|
|
1016
|
+
data: unknown
|
|
1017
|
+
}
|
|
996
1018
|
}
|
|
997
1019
|
|
|
998
1020
|
/**
|
|
999
|
-
* @
|
|
1021
|
+
* @public
|
|
1000
1022
|
* Reads and subscribes to a document's realtime state, incorporating both local and remote changes.
|
|
1001
1023
|
*
|
|
1002
1024
|
* This hook comes in two main flavors to suit your needs:
|
|
@@ -1013,7 +1035,7 @@ declare interface UseDocument {
|
|
|
1013
1035
|
* - Realtime updates aren't critical
|
|
1014
1036
|
* - You want better performance
|
|
1015
1037
|
*
|
|
1016
|
-
* …consider using {@link
|
|
1038
|
+
* …consider using {@link useDocumentProjection} or {@link useQuery} instead. These hooks are more efficient
|
|
1017
1039
|
* for read-heavy applications.
|
|
1018
1040
|
*
|
|
1019
1041
|
* @function
|
|
@@ -1022,7 +1044,7 @@ export declare const useDocument: UseDocument
|
|
|
1022
1044
|
|
|
1023
1045
|
/**
|
|
1024
1046
|
*
|
|
1025
|
-
* @
|
|
1047
|
+
* @public
|
|
1026
1048
|
*
|
|
1027
1049
|
* Subscribes an event handler to events in your application's document store.
|
|
1028
1050
|
*
|
|
@@ -1081,7 +1103,7 @@ export declare function useDocumentEvent<
|
|
|
1081
1103
|
>(options: UseDocumentEventOptions<TDataset, TProjectId>): void
|
|
1082
1104
|
|
|
1083
1105
|
/**
|
|
1084
|
-
* @
|
|
1106
|
+
* @public
|
|
1085
1107
|
*/
|
|
1086
1108
|
declare interface UseDocumentEventOptions<
|
|
1087
1109
|
TDataset extends string = string,
|
|
@@ -1171,12 +1193,246 @@ export declare function useDocumentPermissions(
|
|
|
1171
1193
|
actionOrActions: DocumentAction | DocumentAction[],
|
|
1172
1194
|
): DocumentPermissionsResult
|
|
1173
1195
|
|
|
1196
|
+
/**
|
|
1197
|
+
* @public
|
|
1198
|
+
*
|
|
1199
|
+
* Returns the preview values of a document (specified via a `DocumentHandle`),
|
|
1200
|
+
* including the document’s `title`, `subtitle`, `media`, and `status`. These values are live and will update in realtime.
|
|
1201
|
+
* To reduce unnecessary network requests for resolving the preview values, an optional `ref` can be passed to the hook so that preview
|
|
1202
|
+
* resolution will only occur if the `ref` is intersecting the current viewport.
|
|
1203
|
+
*
|
|
1204
|
+
* @category Documents
|
|
1205
|
+
* @param options - The document handle for the document you want to resolve preview values for, and an optional ref
|
|
1206
|
+
* @returns The preview values for the given document and a boolean to indicate whether the resolution is pending
|
|
1207
|
+
*
|
|
1208
|
+
* @example Combining with useDocuments to render a collection of document previews
|
|
1209
|
+
* ```
|
|
1210
|
+
* // PreviewComponent.jsx
|
|
1211
|
+
* export default function PreviewComponent({ document }) {
|
|
1212
|
+
* const { data: { title, subtitle, media }, isPending } = useDocumentPreview({ document })
|
|
1213
|
+
* return (
|
|
1214
|
+
* <article style={{ opacity: isPending ? 0.5 : 1}}>
|
|
1215
|
+
* {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
|
|
1216
|
+
* <h2>{title}</h2>
|
|
1217
|
+
* <p>{subtitle}</p>
|
|
1218
|
+
* </article>
|
|
1219
|
+
* )
|
|
1220
|
+
* }
|
|
1221
|
+
*
|
|
1222
|
+
* // DocumentList.jsx
|
|
1223
|
+
* const { data } = useDocuments({ filter: '_type == "movie"' })
|
|
1224
|
+
* return (
|
|
1225
|
+
* <div>
|
|
1226
|
+
* <h1>Movies</h1>
|
|
1227
|
+
* <ul>
|
|
1228
|
+
* {data.map(movie => (
|
|
1229
|
+
* <li key={movie._id}>
|
|
1230
|
+
* <Suspense fallback='Loading…'>
|
|
1231
|
+
* <PreviewComponent document={movie} />
|
|
1232
|
+
* </Suspense>
|
|
1233
|
+
* </li>
|
|
1234
|
+
* ))}
|
|
1235
|
+
* </ul>
|
|
1236
|
+
* </div>
|
|
1237
|
+
* )
|
|
1238
|
+
* ```
|
|
1239
|
+
*/
|
|
1240
|
+
export declare function useDocumentPreview({
|
|
1241
|
+
ref,
|
|
1242
|
+
...docHandle
|
|
1243
|
+
}: useDocumentPreviewOptions): useDocumentPreviewResults
|
|
1244
|
+
|
|
1245
|
+
/**
|
|
1246
|
+
* @public
|
|
1247
|
+
* @category Types
|
|
1248
|
+
*/
|
|
1249
|
+
export declare interface useDocumentPreviewOptions extends DocumentHandle {
|
|
1250
|
+
/**
|
|
1251
|
+
* Optional ref object to track visibility. When provided, preview resolution
|
|
1252
|
+
* only occurs when the referenced element is visible in the viewport.
|
|
1253
|
+
*/
|
|
1254
|
+
ref?: React.RefObject<unknown>
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
/**
|
|
1258
|
+
* @public
|
|
1259
|
+
* @category Types
|
|
1260
|
+
*/
|
|
1261
|
+
export declare interface useDocumentPreviewResults {
|
|
1262
|
+
/** The results of resolving the document’s preview values */
|
|
1263
|
+
data: PreviewValue
|
|
1264
|
+
/** True when preview values are being refreshed */
|
|
1265
|
+
isPending: boolean
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
/**
|
|
1269
|
+
* @public
|
|
1270
|
+
*
|
|
1271
|
+
* Returns the projected values of a document based on the provided projection string.
|
|
1272
|
+
* These values are live and will update in realtime.
|
|
1273
|
+
* To optimize network requests, an optional `ref` can be passed to only resolve the projection
|
|
1274
|
+
* when the referenced element is intersecting the viewport.
|
|
1275
|
+
*
|
|
1276
|
+
* @category Documents
|
|
1277
|
+
* @remarks
|
|
1278
|
+
* This hook has multiple signatures allowing for fine-grained control over type inference:
|
|
1279
|
+
* - Using Typegen: Infers the return type based on the `documentType`, `dataset`, `projectId`, and `projection`.
|
|
1280
|
+
* - Using explicit type parameter: Allows specifying a custom return type `TData`.
|
|
1281
|
+
*
|
|
1282
|
+
* @param options - An object containing the `DocumentHandle` properties (`documentId`, `documentType`, etc.), the `projection` string, optional `params`, and an optional `ref`.
|
|
1283
|
+
* @returns An object containing the projection results (`data`) and a boolean indicating whether the resolution is pending (`isPending`). Note: Suspense handles initial loading states; `data` being `undefined` after initial loading means the document doesn't exist or the projection yielded no result.
|
|
1284
|
+
*/
|
|
1285
|
+
/**
|
|
1286
|
+
* @public
|
|
1287
|
+
* Fetch a projection, relying on Typegen for the return type based on the handle and projection.
|
|
1288
|
+
*
|
|
1289
|
+
* @category Documents
|
|
1290
|
+
* @param options - Options including the document handle properties (`documentId`, `documentType`, etc.) and the `projection`.
|
|
1291
|
+
* @returns The projected data, typed based on Typegen.
|
|
1292
|
+
*
|
|
1293
|
+
* @example Using Typegen for a book preview
|
|
1294
|
+
* ```tsx
|
|
1295
|
+
* // ProjectionComponent.tsx
|
|
1296
|
+
* import {useDocumentProjection, type DocumentHandle} from '@sanity/sdk-react'
|
|
1297
|
+
* import {useRef} from 'react'
|
|
1298
|
+
* import {defineProjection} from 'groq'
|
|
1299
|
+
*
|
|
1300
|
+
* // Define props using DocumentHandle with the specific document type
|
|
1301
|
+
* type ProjectionComponentProps = {
|
|
1302
|
+
* doc: DocumentHandle<'book'> // Typegen knows 'book'
|
|
1303
|
+
* }
|
|
1304
|
+
*
|
|
1305
|
+
* // This is required for typegen to generate the correct return type
|
|
1306
|
+
* const myProjection = defineProjection(`{
|
|
1307
|
+
* title,
|
|
1308
|
+
* 'coverImage': cover.asset->url,
|
|
1309
|
+
* 'authors': array::join(authors[]->{'name': firstName + ' ' + lastName}.name, ', ')
|
|
1310
|
+
* }`)
|
|
1311
|
+
*
|
|
1312
|
+
* export default function ProjectionComponent({ doc }: ProjectionComponentProps) {
|
|
1313
|
+
* const ref = useRef(null) // Optional ref to track viewport intersection for lazy loading
|
|
1314
|
+
*
|
|
1315
|
+
* // Spread the doc handle into the options
|
|
1316
|
+
* // Typegen infers the return type based on 'book' and the projection
|
|
1317
|
+
* const { data } = useDocumentProjection({
|
|
1318
|
+
* ...doc, // Pass the handle properties
|
|
1319
|
+
* ref,
|
|
1320
|
+
* projection: myProjection,
|
|
1321
|
+
* })
|
|
1322
|
+
*
|
|
1323
|
+
* // Suspense handles initial load, check for data existence after
|
|
1324
|
+
* return (
|
|
1325
|
+
* <article ref={ref}>
|
|
1326
|
+
* <h2>{data.title ?? 'Untitled'}</h2>
|
|
1327
|
+
* {data.coverImage && <img src={data.coverImage} alt={data.title} />}
|
|
1328
|
+
* <p>{data.authors ?? 'Unknown authors'}</p>
|
|
1329
|
+
* </article>
|
|
1330
|
+
* )
|
|
1331
|
+
* }
|
|
1332
|
+
*
|
|
1333
|
+
* // Usage:
|
|
1334
|
+
* // import {createDocumentHandle} from '@sanity/sdk-react'
|
|
1335
|
+
* // const myDocHandle = createDocumentHandle({ documentId: 'book123', documentType: 'book' })
|
|
1336
|
+
* // <Suspense fallback='Loading preview...'>
|
|
1337
|
+
* // <ProjectionComponent doc={myDocHandle} />
|
|
1338
|
+
* // </Suspense>
|
|
1339
|
+
* ```
|
|
1340
|
+
*/
|
|
1341
|
+
export declare function useDocumentProjection<
|
|
1342
|
+
TProjection extends ValidProjection = ValidProjection,
|
|
1343
|
+
TDocumentType extends string = string,
|
|
1344
|
+
TDataset extends string = string,
|
|
1345
|
+
TProjectId extends string = string,
|
|
1346
|
+
>(
|
|
1347
|
+
options: useDocumentProjectionOptions<TProjection, TDocumentType, TDataset, TProjectId>,
|
|
1348
|
+
): useDocumentProjectionResults<
|
|
1349
|
+
SanityProjectionResult<TProjection, TDocumentType, `${TProjectId}.${TDataset}`>
|
|
1350
|
+
>
|
|
1351
|
+
|
|
1352
|
+
/**
|
|
1353
|
+
* @public
|
|
1354
|
+
* Fetch a projection with an explicitly defined return type `TData`.
|
|
1355
|
+
*
|
|
1356
|
+
* @param options - Options including the document handle properties (`documentId`, etc.) and the `projection`.
|
|
1357
|
+
* @returns The projected data, cast to the explicit type `TData`.
|
|
1358
|
+
*
|
|
1359
|
+
* @example Explicitly typing the projection result
|
|
1360
|
+
* ```tsx
|
|
1361
|
+
* import {useDocumentProjection, type DocumentHandle} from '@sanity/sdk-react'
|
|
1362
|
+
* import {useRef} from 'react'
|
|
1363
|
+
*
|
|
1364
|
+
* interface SimpleBookPreview {
|
|
1365
|
+
* title?: string;
|
|
1366
|
+
* authorName?: string;
|
|
1367
|
+
* }
|
|
1368
|
+
*
|
|
1369
|
+
* type BookPreviewProps = {
|
|
1370
|
+
* doc: DocumentHandle
|
|
1371
|
+
* }
|
|
1372
|
+
*
|
|
1373
|
+
* function BookPreview({ doc }: BookPreviewProps) {
|
|
1374
|
+
* const ref = useRef(null)
|
|
1375
|
+
* const { data } = useDocumentProjection<SimpleBookPreview>({
|
|
1376
|
+
* ...doc,
|
|
1377
|
+
* ref,
|
|
1378
|
+
* projection: `{ title, 'authorName': author->name }`
|
|
1379
|
+
* })
|
|
1380
|
+
*
|
|
1381
|
+
* return (
|
|
1382
|
+
* <div ref={ref}>
|
|
1383
|
+
* <h3>{data.title ?? 'No Title'}</h3>
|
|
1384
|
+
* <p>By: {data.authorName ?? 'Unknown'}</p>
|
|
1385
|
+
* </div>
|
|
1386
|
+
* )
|
|
1387
|
+
* }
|
|
1388
|
+
*
|
|
1389
|
+
* // Usage:
|
|
1390
|
+
* // import {createDocumentHandle} from '@sanity/sdk-react'
|
|
1391
|
+
* // const doc = createDocumentHandle({ documentId: 'abc', documentType: 'book' })
|
|
1392
|
+
* // <Suspense fallback='Loading...'>
|
|
1393
|
+
* // <BookPreview doc={doc} />
|
|
1394
|
+
* // </Suspense>
|
|
1395
|
+
* ```
|
|
1396
|
+
*/
|
|
1397
|
+
export declare function useDocumentProjection<TData extends object>(
|
|
1398
|
+
options: useDocumentProjectionOptions,
|
|
1399
|
+
): useDocumentProjectionResults<TData>
|
|
1400
|
+
|
|
1401
|
+
/**
|
|
1402
|
+
* @public
|
|
1403
|
+
* @category Types
|
|
1404
|
+
*/
|
|
1405
|
+
export declare interface useDocumentProjectionOptions<
|
|
1406
|
+
TProjection extends ValidProjection = ValidProjection,
|
|
1407
|
+
TDocumentType extends string = string,
|
|
1408
|
+
TDataset extends string = string,
|
|
1409
|
+
TProjectId extends string = string,
|
|
1410
|
+
> extends DocumentHandle<TDocumentType, TDataset, TProjectId> {
|
|
1411
|
+
/** The GROQ projection string */
|
|
1412
|
+
projection: TProjection
|
|
1413
|
+
/** Optional parameters for the projection query */
|
|
1414
|
+
params?: Record<string, unknown>
|
|
1415
|
+
/** Optional ref to track viewport intersection for lazy loading */
|
|
1416
|
+
ref?: React.RefObject<unknown>
|
|
1417
|
+
}
|
|
1418
|
+
|
|
1419
|
+
/**
|
|
1420
|
+
* @public
|
|
1421
|
+
* @category Types
|
|
1422
|
+
*/
|
|
1423
|
+
export declare interface useDocumentProjectionResults<TData> {
|
|
1424
|
+
/** The projected data */
|
|
1425
|
+
data: TData
|
|
1426
|
+
/** True if the projection is currently being resolved */
|
|
1427
|
+
isPending: boolean
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1174
1430
|
/**
|
|
1175
1431
|
* Retrieves batches of {@link DocumentHandle}s, narrowed by optional filters, text searches, and custom ordering,
|
|
1176
1432
|
* with infinite scrolling support. The number of document handles returned per batch is customizable,
|
|
1177
1433
|
* and additional batches can be loaded using the supplied `loadMore` function.
|
|
1178
1434
|
*
|
|
1179
|
-
* @
|
|
1435
|
+
* @public
|
|
1180
1436
|
* @category Documents
|
|
1181
1437
|
* @param options - Configuration options for the infinite list
|
|
1182
1438
|
* @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
|
|
@@ -1197,9 +1453,9 @@ export declare function useDocumentPermissions(
|
|
|
1197
1453
|
* } from '@sanity/sdk-react'
|
|
1198
1454
|
* import {Suspense} from 'react'
|
|
1199
1455
|
*
|
|
1200
|
-
* // Define a component to display a single document (using
|
|
1456
|
+
* // Define a component to display a single document (using useDocumentProjection for efficiency)
|
|
1201
1457
|
* function MyDocumentComponent({doc}: {doc: DocumentHandle}) {
|
|
1202
|
-
* const {data} =
|
|
1458
|
+
* const {data} = useDocumentProjection<{title?: string}>({
|
|
1203
1459
|
* ...doc, // Pass the full handle
|
|
1204
1460
|
* projection: '{title}'
|
|
1205
1461
|
* })
|
|
@@ -1335,13 +1591,13 @@ declare type UseDocumentSyncStatus = {
|
|
|
1335
1591
|
}
|
|
1336
1592
|
|
|
1337
1593
|
/**
|
|
1338
|
-
* @
|
|
1594
|
+
* @public
|
|
1339
1595
|
* @function
|
|
1340
1596
|
*/
|
|
1341
1597
|
export declare const useDocumentSyncStatus: UseDocumentSyncStatus
|
|
1342
1598
|
|
|
1343
1599
|
/**
|
|
1344
|
-
* @
|
|
1600
|
+
* @public
|
|
1345
1601
|
* Edit an entire document, relying on Typegen for the type.
|
|
1346
1602
|
*
|
|
1347
1603
|
* @param options - Document options including `documentId`, `documentType`, and optionally `projectId`/`dataset`.
|
|
@@ -1355,11 +1611,11 @@ export declare function useEditDocument<
|
|
|
1355
1611
|
>(
|
|
1356
1612
|
options: DocumentOptions<undefined, TDocumentType, TDataset, TProjectId>,
|
|
1357
1613
|
): (
|
|
1358
|
-
nextValue: Updater<
|
|
1359
|
-
) => Promise<ActionsResult<
|
|
1614
|
+
nextValue: Updater<SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`>>,
|
|
1615
|
+
) => Promise<ActionsResult<SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`>>>
|
|
1360
1616
|
|
|
1361
1617
|
/**
|
|
1362
|
-
* @
|
|
1618
|
+
* @public
|
|
1363
1619
|
* Edit a specific path within a document, relying on Typegen for the type.
|
|
1364
1620
|
*
|
|
1365
1621
|
* @param options - Document options including `documentId`, `documentType`, `path`, and optionally `projectId`/`dataset`.
|
|
@@ -1374,11 +1630,13 @@ export declare function useEditDocument<
|
|
|
1374
1630
|
>(
|
|
1375
1631
|
options: DocumentOptions<TPath, TDocumentType, TDataset, TProjectId>,
|
|
1376
1632
|
): (
|
|
1377
|
-
nextValue: Updater<
|
|
1378
|
-
|
|
1633
|
+
nextValue: Updater<
|
|
1634
|
+
JsonMatch<SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`>, TPath>
|
|
1635
|
+
>,
|
|
1636
|
+
) => Promise<ActionsResult<SanityDocument_2<TDocumentType, `${TProjectId}.${TDataset}`>>>
|
|
1379
1637
|
|
|
1380
1638
|
/**
|
|
1381
|
-
* @
|
|
1639
|
+
* @public
|
|
1382
1640
|
* Edit an entire document with an explicit type `TData`.
|
|
1383
1641
|
*
|
|
1384
1642
|
* @param options - Document options including `documentId` and optionally `projectId`/`dataset`.
|
|
@@ -1390,7 +1648,7 @@ export declare function useEditDocument<TData>(
|
|
|
1390
1648
|
): (nextValue: Updater<TData>) => Promise<ActionsResult>
|
|
1391
1649
|
|
|
1392
1650
|
/**
|
|
1393
|
-
* @
|
|
1651
|
+
* @public
|
|
1394
1652
|
* Edit a specific path within a document with an explicit type `TData`.
|
|
1395
1653
|
*
|
|
1396
1654
|
* @param options - Document options including `documentId`, `path`, and optionally `projectId`/`dataset`.
|
|
@@ -1609,7 +1867,7 @@ export declare function useNavigateToStudioDocument(
|
|
|
1609
1867
|
* with support for traditional paginated interfaces. The number of document handles returned per page is customizable,
|
|
1610
1868
|
* while page navigation is handled via the included navigation functions.
|
|
1611
1869
|
*
|
|
1612
|
-
* @
|
|
1870
|
+
* @public
|
|
1613
1871
|
* @category Documents
|
|
1614
1872
|
* @param options - Configuration options for the paginated list
|
|
1615
1873
|
* @returns An object containing the list of document handles, pagination details, and functions to navigate between pages
|
|
@@ -1627,14 +1885,14 @@ export declare function useNavigateToStudioDocument(
|
|
|
1627
1885
|
* type DatasetHandle,
|
|
1628
1886
|
* type DocumentHandle,
|
|
1629
1887
|
* type SortOrderingItem,
|
|
1630
|
-
*
|
|
1888
|
+
* useDocumentProjection
|
|
1631
1889
|
* } from '@sanity/sdk-react'
|
|
1632
1890
|
* import {Suspense} from 'react'
|
|
1633
1891
|
* import {ErrorBoundary} from 'react-error-boundary'
|
|
1634
1892
|
*
|
|
1635
1893
|
* // Define a component to display a single document row
|
|
1636
1894
|
* function MyTableRowComponent({doc}: {doc: DocumentHandle}) {
|
|
1637
|
-
* const {data} =
|
|
1895
|
+
* const {data} = useDocumentProjection<{title?: string}>({
|
|
1638
1896
|
* ...doc,
|
|
1639
1897
|
* projection: '{title}',
|
|
1640
1898
|
* })
|
|
@@ -1748,75 +2006,6 @@ declare type UsePerspective = {
|
|
|
1748
2006
|
*/
|
|
1749
2007
|
export declare const usePerspective: UsePerspective
|
|
1750
2008
|
|
|
1751
|
-
/**
|
|
1752
|
-
* @beta
|
|
1753
|
-
*
|
|
1754
|
-
* Returns the preview values of a document (specified via a `DocumentHandle`),
|
|
1755
|
-
* including the document’s `title`, `subtitle`, `media`, and `status`. These values are live and will update in realtime.
|
|
1756
|
-
* To reduce unnecessary network requests for resolving the preview values, an optional `ref` can be passed to the hook so that preview
|
|
1757
|
-
* resolution will only occur if the `ref` is intersecting the current viewport.
|
|
1758
|
-
*
|
|
1759
|
-
* @category Documents
|
|
1760
|
-
* @param options - The document handle for the document you want to resolve preview values for, and an optional ref
|
|
1761
|
-
* @returns The preview values for the given document and a boolean to indicate whether the resolution is pending
|
|
1762
|
-
*
|
|
1763
|
-
* @example Combining with useDocuments to render a collection of document previews
|
|
1764
|
-
* ```
|
|
1765
|
-
* // PreviewComponent.jsx
|
|
1766
|
-
* export default function PreviewComponent({ document }) {
|
|
1767
|
-
* const { data: { title, subtitle, media }, isPending } = usePreview({ document })
|
|
1768
|
-
* return (
|
|
1769
|
-
* <article style={{ opacity: isPending ? 0.5 : 1}}>
|
|
1770
|
-
* {media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
|
|
1771
|
-
* <h2>{title}</h2>
|
|
1772
|
-
* <p>{subtitle}</p>
|
|
1773
|
-
* </article>
|
|
1774
|
-
* )
|
|
1775
|
-
* }
|
|
1776
|
-
*
|
|
1777
|
-
* // DocumentList.jsx
|
|
1778
|
-
* const { data } = useDocuments({ filter: '_type == "movie"' })
|
|
1779
|
-
* return (
|
|
1780
|
-
* <div>
|
|
1781
|
-
* <h1>Movies</h1>
|
|
1782
|
-
* <ul>
|
|
1783
|
-
* {data.map(movie => (
|
|
1784
|
-
* <li key={movie._id}>
|
|
1785
|
-
* <Suspense fallback='Loading…'>
|
|
1786
|
-
* <PreviewComponent document={movie} />
|
|
1787
|
-
* </Suspense>
|
|
1788
|
-
* </li>
|
|
1789
|
-
* ))}
|
|
1790
|
-
* </ul>
|
|
1791
|
-
* </div>
|
|
1792
|
-
* )
|
|
1793
|
-
* ```
|
|
1794
|
-
*/
|
|
1795
|
-
export declare function usePreview({ref, ...docHandle}: UsePreviewOptions): UsePreviewResults
|
|
1796
|
-
|
|
1797
|
-
/**
|
|
1798
|
-
* @beta
|
|
1799
|
-
* @category Types
|
|
1800
|
-
*/
|
|
1801
|
-
export declare interface UsePreviewOptions extends DocumentHandle {
|
|
1802
|
-
/**
|
|
1803
|
-
* Optional ref object to track visibility. When provided, preview resolution
|
|
1804
|
-
* only occurs when the referenced element is visible in the viewport.
|
|
1805
|
-
*/
|
|
1806
|
-
ref?: React.RefObject<unknown>
|
|
1807
|
-
}
|
|
1808
|
-
|
|
1809
|
-
/**
|
|
1810
|
-
* @beta
|
|
1811
|
-
* @category Types
|
|
1812
|
-
*/
|
|
1813
|
-
export declare interface UsePreviewResults {
|
|
1814
|
-
/** The results of resolving the document’s preview values */
|
|
1815
|
-
data: PreviewValue
|
|
1816
|
-
/** True when preview values are being refreshed */
|
|
1817
|
-
isPending: boolean
|
|
1818
|
-
}
|
|
1819
|
-
|
|
1820
2009
|
declare type UseProject = {
|
|
1821
2010
|
/**
|
|
1822
2011
|
*
|
|
@@ -1847,166 +2036,6 @@ declare type UseProject = {
|
|
|
1847
2036
|
*/
|
|
1848
2037
|
export declare const useProject: UseProject
|
|
1849
2038
|
|
|
1850
|
-
/**
|
|
1851
|
-
* @public
|
|
1852
|
-
*
|
|
1853
|
-
* Returns the projected values of a document based on the provided projection string.
|
|
1854
|
-
* These values are live and will update in realtime.
|
|
1855
|
-
* To optimize network requests, an optional `ref` can be passed to only resolve the projection
|
|
1856
|
-
* when the referenced element is intersecting the viewport.
|
|
1857
|
-
*
|
|
1858
|
-
* @category Documents
|
|
1859
|
-
* @remarks
|
|
1860
|
-
* This hook has multiple signatures allowing for fine-grained control over type inference:
|
|
1861
|
-
* - Using Typegen: Infers the return type based on the `documentType`, `dataset`, `projectId`, and `projection`.
|
|
1862
|
-
* - Using explicit type parameter: Allows specifying a custom return type `TData`.
|
|
1863
|
-
*
|
|
1864
|
-
* @param options - An object containing the `DocumentHandle` properties (`documentId`, `documentType`, etc.), the `projection` string, optional `params`, and an optional `ref`.
|
|
1865
|
-
* @returns An object containing the projection results (`data`) and a boolean indicating whether the resolution is pending (`isPending`). Note: Suspense handles initial loading states; `data` being `undefined` after initial loading means the document doesn't exist or the projection yielded no result.
|
|
1866
|
-
*/
|
|
1867
|
-
/**
|
|
1868
|
-
* @beta
|
|
1869
|
-
* Fetch a projection, relying on Typegen for the return type based on the handle and projection.
|
|
1870
|
-
*
|
|
1871
|
-
* @category Documents
|
|
1872
|
-
* @param options - Options including the document handle properties (`documentId`, `documentType`, etc.) and the `projection`.
|
|
1873
|
-
* @returns The projected data, typed based on Typegen.
|
|
1874
|
-
*
|
|
1875
|
-
* @example Using Typegen for a book preview
|
|
1876
|
-
* ```tsx
|
|
1877
|
-
* // ProjectionComponent.tsx
|
|
1878
|
-
* import {useProjection, type DocumentHandle} from '@sanity/sdk-react'
|
|
1879
|
-
* import {useRef} from 'react'
|
|
1880
|
-
* import {defineProjection} from 'groq'
|
|
1881
|
-
*
|
|
1882
|
-
* // Define props using DocumentHandle with the specific document type
|
|
1883
|
-
* type ProjectionComponentProps = {
|
|
1884
|
-
* doc: DocumentHandle<'book'> // Typegen knows 'book'
|
|
1885
|
-
* }
|
|
1886
|
-
*
|
|
1887
|
-
* // This is required for typegen to generate the correct return type
|
|
1888
|
-
* const myProjection = defineProjection(`{
|
|
1889
|
-
* title,
|
|
1890
|
-
* 'coverImage': cover.asset->url,
|
|
1891
|
-
* 'authors': array::join(authors[]->{'name': firstName + ' ' + lastName}.name, ', ')
|
|
1892
|
-
* }`)
|
|
1893
|
-
*
|
|
1894
|
-
* export default function ProjectionComponent({ doc }: ProjectionComponentProps) {
|
|
1895
|
-
* const ref = useRef(null) // Optional ref to track viewport intersection for lazy loading
|
|
1896
|
-
*
|
|
1897
|
-
* // Spread the doc handle into the options
|
|
1898
|
-
* // Typegen infers the return type based on 'book' and the projection
|
|
1899
|
-
* const { data } = useProjection({
|
|
1900
|
-
* ...doc, // Pass the handle properties
|
|
1901
|
-
* ref,
|
|
1902
|
-
* projection: myProjection,
|
|
1903
|
-
* })
|
|
1904
|
-
*
|
|
1905
|
-
* // Suspense handles initial load, check for data existence after
|
|
1906
|
-
* return (
|
|
1907
|
-
* <article ref={ref}>
|
|
1908
|
-
* <h2>{data.title ?? 'Untitled'}</h2>
|
|
1909
|
-
* {data.coverImage && <img src={data.coverImage} alt={data.title} />}
|
|
1910
|
-
* <p>{data.authors ?? 'Unknown authors'}</p>
|
|
1911
|
-
* </article>
|
|
1912
|
-
* )
|
|
1913
|
-
* }
|
|
1914
|
-
*
|
|
1915
|
-
* // Usage:
|
|
1916
|
-
* // import {createDocumentHandle} from '@sanity/sdk-react'
|
|
1917
|
-
* // const myDocHandle = createDocumentHandle({ documentId: 'book123', documentType: 'book' })
|
|
1918
|
-
* // <Suspense fallback='Loading preview...'>
|
|
1919
|
-
* // <ProjectionComponent doc={myDocHandle} />
|
|
1920
|
-
* // </Suspense>
|
|
1921
|
-
* ```
|
|
1922
|
-
*/
|
|
1923
|
-
export declare function useProjection<
|
|
1924
|
-
TProjection extends ValidProjection = ValidProjection,
|
|
1925
|
-
TDocumentType extends string = string,
|
|
1926
|
-
TDataset extends string = string,
|
|
1927
|
-
TProjectId extends string = string,
|
|
1928
|
-
>(
|
|
1929
|
-
options: UseProjectionOptions<TProjection, TDocumentType, TDataset, TProjectId>,
|
|
1930
|
-
): UseProjectionResults<SanityProjectionResult<TProjection, TDocumentType, TDataset, TProjectId>>
|
|
1931
|
-
|
|
1932
|
-
/**
|
|
1933
|
-
* @beta
|
|
1934
|
-
* Fetch a projection with an explicitly defined return type `TData`.
|
|
1935
|
-
*
|
|
1936
|
-
* @param options - Options including the document handle properties (`documentId`, etc.) and the `projection`.
|
|
1937
|
-
* @returns The projected data, cast to the explicit type `TData`.
|
|
1938
|
-
*
|
|
1939
|
-
* @example Explicitly typing the projection result
|
|
1940
|
-
* ```tsx
|
|
1941
|
-
* import {useProjection, type DocumentHandle} from '@sanity/sdk-react'
|
|
1942
|
-
* import {useRef} from 'react'
|
|
1943
|
-
*
|
|
1944
|
-
* interface SimpleBookPreview {
|
|
1945
|
-
* title?: string;
|
|
1946
|
-
* authorName?: string;
|
|
1947
|
-
* }
|
|
1948
|
-
*
|
|
1949
|
-
* type BookPreviewProps = {
|
|
1950
|
-
* doc: DocumentHandle
|
|
1951
|
-
* }
|
|
1952
|
-
*
|
|
1953
|
-
* function BookPreview({ doc }: BookPreviewProps) {
|
|
1954
|
-
* const ref = useRef(null)
|
|
1955
|
-
* const { data } = useProjection<SimpleBookPreview>({
|
|
1956
|
-
* ...doc,
|
|
1957
|
-
* ref,
|
|
1958
|
-
* projection: `{ title, 'authorName': author->name }`
|
|
1959
|
-
* })
|
|
1960
|
-
*
|
|
1961
|
-
* return (
|
|
1962
|
-
* <div ref={ref}>
|
|
1963
|
-
* <h3>{data.title ?? 'No Title'}</h3>
|
|
1964
|
-
* <p>By: {data.authorName ?? 'Unknown'}</p>
|
|
1965
|
-
* </div>
|
|
1966
|
-
* )
|
|
1967
|
-
* }
|
|
1968
|
-
*
|
|
1969
|
-
* // Usage:
|
|
1970
|
-
* // import {createDocumentHandle} from '@sanity/sdk-react'
|
|
1971
|
-
* // const doc = createDocumentHandle({ documentId: 'abc', documentType: 'book' })
|
|
1972
|
-
* // <Suspense fallback='Loading...'>
|
|
1973
|
-
* // <BookPreview doc={doc} />
|
|
1974
|
-
* // </Suspense>
|
|
1975
|
-
* ```
|
|
1976
|
-
*/
|
|
1977
|
-
export declare function useProjection<TData extends object>(
|
|
1978
|
-
options: UseProjectionOptions,
|
|
1979
|
-
): UseProjectionResults<TData>
|
|
1980
|
-
|
|
1981
|
-
/**
|
|
1982
|
-
* @public
|
|
1983
|
-
* @category Types
|
|
1984
|
-
*/
|
|
1985
|
-
export declare interface UseProjectionOptions<
|
|
1986
|
-
TProjection extends ValidProjection = ValidProjection,
|
|
1987
|
-
TDocumentType extends string = string,
|
|
1988
|
-
TDataset extends string = string,
|
|
1989
|
-
TProjectId extends string = string,
|
|
1990
|
-
> extends DocumentHandle<TDocumentType, TDataset, TProjectId> {
|
|
1991
|
-
/** The GROQ projection string */
|
|
1992
|
-
projection: TProjection
|
|
1993
|
-
/** Optional parameters for the projection query */
|
|
1994
|
-
params?: Record<string, unknown>
|
|
1995
|
-
/** Optional ref to track viewport intersection for lazy loading */
|
|
1996
|
-
ref?: React.RefObject<unknown>
|
|
1997
|
-
}
|
|
1998
|
-
|
|
1999
|
-
/**
|
|
2000
|
-
* @public
|
|
2001
|
-
* @category Types
|
|
2002
|
-
*/
|
|
2003
|
-
export declare interface UseProjectionResults<TData> {
|
|
2004
|
-
/** The projected data */
|
|
2005
|
-
data: TData
|
|
2006
|
-
/** True if the projection is currently being resolved */
|
|
2007
|
-
isPending: boolean
|
|
2008
|
-
}
|
|
2009
|
-
|
|
2010
2039
|
declare type UseProjects = {
|
|
2011
2040
|
/**
|
|
2012
2041
|
*
|
|
@@ -2037,7 +2066,7 @@ declare type UseProjects = {
|
|
|
2037
2066
|
export declare const useProjects: UseProjects
|
|
2038
2067
|
|
|
2039
2068
|
/**
|
|
2040
|
-
* @
|
|
2069
|
+
* @public
|
|
2041
2070
|
* Executes a GROQ query, inferring the result type from the query string and options.
|
|
2042
2071
|
* Leverages Sanity Typegen if configured for enhanced type safety.
|
|
2043
2072
|
*
|
|
@@ -2099,13 +2128,13 @@ export declare function useQuery<
|
|
|
2099
2128
|
options: QueryOptions<TQuery, TDataset, TProjectId>,
|
|
2100
2129
|
): {
|
|
2101
2130
|
/** The query result, typed based on the GROQ query string */
|
|
2102
|
-
data: SanityQueryResult<TQuery, TDataset
|
|
2131
|
+
data: SanityQueryResult<TQuery, `${TProjectId}.${TDataset}`>
|
|
2103
2132
|
/** True if a query transition is in progress */
|
|
2104
2133
|
isPending: boolean
|
|
2105
2134
|
}
|
|
2106
2135
|
|
|
2107
2136
|
/**
|
|
2108
|
-
* @
|
|
2137
|
+
* @public
|
|
2109
2138
|
* Executes a GROQ query with an explicitly provided result type `TData`.
|
|
2110
2139
|
*
|
|
2111
2140
|
* @param options - Configuration for the query, including `query`, optional `params`, `projectId`, `dataset`, etc.
|