feat: update to App SDK 1.0.0 (#50)

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.29",
-    "@sanity/sdk-react": "0.0.0-alpha.29",
+    "@sanity/sdk": "^1.0.0",
+    "@sanity/sdk-react": "^1.0.0",
     "@sanity/types": "^3.72.1",
     "@sanity/ui": "^2.11.4",
     "@tailwindcss/vite": "^4.0.0",

apps/sdk-explorer/src/App.tsx

@@ -51,7 +51,7 @@ export default function App(): JSX.Element {
                   <a href="/">Home</a>
                 </Text>
                 <Text weight="medium" size={1}>
-                  <a href="https://sdk-docs.sanity.dev">SDK Docs</a>
+                  <a href="https://sanity.io/docs/app-sdk">App SDK Docs</a>
                 </Text>
                 <Text weight="medium" size={1}>
                   <a href="https://github.com/sanity-io/sdk">GitHub</a>

apps/sdk-explorer/src/Home.tsx

@@ -25,8 +25,9 @@ export default function Home(): JSX.Element {
         <Stack space={5} style={{maxInlineSize: '64ch'}}>
           <Text size={2} muted>
             The Sanity App SDK Explorer contains an assortment of example interfaces built with our
-            React SDK’s hooks. The purpose of the Explorer is to demonstrate how these hooks can be
-            used to build out interfaces powered by Sanity, with a variety of approaches to styling.
+            React App SDK’s hooks. The purpose of the Explorer is to demonstrate how these hooks can
+            be used to build out interfaces powered by Sanity, with a variety of approaches to
+            styling.
           </Text>
           <Text size={2} muted>
             Each example contains an interface rendered in the browser as well as a link to the
@@ -47,31 +48,31 @@ export default function Home(): JSX.Element {
               to="/document-collections/document-search"
               title="Document search"
               description="An interface for generating dynamic document searches"
-              hooks={['useDocuments', 'useProjection']}
+              hooks={['useDocuments', 'useDocumentProjection']}
               styling="Sanity UI"
               img={DocumentSearchImage}
             />
             <ExampleCard
               to="/document-collections/document-table"
               title="Document table"
               description="A tabular rendering of documents and their content"
-              hooks={['usePaginatedDocuments', 'useProjection']}
+              hooks={['usePaginatedDocuments', 'useDocumentProjection']}
               styling="Tailwind"
               img={DocumentTableImage}
             />
             <ExampleCard
               to="/document-collections/preview-grid"
               title="Preview grid"
               description="A grid of document previews"
-              hooks={['useDocuments', 'useProjection']}
+              hooks={['useDocuments', 'useDocumentProjection']}
               styling="Tailwind"
               img={PreviewGridImage}
             />
             <ExampleCard
               to="/document-collections/preview-list"
               title="Preview list"
               description="A list of document previews"
-              hooks={['useDocuments', 'useProjection']}
+              hooks={['useDocuments', 'useDocumentProjection']}
               styling="Sanity UI"
               img={PreviewListImage}
             />

apps/sdk-explorer/src/components/Hooks.tsx

@@ -4,7 +4,12 @@ import {type JSX} from 'react'
 const baseUrl = 'https://reference.sanity.io/_sanity/sdk-react/exports/'
 
 // Just update this array with a hook name to add a ReferenceLink for it
-const hookNames = ['useDocuments', 'usePaginatedDocuments', 'useProjection', 'useQuery'] as const
+const hookNames = [
+  'useDocuments',
+  'usePaginatedDocuments',
+  'useDocumentProjection',
+  'useQuery',
+] as const
 
 type HookName = (typeof hookNames)[number]
 

apps/sdk-explorer/src/examples/document-collections/DocumentSearch/DocumentSearch.tsx

@@ -1,4 +1,4 @@
-import {DocumentHandle, useDocuments, useProjection} from '@sanity/sdk-react'
+import {type DocumentHandle, useDocumentProjection, useDocuments} from '@sanity/sdk-react'
 import {Card, Flex, Label, Stack, Text, TextInput} from '@sanity/ui'
 import {type JSX, Suspense, useState} from 'react'
 
@@ -12,10 +12,10 @@ interface Projection {
 
 // Component for rendering an item from the `useDocuments` result
 function DocumentResult({documentHandle}: {documentHandle: DocumentHandle}) {
-  // Use the `useProjection` hook to get the document’s title, overview text, and poster image URL
+  // Use the `useDocumentProjection` hook to get the document’s title, overview text, and poster image URL
   const {
     data: {title, overviewText, imageUrl},
-  } = useProjection<Projection>({
+  } = useDocumentProjection<Projection>({
     ...documentHandle,
     projection: `{
       title,
@@ -44,15 +44,15 @@ export default function DocumentSearch(): JSX.Element {
   const [search, setSearch] = useState('')
 
   const {data: movies} = useDocuments({
-    filter: '_type == "movie"',
+    documentType: 'movie',
     // Pass the `search` state variable to the `useDocuments` hook’s `search` parameter
     search,
   })
 
   return (
     <ExampleLayout
       title="Document search"
-      hooks={['useDocuments', 'useProjection']}
+      hooks={['useDocuments', 'useDocumentProjection']}
       codeUrl="https://github.com/sanity-io/sdk-examples/blob/main/apps/sdk-explorer/src/examples/document-collections/DocumentSearch/DocumentSearch.tsx"
       styling="Sanity UI"
       summary="This example passes a state variable to the useDocuments hook’s ‘search’ argument, enabling the creation of a dynamic search interface for documents in the targeted dataset(s). (Note: the ‘search’ parameter currently searches for matches across all of a document’s string fields.)"

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

@@ -1,6 +1,6 @@
 import './styles.css'
 
-import {DocumentHandle, usePaginatedDocuments, useProjection} from '@sanity/sdk-react'
+import {type DocumentHandle, useDocumentProjection, usePaginatedDocuments} from '@sanity/sdk-react'
 import {type JSX, useRef} from 'react'
 
 import ExampleLayout from '../../../components/ExampleLayout'
@@ -20,7 +20,7 @@ function DocumentRow({document}: {document: DocumentHandle}) {
 
   const {
     data: {title, posterImage, cast, popularity, releaseDate},
-  }: MovieProjectionResults = useProjection({
+  }: MovieProjectionResults = useDocumentProjection({
     ...document,
     ref,
     // In our projection, we will:
@@ -54,7 +54,7 @@ function DocumentRow({document}: {document: DocumentHandle}) {
 export default function DocumentTable(): JSX.Element {
   const {data, currentPage, totalPages, nextPage, previousPage, hasNextPage, hasPreviousPage} =
     usePaginatedDocuments({
-      filter: '_type == "movie"',
+      documentType: '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/examples/document-collections/DocumentTable/DocumentTable.tsx"
-      hooks={['usePaginatedDocuments', 'useProjection']}
+      hooks={['usePaginatedDocuments', 'useDocumentProjection']}
       styling="Tailwind"
-      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."
+      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 useDocumentProjection 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."
     >
       <div className="overflow-x-scroll">
         <table className="w-full text-sm border-collapse">

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

@@ -1,7 +1,6 @@
 import './styles.css'
 
-import {DocumentHandle} from '@sanity/sdk'
-import {useDocuments, useProjection} from '@sanity/sdk-react'
+import {type DocumentHandle, useDocumentProjection, useDocuments} from '@sanity/sdk-react'
 import {Spinner} from '@sanity/ui'
 import {type JSX, Suspense, useRef} from 'react'
 
@@ -19,14 +18,14 @@ interface ProjectionResults {
 // The DocumentPreview component uses the `usePreview` hook to render a document preview interface
 function DocumentPreview({document}: {document: DocumentHandle}): JSX.Element {
   // Generate a ref for the outer element
-  // This keeps the useProjection hook from resolving if the preview is not currently displayed in the viewport
+  // This keeps the useDocumentProjection hook from resolving if the preview is not currently displayed in the viewport
   const ref = useRef(null)
 
   // 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 {
     data: {title, cast, posterImage},
-  }: ProjectionResults = useProjection({
+  }: ProjectionResults = useDocumentProjection({
     ...document,
     ref,
     projection: `{
@@ -69,17 +68,17 @@ 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} = useDocuments({
-    filter: '_type == "movie"',
+    documentType: 'movie',
     orderings: [{field: 'releaseDate', direction: 'desc'}],
   })
 
   return (
     <ExampleLayout
       title="Preview grid"
       codeUrl="https://github.com/sanity-io/sdk-examples/blob/main/apps/sdk-explorer/src/examples/document-collections/PreviewGrid/PreviewGrid.tsx"
-      hooks={['useDocuments', 'useProjection']}
+      hooks={['useDocuments', 'useDocumentProjection']}
       styling="Tailwind"
-      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."
+      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 useDocumentProjection 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) => (

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

@@ -1,5 +1,4 @@
-import {DocumentHandle} from '@sanity/sdk'
-import {useDocuments, useProjection} from '@sanity/sdk-react'
+import {type DocumentHandle, useDocumentProjection, useDocuments} from '@sanity/sdk-react'
 import {Button, Card, Flex, Inline, Spinner, Stack, Text} from '@sanity/ui'
 import {type JSX, Suspense, useRef} from 'react'
 
@@ -27,14 +26,14 @@ interface ProjectionResults {
 // The DocumentPreview component uses the `usePreview` hook to render a document preview interface
 function DocumentPreview({document}: {document: DocumentHandle}) {
   // Generate a ref for the outer element
-  // This keeps the useProjection hook from firing if the preview is not currently displayed in the viewport
+  // This keeps the useDocumentProjection hook from firing if the preview is not currently displayed in the viewport
   const ref = useRef(null)
 
   // 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 {
     data: {title, cast, posterImage},
-  }: ProjectionResults = useProjection({
+  }: ProjectionResults = useDocumentProjection({
     ...document,
     ref,
     projection: `{
@@ -70,17 +69,17 @@ 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} = useDocuments({
-    filter: '_type == "movie"',
+    documentType: 'movie',
     orderings: [{field: 'releaseDate', direction: 'desc'}],
   })
 
   return (
     <ExampleLayout
       title="Preview list"
       codeUrl="https://github.com/sanity-io/sdk-examples/blob/main/apps/sdk-explorer/src/examples/document-collections/PreviewList/PreviewList.tsx"
-      hooks={['useDocuments', 'useProjection']}
+      hooks={['useDocuments', 'useDocumentProjection']}
       styling="Sanity UI"
-      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."
+      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 useDocumentProjection hook to retrieve each document’s title and poster image, and to create a projection of the first three listed cast members."
     >
       <Stack style={{overflowY: 'scroll'}}>
         {movies.map((movie) => (

apps/sdk-explorer/src/examples/groq/MoviesByActor/MoviesByActor.tsx

@@ -19,33 +19,33 @@ interface Movie {
 
 export default function MoviesByActor(): JSX.Element {
   // Get a list of people who are referenced as cast members in more than 1 movie
-  const {data: castMembers} = useQuery<CastMember[]>(
-    `*[_type == "person" && count(*[_type == "movie" && ^._id in castMembers[].person._ref]) > 1] {
-      _id,
-      name,
-      'photo': image.asset->url
-    }`,
-  )
+  const castMembersQuery = `*[_type == "person" && count(*[_type == "movie" && ^._id in castMembers[].person._ref]) > 1] {
+    _id,
+    name,
+    'photo': image.asset->url
+  }`
+
+  const {data: castMembers} = useQuery<CastMember[]>({query: castMembersQuery})
 
   // Create a state variable to store the selected cast member's ID
   // Initialize it with the ID of the first cast member
   const [castMemberId, setCastMemberId] = useState<string>(() => castMembers?.[0]?._id)
 
   // Construct another query for movies that the cast member has appeared in
   // by passing the cast member's ID as a parameter to the query
-  const {data: castMemberMovies} = useQuery<Movie[]>(
-    `*[_type == "movie" && $castMemberId in castMembers[].person._ref]{
-    _id,
-    title,
-      'posterImage': poster.asset->url,
-      releaseDate,
-    }`,
-    {
-      params: {
-        castMemberId: castMemberId,
-      },
+  const castMembersMoviesQuery = `*[_type == "movie" && $castMemberId in castMembers[].person._ref]{
+  _id,
+  title,
+    'posterImage': poster.asset->url,
+    releaseDate,
+  }`
+
+  const {data: castMemberMovies} = useQuery<Movie[]>({
+    query: castMembersMoviesQuery,
+    params: {
+      castMemberId: castMemberId,
     },
-  )
+  })
 
   return (
     <ExampleLayout