refactor: try groqd for typed sanity queries

apps/course-builder-web/package.json

@@ -100,6 +100,7 @@
     "drizzle-orm": "^0.28.5",
     "framer-motion": "^10.16.5",
     "groq": "^3.18.1",
+    "groqd": "^0.15.10",
     "i": "^0.3.7",
     "inngest": "^3.7.0",
     "intl-segmenter-polyfill": "^0.4.4",

apps/course-builder-web/src/app/tips/[slug]/page.tsx

@@ -10,13 +10,18 @@ import {TipPlayer} from '@/app/tips/_components/tip-player'
 import * as React from 'react'
 import {getServerAuthSession} from '@/server/auth'
 import {getAbility} from '@/lib/ability'
-import {getTip} from '@/lib/tips'
+import {getTip, getTipGroqD} from '@/lib/tips'
 import ReactMarkdown from 'react-markdown'
+import {notFound} from 'next/navigation'
 
 export default async function TipPage({params}: {params: {slug: string}}) {
   const session = await getServerAuthSession()
   const ability = getAbility({user: session?.user})
-  const tip = await getTip(params.slug)
+  const tip = await getTipGroqD(params.slug)
+
+  if (!tip) {
+    notFound()
+  }
 
   return (
     <div>

apps/course-builder-web/src/lib/tips.ts

@@ -1,5 +1,6 @@
 import {z} from 'zod'
-import {sanityQuery} from '@/server/sanity.server'
+import {sanityQuery, runQuery} from '@/server/sanity.server'
+import {q} from 'groqd'
 
 const TipSchema = z.object({
   _id: z.string(),
@@ -31,6 +32,36 @@ export async function getTip(slugOrId: string) {
   }`)
 }
 
+export async function getTipGroqD(slugOrId: string) {
+  const fromVideoResource = q('resources')
+    .filter("@->._type == 'videoResource'")
+    .slice(0)
+    .deref()
+
+  const groqQuery = q('*')
+    .filter(
+      `_type == "tip" && (_id == "${slugOrId}" || slug.current == "${slugOrId}")`,
+    )
+    .grab({
+      _id: q.string(),
+      _type: q.string(),
+      _updatedAt: q.string(),
+      title: q.string(),
+      summary: q.string().nullable(),
+      body: q.string().nullable(),
+      muxPlaybackId: fromVideoResource.grabOne('muxPlaybackId', q.string()),
+      videoResourceId: fromVideoResource.grabOne('_id', q.string()),
+      transcript: fromVideoResource.grabOne('transcript', q.string()),
+      slug: ['slug.current', q.string()],
+    })
+    .slice(0)
+    .nullable()
+
+  console.log({groqQuery})
+
+  return await runQuery(groqQuery)
+}
+
 export async function getTipsModule() {
   return await sanityQuery<{
     _id: string

apps/course-builder-web/src/server/sanity.server.ts

@@ -1,5 +1,6 @@
 import {env} from '@/env.mjs'
 import {Logger} from 'next-axiom'
+import {makeSafeQueryRunner} from 'groqd'
 
 export async function sanityMutation(
   mutations: any[],
@@ -44,6 +45,16 @@ export async function sanityQuery<T = any>(
     revalidate: 10,
   },
 ): Promise<T> {
+  return (await sanityQueryWithFetch(query, options)) as T
+}
+
+async function sanityQueryWithFetch(
+  query: string,
+  options: {useCdn?: boolean; revalidate?: number} = {
+    useCdn: true,
+    revalidate: 10,
+  },
+): Promise<any> {
   const log = new Logger()
   return await fetch(
     `https://${env.SANITY_STUDIO_PROJECT_ID}.${
@@ -68,7 +79,7 @@ export async function sanityQuery<T = any>(
         )
       }
       const {result} = await response.json()
-      return result as T
+      return result
     })
     .catch((error) => {
       log.error(error)
@@ -78,3 +89,8 @@ export async function sanityQuery<T = any>(
       log.flush()
     })
 }
+
+// 👇 Safe query runner
+export const runQuery = makeSafeQueryRunner((query) =>
+  sanityQueryWithFetch(query),
+)