astro works?

sanity-io · Dec 12, 2024 · bfa0d7a · bfa0d7a
1 parent e460fa1
commit bfa0d7a
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 3 deletions.
diff --git a/astro/package.json b/astro/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@astrojs/vercel": "^8.0.0",
-    "astro": "^5.0.2"
+    "@sanity/client": "^6.23.0",
+    "astro": "^5.0.2",
+    "groq": "^3.64.2"
   }
 }
diff --git a/astro/src/components/SanityLive.astro b/astro/src/components/SanityLive.astro
@@ -0,0 +1,35 @@
+<script>
+    import { navigate } from 'astro:transitions/client';
+  import {CorsOriginError} from '@sanity/client'
+  import { client } from '../sanity/client';
+
+  const url = new URL(window.location.href)
+
+  const subscription = client.live.events().subscribe({
+      next: (event) => {
+      if (event.type === 'welcome') {
+        console.info('Sanity is live with automatic revalidation of published content')
+      } else if (event.type === 'message') {
+        const url = new URL(window.location.href)
+        url.searchParams.set('lastLiveEventId', event.id)
+        navigate(url.toString(), {history: 'replace'})
+      } else if (event.type === 'restart') {
+        const url = new URL(window.location.href)
+        url.searchParams.delete('lastLiveEventId')
+        navigate(url.toString(), {history: 'replace'})
+      }
+    },
+      error: (error: unknown) => {
+        if (error instanceof CorsOriginError) {
+          console.warn(
+            `Sanity Live is unable to connect to the Sanity API as the current origin - ${window.origin} - is not in the list of allowed CORS origins for this Sanity Project.`,
+            error.addOriginUrl && `Add it here:`,
+            error.addOriginUrl?.toString(),
+          )
+        } else {
+          console.error(error)
+        }
+      },
+    })
+    window.addEventListener('beforeunload', () => subscription.unsubscribe())
+</script>
diff --git a/astro/src/layouts/Layout.astro b/astro/src/layouts/Layout.astro
@@ -1,3 +1,8 @@
+---
+import { ClientRouter } from 'astro:transitions';
+import SanityLive from '../components/SanityLive.astro';
+---
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -6,9 +11,11 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>Astro Basics.</title>
+    <ClientRouter />
   </head>
   <body>
     <slot />
+    <SanityLive server:defer />
   </body>
 </html>
 

diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
@@ -1,13 +1,20 @@
 ---
+import {defineQuery} from 'groq'
+import {sanityFetch} from '../sanity/fetch'
 import Welcome from '../components/Welcome.astro'
 import Layout from '../layouts/Layout.astro'
 
 export const prerender = false
 
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+const url = new URL(Astro.request.url)
+
+const DEMO_QUERY = defineQuery(`*[_type == "demo" && slug.current == $slug][0].title`)
+const slug = 'astro'
+const lastLiveEventId = url.searchParams.get('lastLiveEventId')
+const {data} = await sanityFetch({query: DEMO_QUERY, params: {slug}, lastLiveEventId})
 ---
 
 <Layout>
+  <h1>{data || 'Astro'}</h1>
   <Welcome />
 </Layout>
diff --git a/astro/src/sanity/client.ts b/astro/src/sanity/client.ts
@@ -0,0 +1,8 @@
+import {createClient} from '@sanity/client'
+
+export const client = createClient({
+  projectId: 'hiomol4a',
+  dataset: 'lcapi',
+  apiVersion: '2024-09-18',
+  useCdn: true,
+})
diff --git a/astro/src/sanity/fetch.ts b/astro/src/sanity/fetch.ts
@@ -0,0 +1,19 @@
+import {type QueryParams} from '@sanity/client'
+import {client} from './client'
+
+export async function sanityFetch<const QueryString extends string>({
+  query,
+  params = {},
+  lastLiveEventId,
+}: {
+  query: QueryString
+  params?: QueryParams
+  lastLiveEventId: string | null
+}) {
+  const {result, syncTags} = await client.fetch(query, params, {
+    lastLiveEventId,
+    filterResponse: false,
+  })
+
+  return {data: result, tags: syncTags}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml