chore: update sdk version (#28)

* chore: updated SDK packages & implementations

* fix: fix hook names in examples

* chore: make it RC

Author: colepeters

apps/sdk-explorer/package.json

@@ -14,8 +14,8 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.5.7",
     "@sanity/logos": "^2.1.13",
-    "@sanity/sdk": "0.0.0-alpha.18",
-    "@sanity/sdk-react": "0.0.0-alpha.19",
+    "@sanity/sdk": "^0.0.0-rc",
+    "@sanity/sdk-react": "^0.0.0-rc",
     "@sanity/types": "^3.72.1",
     "@sanity/ui": "^2.11.4",
     "@tailwindcss/vite": "^4.0.0",

apps/sdk-explorer/src/Home.tsx

@@ -46,23 +46,23 @@ export default function Home(): JSX.Element {
               to="/document-collections/document-table"
               title="Document table"
               description="A tabular rendering of documents and their content"
-              hooks={['usePaginatedList', 'useProjection']}
+              hooks={['usePaginatedDocuments', 'useProjection']}
               styling="Tailwind"
               img={DocumentTableImage}
             />
             <ExampleCard
               to="/document-collections/preview-list"
               title="Preview list"
               description="A list of document previews"
-              hooks={['useInfiniteList', 'useProjection']}
+              hooks={['useDocuments', 'useProjection']}
               styling="Sanity UI"
               img={PreviewListImage}
             />
             <ExampleCard
               to="/document-collections/preview-grid"
               title="Preview grid"
               description="A grid of document previews"
-              hooks={['useInfiniteList', 'useProjection']}
+              hooks={['useDocuments', 'useProjection']}
               styling="Tailwind"
               img={PreviewGridImage}
             />

apps/sdk-explorer/src/document-collections/DocumentTable/DocumentTable.tsx

@@ -1,12 +1,12 @@
 import './styles.css'
 
-import {DocumentHandle, usePaginatedList, useProjection} from '@sanity/sdk-react'
+import {DocumentHandle, usePaginatedDocuments, useProjection} from '@sanity/sdk-react'
 import {type JSX, useRef} from 'react'
 
 import ExampleLayout from '../../ExampleLayout'
 
 interface MovieProjectionResults {
-  results: {
+  data: {
     title: string
     posterImage: string
     cast: string
@@ -19,9 +19,9 @@ function DocumentRow({document}: {document: DocumentHandle}) {
   const ref = useRef(null)
 
   const {
-    results: {title, posterImage, cast, popularity, releaseDate},
+    data: {title, posterImage, cast, popularity, releaseDate},
   }: MovieProjectionResults = useProjection({
-    document,
+    ...document,
     ref,
     // In our projection, we will:
     // 1. Get the title of the movie
@@ -53,7 +53,7 @@ function DocumentRow({document}: {document: DocumentHandle}) {
 
 export default function DocumentTable(): JSX.Element {
   const {data, currentPage, totalPages, nextPage, previousPage, hasNextPage, hasPreviousPage} =
-    usePaginatedList({
+    usePaginatedDocuments({
       filter: '_type == "movie"',
       pageSize: 6,
       orderings: [{field: 'releaseDate', direction: 'desc'}],
@@ -63,9 +63,9 @@ export default function DocumentTable(): JSX.Element {
     <ExampleLayout
       title="Document table"
       codeUrl="https://github.com/sanity-io/sdk-examples/blob/main/apps/sdk-explorer/src/document-collections/DocumentTable/DocumentTable.tsx"
-      hooks={['usePaginatedList', 'useProjection']}
+      hooks={['usePaginatedDocuments', 'useProjection']}
       styling="Tailwind"
-      summary="This example uses the usePaginatedList hook to retrieve a paginated collection of documents with six items per page, in addition to state and functions to control the pagination. The useProjection hook is used to retrieve contents and create projections from each document. Each document and its content and projections are then rendered in a table row."
+      summary="This example uses the usePaginatedDocuments hook to retrieve a paginated collection of documents with six items per page, in addition to state and functions to control the pagination. The useProjection hook is used to retrieve contents and create projections from each document. Each document and its content and projections are then rendered in a table row."
     >
       <table className="w-full text-sm border-collapse">
         <thead>
@@ -89,7 +89,7 @@ export default function DocumentTable(): JSX.Element {
         </thead>
         <tbody>
           {data.map((document) => (
-            <DocumentRow key={document._id} document={document} />
+            <DocumentRow key={document.documentId} document={document} />
           ))}
         </tbody>
       </table>

apps/sdk-explorer/src/document-collections/PreviewGrid/PreviewGrid.tsx

@@ -1,20 +1,19 @@
 import './styles.css'
 
 import {DocumentHandle} from '@sanity/sdk'
-import {useInfiniteList, useProjection} from '@sanity/sdk-react'
+import {useDocuments, useProjection} from '@sanity/sdk-react'
 import {Spinner} from '@sanity/ui'
 import {type JSX, Suspense, useRef} from 'react'
 
 import ExampleLayout from '../../ExampleLayout'
 
 // @todo replace with type from SDK
 interface ProjectionResults {
-  results: {
+  data: {
     title: string
     cast: string
     posterImage: string
   }
-  isPending: boolean
 }
 
 // The DocumentPreview component uses the `usePreview` hook to render a document preview interface
@@ -26,9 +25,9 @@ function DocumentPreview({document}: {document: DocumentHandle}): JSX.Element {
   // Project the title, first 2 cast members, and poster image values for the document,
   // plus an `isPending` flag to indicate if projection value resolutions are pending
   const {
-    results: {title, cast, posterImage},
+    data: {title, cast, posterImage},
   }: ProjectionResults = useProjection({
-    document,
+    ...document,
     ref,
     projection: `{
       title,
@@ -69,7 +68,7 @@ function DocumentPreview({document}: {document: DocumentHandle}): JSX.Element {
 function PreviewGrid(): JSX.Element {
   // Use the `useDocuments` hook to return an index of document handles for all of our 'movie' type documents
   // Sort the documents by the release date
-  const {data: movies} = useInfiniteList({
+  const {data: movies} = useDocuments({
     filter: '_type == "movie"',
     orderings: [{field: 'releaseDate', direction: 'desc'}],
   })
@@ -78,14 +77,14 @@ function PreviewGrid(): JSX.Element {
     <ExampleLayout
       title="Preview grid"
       codeUrl="https://github.com/sanity-io/sdk-examples/blob/main/apps/sdk-explorer/src/document-collections/PreviewGrid/PreviewGrid.tsx"
-      hooks={['useInfiniteList', 'useProjection']}
+      hooks={['useDocuments', 'useProjection']}
       styling="Tailwind"
-      summary="This example uses the useInfiniteList hook to retrieve a collection of documents. That collection is then mapped over, with each document passed to a component that uses the useProjection hook to retrieve each document’s title and poster image, and to create a projection of the first three listed cast members. The results are displayed in a grid."
+      summary="This example uses the useDocuments hook to retrieve a collection of documents. That collection is then mapped over, with each document passed to a component that uses the useProjection hook to retrieve each document’s title and poster image, and to create a projection of the first three listed cast members. The results are displayed in a grid."
     >
       <div className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {movies.map((movie) => (
-          <Suspense key={movie._id} fallback={<Spinner />}>
-            <DocumentPreview key={movie._id} document={movie} />
+          <Suspense key={movie.documentId} fallback={<Spinner />}>
+            <DocumentPreview document={movie} />
           </Suspense>
         ))}
       </div>

apps/sdk-explorer/src/document-collections/PreviewList/PreviewList.tsx

@@ -1,5 +1,5 @@
 import {DocumentHandle} from '@sanity/sdk'
-import {useInfiniteList, useProjection} from '@sanity/sdk-react'
+import {useDocuments, useProjection} from '@sanity/sdk-react'
 import {Button, Card, Flex, Inline, Spinner, Stack, Text} from '@sanity/ui'
 import {type JSX, Suspense, useRef} from 'react'
 
@@ -17,12 +17,11 @@ function Loading() {
 
 // @todo replace with type from SDK
 interface ProjectionResults {
-  results: {
+  data: {
     title: string
     cast: string
     posterImage: string
   }
-  isPending: boolean
 }
 
 // The DocumentPreview component uses the `usePreview` hook to render a document preview interface
@@ -34,9 +33,9 @@ function DocumentPreview({document}: {document: DocumentHandle}) {
   // Project the title, first 3 cast mambers, and post image values for the document,
   // plus an `isPending` flag to indicate if projection value resolutions are pending
   const {
-    results: {title, cast, posterImage},
+    data: {title, cast, posterImage},
   }: ProjectionResults = useProjection({
-    document,
+    ...document,
     ref,
     projection: `{
       title,
@@ -70,31 +69,23 @@ function DocumentPreview({document}: {document: DocumentHandle}) {
 function PreviewList(): JSX.Element {
   // Use the `useDocuments` hook to return an index of document handles for all of our 'movie' type documents
   // Sort the documents by the the release date
-  const {data: movies, isPending} = useInfiniteList({
+  const {data: movies} = useDocuments({
     filter: '_type == "movie"',
     orderings: [{field: 'releaseDate', direction: 'desc'}],
   })
 
-  if (isPending) {
-    return (
-      <Flex align="center" justify="center" padding={5}>
-        <Spinner />
-      </Flex>
-    )
-  }
-
   return (
     <ExampleLayout
       title="Preview list"
       codeUrl="https://github.com/sanity-io/sdk-examples/blob/main/apps/sdk-explorer/src/document-collections/PreviewList/PreviewList.tsx"
-      hooks={['useInfiniteList', 'useProjection']}
+      hooks={['useDocuments', 'useProjection']}
       styling="Sanity UI"
-      summary="This example uses the useInfiniteList hook to retrieve a collection of documents. That collection is then mapped over, with each document passed to a component that uses the useProjection hook to retrieve each document’s title and poster image, and to create a projection of the first three listed cast members."
+      summary="This example uses the useDocuments hook to retrieve a collection of documents. That collection is then mapped over, with each document passed to a component that uses the useProjection hook to retrieve each document’s title and poster image, and to create a projection of the first three listed cast members."
     >
       <Stack>
         {movies.map((movie) => (
-          <Suspense key={movie._id} fallback={<Loading />}>
-            <DocumentPreview key={movie._id} document={movie} />
+          <Suspense key={movie.documentId} fallback={<Loading />}>
+            <DocumentPreview document={movie} />
           </Suspense>
         ))}
       </Stack>

apps/sdk-explorer/src/main.tsx

@@ -1,7 +1,6 @@
 import './inter.css'
 
-import {createSanityInstance} from '@sanity/sdk'
-import {SanityProvider} from '@sanity/sdk-react'
+import {SanityApp} from '@sanity/sdk-react'
 import {Flex, Spinner, ThemeProvider} from '@sanity/ui'
 import {buildTheme} from '@sanity/ui/theme'
 import {StrictMode, Suspense} from 'react'
@@ -12,10 +11,10 @@ import App from './App.tsx'
 
 const theme = buildTheme()
 
-const sanityInstance = createSanityInstance({
+const sanityConfig = {
   projectId: 'v28v5k8m',
   dataset: 'production',
-})
+}
 
 const GlobalStyle = createGlobalStyle`
   body {
@@ -36,9 +35,9 @@ createRoot(document.getElementById('root')!).render(
     <GlobalStyle />
     <ThemeProvider theme={theme}>
       <Suspense fallback={<Loading />}>
-        <SanityProvider sanityInstances={[sanityInstance]}>
+        <SanityApp config={[sanityConfig]} fallback={<Loading />}>
           <App />
-        </SanityProvider>
+        </SanityApp>
       </Suspense>
     </ThemeProvider>
   </StrictMode>,