feat: add useQuery example (#19)

* feat: add useQuery example

* fix: fix file structure/routing

* feat: auto select first cast member

* chore: update vercel config for rewrites

* chore: update button w/ clearer label

Author: colepeters

sdk-explorer/src/App.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter, Link, Route, Routes } from 'react-router'
 import DocumentTable from './document-collections/DocumentTable/DocumentTable'
 import PreviewGrid from './document-collections/PreviewGrid/PreviewGrid'
 import PreviewList from './document-collections/PreviewList/PreviewList'
+import MoviesByActor from './groq/MoviesByActor/MoviesByActor'
 import Home from './Home'
 
 export default function App() {
@@ -58,6 +59,7 @@ export default function App() {
             path='/document-collections/document-table'
             element={<DocumentTable />}
           />
+          <Route path='/groq/movies-by-actor' element={<MoviesByActor />} />
         </Routes>
       </Card>
     </BrowserRouter>

sdk-explorer/src/Home.tsx

@@ -65,6 +65,26 @@ export default function Home() {
           </Stack>
         </Card>
       </Stack>
+
+      <Stack space={5} paddingY={4}>
+        <Card padding={4} radius={2} shadow={3}>
+          <Stack space={4}>
+            <Text as='h2' size={4} weight='medium'>
+              GROQ
+            </Text>
+
+            <Stack space={3}>
+              <ExampleCard
+                to='/groq/movies-by-actor'
+                title='Movies by actor'
+                description='Use multiple useQuery hooks to fetch and filter data'
+                hooks={['useQuery']}
+                styling='Sanity UI'
+              />
+            </Stack>
+          </Stack>
+        </Card>
+      </Stack>
     </Container>
   )
 }

sdk-explorer/src/ViewCode.tsx

@@ -11,7 +11,7 @@ export default function ViewCode({ url }: { url: string }) {
       href={url}
       target='_blank'
       mode='ghost'
-      text='View on GitHub'
+      text='View the code on GitHub'
       fontSize={2}
       padding={4}
       iconRight={LaunchIcon}

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

@@ -0,0 +1,129 @@
+import { useQuery } from '@sanity/sdk-react'
+import {
+  Avatar,
+  Card,
+  Heading,
+  Inline,
+  Label,
+  Select,
+  Stack,
+  Text,
+} from '@sanity/ui'
+import { useState } from 'react'
+import ExampleLayout from '../../ExampleLayout'
+
+interface CastMember {
+  _id: string
+  name: string
+  photo: string
+}
+
+interface Movie {
+  _id: string
+  title: string
+  posterImage: string
+  releaseDate: string
+}
+
+export default function MoviesByActor() {
+  // 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
+    }`
+  )
+
+  // 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,
+      },
+    }
+  )
+
+  return (
+    <ExampleLayout
+      title='Movies by actor'
+      codeUrl='https://github.com/sanity-io/sdk-examples/blob/main/sdk-explorer/src/groq/MoviesByActor/MoviesByActor.tsx'
+      hooks={['useQuery']}
+      styling='Sanity UI'
+    >
+      <Stack space={5}>
+        {/* Render a select element and populate it with an option for each cast member */}
+        <Stack space={3}>
+          <Label htmlFor='castMembers'>Select a cast member:</Label>
+          <Card style={{ maxWidth: '48ch' }}>
+            <Select
+              id='castMembers'
+              fontSize={2}
+              padding={4}
+              value={castMemberId}
+              onChange={(e) =>
+                setCastMemberId(
+                  castMembers?.find(
+                    (member) => member._id === e.currentTarget.value
+                  )?._id || ''
+                )
+              }
+            >
+              <option disabled value='default'>
+                Cast members in more than 1 movie
+              </option>
+              {castMembers?.map((person) => (
+                <option key={person._id} value={person._id}>
+                  {person.name}
+                </option>
+              ))}
+            </Select>
+          </Card>
+        </Stack>
+
+        {/* Render the selected cast member's movies */}
+        <Stack space={4}>
+          {castMemberId && (
+            <Inline space={3}>
+              {/* Resize and crop the cast member's photo using Sanity image transformations */}
+              <Avatar
+                size={3}
+                src={`${castMembers?.find((member) => member._id === castMemberId)?.photo}?h=200&w=200&fit=min`}
+                color='purple'
+              />
+              <Heading as='h2'>
+                {
+                  castMembers?.find((member) => member._id === castMemberId)
+                    ?.name
+                }{' '}
+                stars in:
+              </Heading>
+            </Inline>
+          )}
+          {castMemberMovies?.map((movie) => (
+            <Inline key={movie._id} space={3}>
+              <img src={movie.posterImage} alt={movie.title} width={100} />
+              <Stack space={3}>
+                <Text weight='semibold'>{movie.title}</Text>
+                <Text>{new Date(movie.releaseDate).getFullYear()}</Text>
+              </Stack>
+            </Inline>
+          ))}
+        </Stack>
+      </Stack>
+    </ExampleLayout>
+  )
+}

sdk-explorer/vercel.json

@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}