fix: fix generation & content of reference URLs (#49)

colepeters · binoy14 · web-flow · commit 2cfe3cdcc7a7 · 2025-05-06T14:44:17.000-05:00
* fix: fix generation &amp; content of reference URLs

* fix: correct URL TLD

Co-authored-by: Binoy Patel &lt;me@binoy.io&gt;

---------

Co-authored-by: Binoy Patel &lt;me@binoy.io&gt;
diff --git a/apps/sdk-explorer/src/Home.tsx b/apps/sdk-explorer/src/Home.tsx
@@ -2,7 +2,6 @@ import {Box, Heading, Stack, Text} from '@sanity/ui'
 import {type JSX} from 'react'
 
 import ExampleCard from './components/ExampleCard'
-import {documents, paginatedDocuments, projection, query} from './components/Hooks'
 import DocumentTableImage from './images/DocumentTable.svg'
 import DocumentSearchImage from './images/DoumentSearch.svg'
 import MoviesByActorImage from './images/MoviesByActor.svg'
@@ -48,31 +47,31 @@ export default function Home(): JSX.Element {
               to="/document-collections/document-search"
               title="Document search"
               description="An interface for generating dynamic document searches"
-              hooks={[documents, projection]}
+              hooks={['useDocuments', 'useProjection']}
               styling="Sanity UI"
               img={DocumentSearchImage}
             />
             <ExampleCard
               to="/document-collections/document-table"
               title="Document table"
               description="A tabular rendering of documents and their content"
-              hooks={[paginatedDocuments, projection]}
+              hooks={['usePaginatedDocuments', 'useProjection']}
               styling="Tailwind"
               img={DocumentTableImage}
             />
             <ExampleCard
               to="/document-collections/preview-grid"
               title="Preview grid"
               description="A grid of document previews"
-              hooks={[documents, projection]}
+              hooks={['useDocuments', 'useProjection']}
               styling="Tailwind"
               img={PreviewGridImage}
             />
             <ExampleCard
               to="/document-collections/preview-list"
               title="Preview list"
               description="A list of document previews"
-              hooks={[documents, projection]}
+              hooks={['useDocuments', 'useProjection']}
               styling="Sanity UI"
               img={PreviewListImage}
             />
@@ -91,7 +90,7 @@ export default function Home(): JSX.Element {
               to="/groq/movies-by-actor"
               title="Movies by actor"
               description="Use multiple useQuery hooks to fetch and filter data"
-              hooks={[query]}
+              hooks={['useQuery']}
               styling="Sanity UI"
               img={MoviesByActorImage}
             />
diff --git a/apps/sdk-explorer/src/components/Hooks.tsx b/apps/sdk-explorer/src/components/Hooks.tsx
@@ -1,57 +1,34 @@
 import {Badge, Box, Inline} from '@sanity/ui'
 import {type JSX} from 'react'
 
-const baseUrl = 'https://sdk-docs.sanity.dev/functions/React_SDK.exports.'
+const baseUrl = 'https://reference.sanity.io/_sanity/sdk-react/exports/'
 
-const referenceLinks = {
-  useDocuments: `${baseUrl}useDocuments.html`,
-  usePaginatedDocuments: `${baseUrl}usePaginatedDocuments.html`,
-  useProjection: `${baseUrl}useProjection.html`,
-  useQuery: `${baseUrl}useQuery.html`,
-}
-
-interface HookReference {
-  name: 'useDocuments' | 'usePaginatedDocuments' | 'useProjection' | 'useQuery'
-  reference: (typeof referenceLinks)[keyof typeof referenceLinks]
-}
+// Just update this array with a hook name to add a ReferenceLink for it
+const hookNames = ['useDocuments', 'usePaginatedDocuments', 'useProjection', 'useQuery'] as const
 
-// These consts can't begin with the word `use` or eslint yells at you for
-// passing around a 'hook' reference
-
-const documents: HookReference = {
-  name: 'useDocuments',
-  reference: referenceLinks.useDocuments,
-}
-
-const paginatedDocuments: HookReference = {
-  name: 'usePaginatedDocuments',
-  reference: referenceLinks.usePaginatedDocuments,
-}
-
-const projection: HookReference = {
-  name: 'useProjection',
-  reference: referenceLinks.useProjection,
-}
+type HookName = (typeof hookNames)[number]
 
-const query: HookReference = {
-  name: 'useQuery',
-  reference: referenceLinks.useQuery,
+type ReferenceLink = {
+  [key in HookName]: string
 }
 
-export {documents, paginatedDocuments, projection, query}
+const referenceLinks = hookNames.reduce(
+  (allHooks, current) => ({...allHooks, [current]: `${baseUrl}${current}`}),
+  {} as ReferenceLink,
+)
 
 export interface HooksProps {
-  hooks: HookReference[]
+  hooks: HookName[]
 }
 
 export default function Hooks({hooks}: HooksProps): JSX.Element {
   return (
     <Inline space={3}>
       {hooks.map((hook) => (
-        <Badge key={hook.name} tone="primary">
-          <a href={hook.reference} style={{display: 'inline-block'}}>
+        <Badge key={hook} tone="primary">
+          <a href={referenceLinks[hook]} style={{display: 'inline-block'}}>
             <Box as="span" padding={1}>
-              {hook.name}
+              {hook}
             </Box>
           </a>
         </Badge>
diff --git a/apps/sdk-explorer/src/examples/document-collections/DocumentSearch/DocumentSearch.tsx b/apps/sdk-explorer/src/examples/document-collections/DocumentSearch/DocumentSearch.tsx
@@ -3,7 +3,6 @@ import {Card, Flex, Label, Stack, Text, TextInput} from '@sanity/ui'
 import {type JSX, Suspense, useState} from 'react'
 
 import ExampleLayout from '../../../components/ExampleLayout'
-import {documents, projection} from '../../../components/Hooks'
 
 interface Projection {
   title: string
@@ -53,7 +52,7 @@ export default function DocumentSearch(): JSX.Element {
   return (
     <ExampleLayout
       title="Document search"
-      hooks={[documents, projection]}
+      hooks={['useDocuments', 'useProjection']}
       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.)"
diff --git a/apps/sdk-explorer/src/examples/document-collections/DocumentTable/DocumentTable.tsx b/apps/sdk-explorer/src/examples/document-collections/DocumentTable/DocumentTable.tsx
@@ -4,7 +4,6 @@ import {DocumentHandle, usePaginatedDocuments, useProjection} from '@sanity/sdk-
 import {type JSX, useRef} from 'react'
 
 import ExampleLayout from '../../../components/ExampleLayout'
-import {paginatedDocuments, projection} from '../../../components/Hooks'
 
 interface MovieProjectionResults {
   data: {
@@ -64,7 +63,7 @@ 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={[paginatedDocuments, projection]}
+      hooks={['usePaginatedDocuments', 'useProjection']}
       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."
     >
diff --git a/apps/sdk-explorer/src/examples/document-collections/PreviewGrid/PreviewGrid.tsx b/apps/sdk-explorer/src/examples/document-collections/PreviewGrid/PreviewGrid.tsx
@@ -6,7 +6,6 @@ import {Spinner} from '@sanity/ui'
 import {type JSX, Suspense, useRef} from 'react'
 
 import ExampleLayout from '../../../components/ExampleLayout'
-import {documents, projection} from '../../../components/Hooks'
 
 // @todo replace with type from SDK
 interface ProjectionResults {
@@ -78,7 +77,7 @@ function PreviewGrid(): JSX.Element {
     <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={[documents, projection]}
+      hooks={['useDocuments', 'useProjection']}
       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."
     >
diff --git a/apps/sdk-explorer/src/examples/document-collections/PreviewList/PreviewList.tsx b/apps/sdk-explorer/src/examples/document-collections/PreviewList/PreviewList.tsx
@@ -4,7 +4,6 @@ import {Button, Card, Flex, Inline, Spinner, Stack, Text} from '@sanity/ui'
 import {type JSX, Suspense, useRef} from 'react'
 
 import ExampleLayout from '../../../components/ExampleLayout'
-import {documents, projection} from '../../../components/Hooks'
 
 function Loading() {
   return (
@@ -79,7 +78,7 @@ function PreviewList(): JSX.Element {
     <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={[documents, projection]}
+      hooks={['useDocuments', 'useProjection']}
       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."
     >
diff --git a/apps/sdk-explorer/src/examples/groq/MoviesByActor/MoviesByActor.tsx b/apps/sdk-explorer/src/examples/groq/MoviesByActor/MoviesByActor.tsx
@@ -3,7 +3,6 @@ import {Avatar, Card, Inline, Label, Select, Stack, Text} from '@sanity/ui'
 import {type JSX, useState} from 'react'
 
 import ExampleLayout from '../../../components/ExampleLayout'
-import {query} from '../../../components/Hooks'
 
 interface CastMember {
   _id: string
@@ -52,7 +51,7 @@ export default function MoviesByActor(): JSX.Element {
     <ExampleLayout
       title="Movies by actor"
       codeUrl="https://github.com/sanity-io/sdk-examples/blob/main/apps/sdk-explorer/src/examples/groq/MoviesByActor/MoviesByActor.tsx"
-      hooks={[query]}
+      hooks={['useQuery']}
       styling="Sanity UI"
       summary="This example uses two instances of the useQuery hook. The first executes a GROQ query to look for entries of type ‘person’ in our dataset and filters those entries down to those who are referenced in at least 2 movie entries’ ‘castMembers’ field. For each of those results, we return a projection that includes the person’s name, photo, and document ID. The second useQuery hook executes a GROQ query for the movies the selected person has starred in, and returns the title, poster image, release date, and document ID for each."
     >
