feat: use perspective features (#389)

Co-authored-by: Martin Jacobsen <174970+mmgj@users.noreply.github.com>

MIGRATION.md

@@ -72,6 +72,10 @@ export interface LiveQueryProviderProps {
     /** @defaultValue true */
     listen?: boolean
   }
+  /** @defaultValue 10000 */
+  refreshInterval?: number
+  /** @defaultValue true */
+  turboSourceMap?: boolean
 }
 
 export function LiveQueryProvider(
@@ -112,6 +116,7 @@ export function getClient({
     dataset,
     apiVersion: '2023-06-20',
     useCdn: true,
+    perspective: 'published',
   })
   if (preview) {
     if (!preview.token) {
@@ -121,6 +126,7 @@ export function getClient({
       token: preview.token,
       useCdn: false,
       ignoreBrowserTokenWarning: true,
+      perspective: 'previewDrafts',
     })
   }
   return client
@@ -192,6 +198,7 @@ export function getClient({
     dataset,
     apiVersion: '2023-06-20',
     useCdn: true,
+    perspective: 'published',
   })
   if (preview) {
     if (!preview.token) {
@@ -201,6 +208,7 @@ export function getClient({
       token: preview.token,
       useCdn: false,
       ignoreBrowserTokenWarning: true,
+      perspective: 'previewDrafts',
     })
   }
   return client
@@ -281,6 +289,7 @@ export function getClient({
     dataset,
     apiVersion: '2023-06-20',
     useCdn: true,
+    perspective: 'published',
   })
   if (preview) {
     if (!preview.token) {
@@ -290,6 +299,7 @@ export function getClient({
       token: preview.token,
       useCdn: false,
       ignoreBrowserTokenWarning: true,
+      perspective: 'previewDrafts',
     })
   }
   return client
@@ -360,6 +370,7 @@ export function getClient({
     dataset,
     apiVersion: '2023-06-20',
     useCdn: true,
+    perspective: 'published',
   })
   if (preview) {
     if (!preview.token) {
@@ -369,6 +380,7 @@ export function getClient({
       token: preview.token,
       useCdn: false,
       ignoreBrowserTokenWarning: true,
+      perspective: 'previewDrafts',
     })
   }
   return client

apps/next-app-router-groq-store/app/DraftModeButton.tsx

@@ -0,0 +1,14 @@
+import { draftMode } from 'next/headers'
+import { PreviewDraftsButton, ViewPublishedButton } from 'ui/react'
+
+export default function DraftModeButton() {
+  return (
+    <form style={{ display: 'contents' }}>
+      {draftMode().isEnabled ? (
+        <ViewPublishedButton formAction="/api/disable-draft" />
+      ) : (
+        <PreviewDraftsButton formAction="/api/draft" />
+      )}
+    </form>
+  )
+}

apps/next-app-router-groq-store/app/PreviewProvider.tsx

@@ -11,12 +11,12 @@ export default function PreviewProvider({
   children: React.ReactNode
   token: string
 }) {
-  const client = useMemo(() => getClient({ preview: true, token }), [token])
+  const client = useMemo(() => getClient({ token }), [token])
   return (
     <LiveQueryProvider
       client={client}
-      cache={{ maxDocuments: Infinity }}
       logger={console}
+      cache={{ includeTypes: ['page'] }}
     >
       {children}
     </LiveQueryProvider>

apps/next-app-router-groq-store/app/RefreshButton.tsx

@@ -1,20 +1,32 @@
 'use client'
 
-import { Button } from 'ui/react'
+import { useListeningQueryStatus } from '@sanity/preview-kit'
 import { useRouter } from 'next/navigation'
+import { useEffect, useTransition } from 'react'
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { Button, tableQuery } from 'ui/react'
+import { revalidate } from './actions'
 
-export default function RefreshButton() {
+function useRefresh() {
+  const { pending } = useFormStatus()
   const router = useRouter()
+  const [loading, startTransition] = useTransition()
+  const status = useListeningQueryStatus(tableQuery)
+  useEffect(() => {
+    if (!pending) {
+      startTransition(() => router.refresh())
+    }
+  }, [pending, router])
+
+  return pending || loading || status === 'loading'
+}
+
+export default function RefreshButton() {
+  const loading = useRefresh()
 
   return (
-    <form
-      className="section"
-      onSubmit={(event) => {
-        event.preventDefault()
-        router.refresh()
-      }}
-    >
-      <Button>Refresh</Button>
+    <form action={revalidate} className="section">
+      <Button isLoading={loading}>Refresh</Button>
     </form>
   )
 }

apps/next-app-router-groq-store/app/actions.ts

@@ -0,0 +1,7 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export async function revalidate() {
+  await revalidatePath('/')
+}

apps/next-app-router-groq-store/app/api/disable-draft/route.ts

@@ -0,0 +1,8 @@
+import { redirect } from 'next/navigation'
+
+import { draftMode } from 'next/headers'
+
+export async function GET(request: Request) {
+  draftMode().disable()
+  redirect('/')
+}

apps/next-app-router-groq-store/app/api/draft/route.ts

@@ -1,12 +1,8 @@
+import { redirect } from 'next/navigation'
+
 import { draftMode } from 'next/headers'
-import { NextRequest, NextResponse } from 'next/server'
 
-export function GET(req: NextRequest) {
-  if (draftMode().isEnabled) {
-    draftMode().disable()
-  } else {
-    draftMode().enable()
-  }
-  const url = new URL(req.nextUrl)
-  return NextResponse.redirect(new URL('/', url.origin))
+export async function GET(request: Request) {
+  draftMode().enable()
+  redirect('/')
 }

apps/next-app-router-groq-store/app/page.tsx

@@ -1,42 +1,37 @@
-import { draftMode } from 'next/headers'
-import { PreviewDraftsButton, Footer, footerQuery } from 'ui/react'
-import RefreshButton from './RefreshButton'
 import { unstable__adapter, unstable__environment } from '@sanity/client'
-import { Table, Timestamp, tableQuery } from 'ui/react'
-import { getClient } from './sanity.client'
+import { draftMode } from 'next/headers'
+import { Footer, Table, Timestamp, footerQuery, tableQuery } from 'ui/react'
+import DraftModeButton from './DraftModeButton'
+import PreviewFooter from './PreviewFooter'
 import PreviewProvider from './PreviewProvider'
 import PreviewTable from './PreviewTable'
-import PreviewFooter from './PreviewFooter'
-import ViewPublishedButtonWithLoadingStatus from './ViewPublishedButtonWithLoadingStatus'
+import RefreshButton from './RefreshButton'
+import { getClient } from './sanity.client'
 
 export default async function Page() {
-  const isDraftMode = draftMode().isEnabled
-  const button = isDraftMode ? (
-    <ViewPublishedButtonWithLoadingStatus />
-  ) : (
-    <PreviewDraftsButton />
-  )
-  const client = getClient({ preview: isDraftMode })
-  const table = client.fetch(tableQuery)
-  const footer = client.fetch(footerQuery)
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const preview = draftMode().isEnabled ? { token } : undefined
+  const client = getClient(preview)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   return (
     <>
-      <form action="/api/draft" style={{ display: 'contents' }}>
-        {isDraftMode ? (
-          <PreviewProvider token={client.config().token!}>
-            {button}
-            <PreviewTable data={await table} />
-            <PreviewFooter data={await footer} />
-          </PreviewProvider>
-        ) : (
-          <>
-            {button}
-            <Table data={await table} />
-            <Footer data={await footer} />
-          </>
-        )}
-        <Timestamp date={new Date()} />
-      </form>
+      {preview ? (
+        <PreviewProvider token={preview.token!}>
+          <DraftModeButton />
+          <PreviewTable data={table} />
+          <PreviewFooter data={footer} />
+        </PreviewProvider>
+      ) : (
+        <>
+          <DraftModeButton />
+          <Table data={table} />
+          <Footer data={footer} />
+        </>
+      )}
+      <Timestamp date={new Date()} />
       <RefreshButton />
       <script
         type="application/json"

apps/next-app-router-groq-store/app/sanity.client.ts

@@ -1,36 +1,28 @@
 import { createClient, type SanityClient } from '@sanity/preview-kit/client'
-import { apiVersion, dataset, projectId, useCdn } from './sanity.env'
 
-export type { SanityClient }
+const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'pv8y60vp'
+const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production'
+const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15'
+const useCdn = true
 
-export function getClient({
-  preview = false,
-  token = process.env.SANITY_API_READ_TOKEN,
-}: {
-  preview?: boolean
-  token?: string
-}): SanityClient {
+export function getClient(preview?: { token: string }): SanityClient {
   const client = createClient({
     projectId,
     dataset,
     apiVersion,
     useCdn,
-    studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-    encodeSourceMapAtPath: () => true,
-    token,
     perspective: 'published',
-    ignoreBrowserTokenWarning: true,
   })
-
   if (preview) {
-    if (!token) {
+    if (!preview.token) {
       throw new Error('You must provide a token to preview drafts')
     }
     return client.withConfig({
       perspective: 'previewDrafts',
+      token: preview.token,
       useCdn: false,
+      ignoreBrowserTokenWarning: true,
     })
   }
-
   return client
 }

apps/next-app-router-groq-store/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    logging: 'verbose',
+    serverActions: true,
+  },
+}
+
+export default nextConfig

apps/next-app-router-live-store/app/DraftModeButton.tsx

@@ -0,0 +1,14 @@
+import { draftMode } from 'next/headers'
+import { PreviewDraftsButton, ViewPublishedButton } from 'ui/react'
+
+export default function DraftModeButton() {
+  return (
+    <form style={{ display: 'contents' }}>
+      {draftMode().isEnabled ? (
+        <ViewPublishedButton formAction="/api/disable-draft" />
+      ) : (
+        <PreviewDraftsButton formAction="/api/draft" />
+      )}
+    </form>
+  )
+}

apps/next-app-router-live-store/app/PreviewFooter.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { FooterProps, footerQuery, Footer } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function PreviewFooter(props: FooterProps) {
-  const data = useListeningQuery<FooterProps['data']>(props.data, footerQuery)
+  const [data] = useLiveQuery<FooterProps['data']>(props.data, footerQuery)
 
   return <Footer data={data} />
 }

apps/next-app-router-live-store/app/PreviewProvider.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { LiveQueryProvider } from '@sanity/preview-kit'
-import { draftsClient } from './sanity.client'
 import { useMemo } from 'react'
+import { getClient } from './sanity.client'
 
 export default function PreviewProvider({
   children,
@@ -11,16 +11,9 @@ export default function PreviewProvider({
   children: React.ReactNode
   token: string
 }) {
-  const client = useMemo(
-    () => draftsClient.withConfig({ token, ignoreBrowserTokenWarning: true }),
-    [token]
-  )
+  const client = useMemo(() => getClient({ token }), [token])
   return (
-    <LiveQueryProvider
-      client={client}
-      experimental__turboSourceMap
-      logger={console}
-    >
+    <LiveQueryProvider client={client} logger={console}>
       {children}
     </LiveQueryProvider>
   )

apps/next-app-router-live-store/app/PreviewTable.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { TableProps, tableQuery, Table } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function PreviewTable(props: TableProps) {
-  const data = useListeningQuery<TableProps['data']>(props.data, tableQuery)
+  const [data] = useLiveQuery<TableProps['data']>(props.data, tableQuery)
 
   return <Table data={data} />
 }