From 4139e286834c385e4de60d46784a6e30cd3b5549 Mon Sep 17 00:00:00 2001
From: Cody Olsen <cody@sanity.io>
Date: Thu, 29 Jun 2023 02:14:31 +0200
Subject: [PATCH] feat: use `perspective` features (#389)

Co-authored-by: Martin Jacobsen <174970+mmgj@users.noreply.github.com>
---
 MIGRATION.md                                  | 12 +++
 .../app/DraftModeButton.tsx                   | 14 +++
 .../app/PreviewProvider.tsx                   |  4 +-
 .../app/RefreshButton.tsx                     | 32 +++++--
 .../ViewPublishedButtonWithLoadingStatus.tsx  | 11 ---
 .../next-app-router-groq-store/app/actions.ts |  7 ++
 .../app/api/disable-draft/route.ts            |  8 ++
 .../app/api/draft/route.ts                    | 14 +--
 apps/next-app-router-groq-store/app/page.tsx  | 59 ++++++------
 .../app/sanity.client.ts                      | 24 ++---
 .../app/sanity.env.ts                         |  7 --
 .../next.config.mjs                           |  9 ++
 .../app/DraftModeButton.tsx                   | 14 +++
 .../app/PreviewFooter.tsx                     |  4 +-
 .../app/PreviewProvider.tsx                   | 13 +--
 .../app/PreviewTable.tsx                      |  4 +-
 .../app/RefreshButton.tsx                     | 32 +++++--
 .../ViewPublishedButtonWithLoadingStatus.tsx  | 11 ---
 .../next-app-router-live-store/app/actions.ts |  7 ++
 .../app/api/disable-draft/route.ts            |  8 ++
 .../app/api/draft/route.ts                    | 14 +--
 apps/next-app-router-live-store/app/page.tsx  | 69 ++++++--------
 .../app/sanity.client.ts                      | 49 ++++++----
 .../app/sanity.env.ts                         |  5 -
 .../next.config.mjs                           |  9 ++
 .../app/DraftModeButton.tsx                   | 14 +++
 .../app/RefreshButton.tsx                     | 32 +++++--
 .../ViewPublishedButtonWithLoadingStatus.tsx  | 11 ---
 apps/next-app-router-no-store/app/actions.ts  |  7 ++
 .../app/api/disable-draft/route.ts            |  8 ++
 .../app/api/draft/route.ts                    | 14 +--
 apps/next-app-router-no-store/app/page.tsx    | 58 ++++++------
 .../app/sanity.client.ts                      | 50 +++++-----
 .../app/sanity.env.ts                         |  5 -
 apps/next-app-router-no-store/next.config.mjs |  9 ++
 apps/next-app-router/app/DraftModeButton.tsx  | 14 +++
 apps/next-app-router/app/RefreshButton.tsx    | 30 ++++--
 apps/next-app-router/app/actions.ts           |  7 ++
 .../app/api/disable-draft/route.ts            |  8 ++
 apps/next-app-router/app/api/draft/route.ts   | 14 +--
 apps/next-app-router/app/page.tsx             | 30 +++---
 apps/next-app-router/app/sanity.client.ts     | 52 +++++-----
 apps/next-app-router/next.config.mjs          |  9 ++
 .../src/Footer.tsx                            |  4 +-
 .../src/PreviewProvider.tsx                   | 17 ++--
 .../src/Table.tsx                             |  4 +-
 .../src/pages/api/disable-draft.ts}           |  2 +-
 .../src/pages/api/{preview.ts => draft.ts}    |  2 +-
 .../src/pages/index.tsx                       | 94 ++++++++-----------
 .../src/sanity.client.ts                      | 35 +++++--
 .../src/sanity.env.ts                         |  5 -
 .../src/Footer.tsx                            |  4 +-
 .../src/PreviewProvider.tsx                   | 13 +--
 .../src/Table.tsx                             |  4 +-
 .../api/{exit-preview.ts => disable-draft.ts} |  2 +-
 .../src/pages/api/draft.ts}                   |  2 +-
 .../src/pages/index.tsx                       | 88 ++++++++---------
 .../src/sanity.client.ts                      | 48 ++++++----
 .../src/sanity.env.ts                         |  5 -
 .../src/pages/api/disable-draft.ts}           |  2 +-
 .../src/pages/api/draft.ts}                   |  2 +-
 apps/next-pages-router/src/pages/index.tsx    | 66 ++++++-------
 apps/next-pages-router/src/sanity.client.ts   | 34 +++++--
 apps/remix-groq-store-lazy/app/Footer.tsx     |  4 +-
 .../app/PreviewProvider.tsx                   | 23 ++---
 apps/remix-groq-store-lazy/app/Table.tsx      |  4 +-
 apps/remix-groq-store-lazy/app/getClient.tsx  | 29 ++++++
 .../app/routes/index.tsx                      | 53 ++---------
 apps/remix-groq-store-lazy/tsconfig.json      |  2 +-
 apps/remix-groq-store/app/Footer.tsx          |  4 +-
 apps/remix-groq-store/app/PreviewProvider.tsx | 23 ++---
 apps/remix-groq-store/app/Table.tsx           |  4 +-
 apps/remix-groq-store/app/getClient.tsx       | 29 ++++++
 apps/remix-groq-store/app/routes/index.tsx    | 77 +++++----------
 apps/remix-live-store-lazy/app/Footer.tsx     |  4 +-
 .../app/PreviewProvider.tsx                   | 21 ++---
 apps/remix-live-store-lazy/app/Table.tsx      |  4 +-
 apps/remix-live-store-lazy/app/getClient.tsx  | 33 +++++++
 .../app/routes/index.tsx                      | 49 ++--------
 apps/remix-live-store-lazy/app/utils.ts       | 39 --------
 apps/remix-live-store/app/Footer.tsx          |  4 +-
 apps/remix-live-store/app/PreviewProvider.tsx | 21 ++---
 apps/remix-live-store/app/Table.tsx           |  4 +-
 apps/remix-live-store/app/getClient.tsx       | 33 +++++++
 apps/remix-live-store/app/routes/index.tsx    | 71 +++++---------
 apps/remix-live-store/app/utils.ts            | 39 --------
 apps/remix/app/routes/index.tsx               | 57 ++++++-----
 packages/preview-kit/README.md                | 58 +++++++++++-
 .../preview-kit/src/LiveQueryProvider.tsx     | 57 +++++------
 .../preview-kit/src/client/createClient.ts    |  4 +-
 packages/preview-kit/src/client/request.ts    | 15 +--
 packages/preview-kit/src/client/sourcemap.ts  |  4 +-
 packages/preview-kit/src/client/transcode.ts  |  3 +-
 packages/preview-kit/src/client/types.ts      |  8 +-
 packages/ui/src/react/components.tsx          |  2 +-
 95 files changed, 1043 insertions(+), 984 deletions(-)
 create mode 100644 apps/next-app-router-groq-store/app/DraftModeButton.tsx
 delete mode 100644 apps/next-app-router-groq-store/app/ViewPublishedButtonWithLoadingStatus.tsx
 create mode 100644 apps/next-app-router-groq-store/app/actions.ts
 create mode 100644 apps/next-app-router-groq-store/app/api/disable-draft/route.ts
 delete mode 100644 apps/next-app-router-groq-store/app/sanity.env.ts
 create mode 100644 apps/next-app-router-groq-store/next.config.mjs
 create mode 100644 apps/next-app-router-live-store/app/DraftModeButton.tsx
 delete mode 100644 apps/next-app-router-live-store/app/ViewPublishedButtonWithLoadingStatus.tsx
 create mode 100644 apps/next-app-router-live-store/app/actions.ts
 create mode 100644 apps/next-app-router-live-store/app/api/disable-draft/route.ts
 delete mode 100644 apps/next-app-router-live-store/app/sanity.env.ts
 create mode 100644 apps/next-app-router-live-store/next.config.mjs
 create mode 100644 apps/next-app-router-no-store/app/DraftModeButton.tsx
 delete mode 100644 apps/next-app-router-no-store/app/ViewPublishedButtonWithLoadingStatus.tsx
 create mode 100644 apps/next-app-router-no-store/app/actions.ts
 create mode 100644 apps/next-app-router-no-store/app/api/disable-draft/route.ts
 delete mode 100644 apps/next-app-router-no-store/app/sanity.env.ts
 create mode 100644 apps/next-app-router-no-store/next.config.mjs
 create mode 100644 apps/next-app-router/app/DraftModeButton.tsx
 create mode 100644 apps/next-app-router/app/actions.ts
 create mode 100644 apps/next-app-router/app/api/disable-draft/route.ts
 create mode 100644 apps/next-app-router/next.config.mjs
 rename apps/{next-pages-router/src/pages/api/exit-preview.ts => next-pages-router-groq-store/src/pages/api/disable-draft.ts} (84%)
 rename apps/next-pages-router-groq-store/src/pages/api/{preview.ts => draft.ts} (84%)
 delete mode 100644 apps/next-pages-router-groq-store/src/sanity.env.ts
 rename apps/next-pages-router-live-store/src/pages/api/{exit-preview.ts => disable-draft.ts} (84%)
 rename apps/{next-pages-router/src/pages/api/preview.ts => next-pages-router-live-store/src/pages/api/draft.ts} (84%)
 delete mode 100644 apps/next-pages-router-live-store/src/sanity.env.ts
 rename apps/{next-pages-router-groq-store/src/pages/api/exit-preview.ts => next-pages-router/src/pages/api/disable-draft.ts} (84%)
 rename apps/{next-pages-router-live-store/src/pages/api/preview.ts => next-pages-router/src/pages/api/draft.ts} (84%)
 create mode 100644 apps/remix-groq-store-lazy/app/getClient.tsx
 create mode 100644 apps/remix-groq-store/app/getClient.tsx
 create mode 100644 apps/remix-live-store-lazy/app/getClient.tsx
 delete mode 100644 apps/remix-live-store-lazy/app/utils.ts
 create mode 100644 apps/remix-live-store/app/getClient.tsx
 delete mode 100644 apps/remix-live-store/app/utils.ts

diff --git a/MIGRATION.md b/MIGRATION.md
index 85d8366c..55c93813 100644
--- a/MIGRATION.md
+++ b/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
diff --git a/apps/next-app-router-groq-store/app/DraftModeButton.tsx b/apps/next-app-router-groq-store/app/DraftModeButton.tsx
new file mode 100644
index 00000000..54c7aed6
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/next-app-router-groq-store/app/PreviewProvider.tsx b/apps/next-app-router-groq-store/app/PreviewProvider.tsx
index 451eb08c..a84b95a8 100644
--- a/apps/next-app-router-groq-store/app/PreviewProvider.tsx
+++ b/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>
diff --git a/apps/next-app-router-groq-store/app/RefreshButton.tsx b/apps/next-app-router-groq-store/app/RefreshButton.tsx
index 7d5d2776..60159cfb 100644
--- a/apps/next-app-router-groq-store/app/RefreshButton.tsx
+++ b/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>
   )
 }
diff --git a/apps/next-app-router-groq-store/app/ViewPublishedButtonWithLoadingStatus.tsx b/apps/next-app-router-groq-store/app/ViewPublishedButtonWithLoadingStatus.tsx
deleted file mode 100644
index 8f798a09..00000000
--- a/apps/next-app-router-groq-store/app/ViewPublishedButtonWithLoadingStatus.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client'
-
-import { tableQuery } from 'ui/react'
-import { ViewPublishedButton } from 'ui/react'
-import { useListeningQueryStatus } from '@sanity/preview-kit'
-
-export default function ViewPublishedButtonWithLoadingStatus() {
-  const status = useListeningQueryStatus(tableQuery)
-
-  return <ViewPublishedButton isLoading={status === 'loading'} />
-}
diff --git a/apps/next-app-router-groq-store/app/actions.ts b/apps/next-app-router-groq-store/app/actions.ts
new file mode 100644
index 00000000..a678db66
--- /dev/null
+++ b/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('/')
+}
diff --git a/apps/next-app-router-groq-store/app/api/disable-draft/route.ts b/apps/next-app-router-groq-store/app/api/disable-draft/route.ts
new file mode 100644
index 00000000..389033f7
--- /dev/null
+++ b/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('/')
+}
diff --git a/apps/next-app-router-groq-store/app/api/draft/route.ts b/apps/next-app-router-groq-store/app/api/draft/route.ts
index 67c940b9..f2ba7797 100644
--- a/apps/next-app-router-groq-store/app/api/draft/route.ts
+++ b/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('/')
 }
diff --git a/apps/next-app-router-groq-store/app/page.tsx b/apps/next-app-router-groq-store/app/page.tsx
index 23cf8f7a..d0b0a566 100644
--- a/apps/next-app-router-groq-store/app/page.tsx
+++ b/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"
diff --git a/apps/next-app-router-groq-store/app/sanity.client.ts b/apps/next-app-router-groq-store/app/sanity.client.ts
index fa6af96a..20c56df3 100644
--- a/apps/next-app-router-groq-store/app/sanity.client.ts
+++ b/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
 }
diff --git a/apps/next-app-router-groq-store/app/sanity.env.ts b/apps/next-app-router-groq-store/app/sanity.env.ts
deleted file mode 100644
index 9150e857..00000000
--- a/apps/next-app-router-groq-store/app/sanity.env.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'pv8y60vp'
-export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production'
-// export const apiVersion =
-//   process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15'
-// @TODO remove this after `perspective` is GA
-export const apiVersion = 'X'
-export const useCdn = false
diff --git a/apps/next-app-router-groq-store/next.config.mjs b/apps/next-app-router-groq-store/next.config.mjs
new file mode 100644
index 00000000..f7657674
--- /dev/null
+++ b/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
diff --git a/apps/next-app-router-live-store/app/DraftModeButton.tsx b/apps/next-app-router-live-store/app/DraftModeButton.tsx
new file mode 100644
index 00000000..54c7aed6
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/apps/next-app-router-live-store/app/PreviewFooter.tsx b/apps/next-app-router-live-store/app/PreviewFooter.tsx
index 80b6f89c..7fd860c9 100644
--- a/apps/next-app-router-live-store/app/PreviewFooter.tsx
+++ b/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} />
 }
diff --git a/apps/next-app-router-live-store/app/PreviewProvider.tsx b/apps/next-app-router-live-store/app/PreviewProvider.tsx
index de5db139..644251f5 100644
--- a/apps/next-app-router-live-store/app/PreviewProvider.tsx
+++ b/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>
   )
diff --git a/apps/next-app-router-live-store/app/PreviewTable.tsx b/apps/next-app-router-live-store/app/PreviewTable.tsx
index bb993aa4..f2a324f8 100644
--- a/apps/next-app-router-live-store/app/PreviewTable.tsx
+++ b/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} />
 }
diff --git a/apps/next-app-router-live-store/app/RefreshButton.tsx b/apps/next-app-router-live-store/app/RefreshButton.tsx
index 7d5d2776..60159cfb 100644
--- a/apps/next-app-router-live-store/app/RefreshButton.tsx
+++ b/apps/next-app-router-live-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>
   )
 }
diff --git a/apps/next-app-router-live-store/app/ViewPublishedButtonWithLoadingStatus.tsx b/apps/next-app-router-live-store/app/ViewPublishedButtonWithLoadingStatus.tsx
deleted file mode 100644
index 8f798a09..00000000
--- a/apps/next-app-router-live-store/app/ViewPublishedButtonWithLoadingStatus.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client'
-
-import { tableQuery } from 'ui/react'
-import { ViewPublishedButton } from 'ui/react'
-import { useListeningQueryStatus } from '@sanity/preview-kit'
-
-export default function ViewPublishedButtonWithLoadingStatus() {
-  const status = useListeningQueryStatus(tableQuery)
-
-  return <ViewPublishedButton isLoading={status === 'loading'} />
-}
diff --git a/apps/next-app-router-live-store/app/actions.ts b/apps/next-app-router-live-store/app/actions.ts
new file mode 100644
index 00000000..a678db66
--- /dev/null
+++ b/apps/next-app-router-live-store/app/actions.ts
@@ -0,0 +1,7 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export async function revalidate() {
+  await revalidatePath('/')
+}
diff --git a/apps/next-app-router-live-store/app/api/disable-draft/route.ts b/apps/next-app-router-live-store/app/api/disable-draft/route.ts
new file mode 100644
index 00000000..389033f7
--- /dev/null
+++ b/apps/next-app-router-live-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('/')
+}
diff --git a/apps/next-app-router-live-store/app/api/draft/route.ts b/apps/next-app-router-live-store/app/api/draft/route.ts
index 67c940b9..f2ba7797 100644
--- a/apps/next-app-router-live-store/app/api/draft/route.ts
+++ b/apps/next-app-router-live-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('/')
 }
diff --git a/apps/next-app-router-live-store/app/page.tsx b/apps/next-app-router-live-store/app/page.tsx
index 723ddb04..d0b0a566 100644
--- a/apps/next-app-router-live-store/app/page.tsx
+++ b/apps/next-app-router-live-store/app/page.tsx
@@ -1,52 +1,37 @@
-import { draftMode } from 'next/headers'
-import {
-  ViewPublishedButton,
-  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 { sanityClient, draftsClient } 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'
-
-const token = process.env.SANITY_API_READ_TOKEN
-if (!token) {
-  throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-}
+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 = isDraftMode ? draftsClient.withConfig({ token }) : sanityClient
-  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"
diff --git a/apps/next-app-router-live-store/app/sanity.client.ts b/apps/next-app-router-live-store/app/sanity.client.ts
index 91c91849..ae057d1f 100644
--- a/apps/next-app-router-live-store/app/sanity.client.ts
+++ b/apps/next-app-router-live-store/app/sanity.client.ts
@@ -1,23 +1,32 @@
 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
+const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
 
-export const sanityClient = createClient({
-  projectId,
-  dataset,
-  apiVersion,
-  useCdn,
-  studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-  // encodeSourceMap: process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview',
-  encodeSourceMap: true,
-  encodeSourceMapAtPath: () => true,
-})
-
-// Used to preview drafts as they will appear once published
-export const draftsClient = sanityClient.withConfig({
-  perspective: 'previewDrafts',
-  // required by previewDrafts
-  apiVersion: 'X',
-  useCdn: false,
-})
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    studioUrl,
+    logger: console,
+    resultSourceMap: true,
+    perspective: 'published',
+  })
+  if (preview) {
+    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
+}
diff --git a/apps/next-app-router-live-store/app/sanity.env.ts b/apps/next-app-router-live-store/app/sanity.env.ts
deleted file mode 100644
index d93b8e4b..00000000
--- a/apps/next-app-router-live-store/app/sanity.env.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'pv8y60vp'
-export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production'
-export const apiVersion =
-  process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15'
-export const useCdn = false
diff --git a/apps/next-app-router-live-store/next.config.mjs b/apps/next-app-router-live-store/next.config.mjs
new file mode 100644
index 00000000..f7657674
--- /dev/null
+++ b/apps/next-app-router-live-store/next.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    logging: 'verbose',
+    serverActions: true,
+  },
+}
+
+export default nextConfig
diff --git a/apps/next-app-router-no-store/app/DraftModeButton.tsx b/apps/next-app-router-no-store/app/DraftModeButton.tsx
new file mode 100644
index 00000000..54c7aed6
--- /dev/null
+++ b/apps/next-app-router-no-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>
+  )
+}
diff --git a/apps/next-app-router-no-store/app/RefreshButton.tsx b/apps/next-app-router-no-store/app/RefreshButton.tsx
index 7d5d2776..60159cfb 100644
--- a/apps/next-app-router-no-store/app/RefreshButton.tsx
+++ b/apps/next-app-router-no-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>
   )
 }
diff --git a/apps/next-app-router-no-store/app/ViewPublishedButtonWithLoadingStatus.tsx b/apps/next-app-router-no-store/app/ViewPublishedButtonWithLoadingStatus.tsx
deleted file mode 100644
index 8f798a09..00000000
--- a/apps/next-app-router-no-store/app/ViewPublishedButtonWithLoadingStatus.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client'
-
-import { tableQuery } from 'ui/react'
-import { ViewPublishedButton } from 'ui/react'
-import { useListeningQueryStatus } from '@sanity/preview-kit'
-
-export default function ViewPublishedButtonWithLoadingStatus() {
-  const status = useListeningQueryStatus(tableQuery)
-
-  return <ViewPublishedButton isLoading={status === 'loading'} />
-}
diff --git a/apps/next-app-router-no-store/app/actions.ts b/apps/next-app-router-no-store/app/actions.ts
new file mode 100644
index 00000000..a678db66
--- /dev/null
+++ b/apps/next-app-router-no-store/app/actions.ts
@@ -0,0 +1,7 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export async function revalidate() {
+  await revalidatePath('/')
+}
diff --git a/apps/next-app-router-no-store/app/api/disable-draft/route.ts b/apps/next-app-router-no-store/app/api/disable-draft/route.ts
new file mode 100644
index 00000000..389033f7
--- /dev/null
+++ b/apps/next-app-router-no-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('/')
+}
diff --git a/apps/next-app-router-no-store/app/api/draft/route.ts b/apps/next-app-router-no-store/app/api/draft/route.ts
index 67c940b9..f2ba7797 100644
--- a/apps/next-app-router-no-store/app/api/draft/route.ts
+++ b/apps/next-app-router-no-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('/')
 }
diff --git a/apps/next-app-router-no-store/app/page.tsx b/apps/next-app-router-no-store/app/page.tsx
index 2fadee6c..65d9d94a 100644
--- a/apps/next-app-router-no-store/app/page.tsx
+++ b/apps/next-app-router-no-store/app/page.tsx
@@ -1,40 +1,36 @@
-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 { sanityClient, draftsClient } from './sanity.client'
-import PreviewTable from './PreviewTable'
+import { draftMode } from 'next/headers'
+import { Footer, Table, Timestamp, footerQuery, tableQuery } from 'ui/react'
+import DraftModeButton from './DraftModeButton'
 import PreviewFooter from './PreviewFooter'
-import ViewPublishedButtonWithLoadingStatus from './ViewPublishedButtonWithLoadingStatus'
+import PreviewTable from './PreviewTable'
+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 = isDraftMode ? draftsClient : sanityClient
-  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' }}>
-        {button}
-        {isDraftMode ? (
-          <>
-            <PreviewTable data={await table} />
-            <PreviewFooter data={await footer} />
-          </>
-        ) : (
-          <>
-            <Table data={await table} />
-            <Footer data={await footer} />
-          </>
-        )}
-        <Timestamp date={new Date()} />
-      </form>
+      {preview ? (
+        <>
+          <DraftModeButton />
+          <PreviewTable data={table} />
+          <PreviewFooter data={footer} />
+        </>
+      ) : (
+        <>
+          <DraftModeButton />
+          <Table data={table} />
+          <Footer data={footer} />
+        </>
+      )}
+      <Timestamp date={new Date()} />
       <RefreshButton />
       <script
         type="application/json"
diff --git a/apps/next-app-router-no-store/app/sanity.client.ts b/apps/next-app-router-no-store/app/sanity.client.ts
index defeafff..2645e838 100644
--- a/apps/next-app-router-no-store/app/sanity.client.ts
+++ b/apps/next-app-router-no-store/app/sanity.client.ts
@@ -1,26 +1,32 @@
 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
+const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
 
-export const sanityClient = createClient({
-  projectId,
-  dataset,
-  apiVersion,
-  useCdn,
-  studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-  encodeSourceMapAtPath: () => true,
-})
-
-const token = process.env.SANITY_API_READ_TOKEN
-if (!token) {
-  throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    studioUrl,
+    logger: console,
+    encodeSourceMap: true,
+    perspective: 'published',
+  })
+  if (preview) {
+    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
 }
-// Used to preview drafts as they will appear once published
-export const draftsClient = sanityClient.withConfig({
-  perspective: 'previewDrafts',
-  // required by previewDrafts
-  apiVersion: 'X',
-  useCdn: false,
-  token,
-})
diff --git a/apps/next-app-router-no-store/app/sanity.env.ts b/apps/next-app-router-no-store/app/sanity.env.ts
deleted file mode 100644
index d93b8e4b..00000000
--- a/apps/next-app-router-no-store/app/sanity.env.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'pv8y60vp'
-export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production'
-export const apiVersion =
-  process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15'
-export const useCdn = false
diff --git a/apps/next-app-router-no-store/next.config.mjs b/apps/next-app-router-no-store/next.config.mjs
new file mode 100644
index 00000000..f7657674
--- /dev/null
+++ b/apps/next-app-router-no-store/next.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    logging: 'verbose',
+    serverActions: true,
+  },
+}
+
+export default nextConfig
diff --git a/apps/next-app-router/app/DraftModeButton.tsx b/apps/next-app-router/app/DraftModeButton.tsx
new file mode 100644
index 00000000..54c7aed6
--- /dev/null
+++ b/apps/next-app-router/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>
+  )
+}
diff --git a/apps/next-app-router/app/RefreshButton.tsx b/apps/next-app-router/app/RefreshButton.tsx
index 7d5d2776..62a82f29 100644
--- a/apps/next-app-router/app/RefreshButton.tsx
+++ b/apps/next-app-router/app/RefreshButton.tsx
@@ -1,20 +1,30 @@
 'use client'
 
-import { Button } from 'ui/react'
 import { useRouter } from 'next/navigation'
+import { useEffect, useTransition } from 'react'
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { Button } from 'ui/react'
+import { revalidate } from './actions'
 
-export default function RefreshButton() {
+function useRefresh() {
+  const { pending } = useFormStatus()
   const router = useRouter()
+  const [loading, startTransition] = useTransition()
+  useEffect(() => {
+    if (!pending) {
+      startTransition(() => router.refresh())
+    }
+  }, [pending, router])
+
+  return pending || 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>
   )
 }
diff --git a/apps/next-app-router/app/actions.ts b/apps/next-app-router/app/actions.ts
new file mode 100644
index 00000000..a678db66
--- /dev/null
+++ b/apps/next-app-router/app/actions.ts
@@ -0,0 +1,7 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export async function revalidate() {
+  await revalidatePath('/')
+}
diff --git a/apps/next-app-router/app/api/disable-draft/route.ts b/apps/next-app-router/app/api/disable-draft/route.ts
new file mode 100644
index 00000000..389033f7
--- /dev/null
+++ b/apps/next-app-router/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('/')
+}
diff --git a/apps/next-app-router/app/api/draft/route.ts b/apps/next-app-router/app/api/draft/route.ts
index 67c940b9..f2ba7797 100644
--- a/apps/next-app-router/app/api/draft/route.ts
+++ b/apps/next-app-router/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('/')
 }
diff --git a/apps/next-app-router/app/page.tsx b/apps/next-app-router/app/page.tsx
index bc9416e8..617f19ee 100644
--- a/apps/next-app-router/app/page.tsx
+++ b/apps/next-app-router/app/page.tsx
@@ -1,24 +1,24 @@
+import { unstable__adapter, unstable__environment } from '@sanity/client'
 import { draftMode } from 'next/headers'
-import { ViewPublishedButton, PreviewDraftsButton } from 'ui/react'
+import { Footer, Table, Timestamp, footerQuery, tableQuery } from 'ui/react'
+import DraftModeButton from './DraftModeButton'
 import RefreshButton from './RefreshButton'
-import { unstable__adapter, unstable__environment } from '@sanity/client'
-import { Table, Timestamp, tableQuery, footerQuery, Footer } from 'ui/react'
-import { sanityClient, draftsClient } from './sanity.client'
+import { getClient } from './sanity.client'
 
 export default async function Page() {
-  const isDraftMode = draftMode().isEnabled
-  const button = isDraftMode ? <ViewPublishedButton /> : <PreviewDraftsButton />
-  const client = isDraftMode ? draftsClient : sanityClient
-  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' }}>
-        {button}
-        <Table data={await table} />
-        <Footer data={await footer} />
-        <Timestamp date={new Date()} />
-      </form>
+      <DraftModeButton />
+      <Table data={table} />
+      <Footer data={footer} />
+      <Timestamp date={new Date()} />
       <RefreshButton />
       <script
         type="application/json"
diff --git a/apps/next-app-router/app/sanity.client.ts b/apps/next-app-router/app/sanity.client.ts
index 17bea8d2..02c5bec2 100644
--- a/apps/next-app-router/app/sanity.client.ts
+++ b/apps/next-app-router/app/sanity.client.ts
@@ -2,30 +2,30 @@ import { createClient, type SanityClient } from '@sanity/preview-kit/client'
 
 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'
-// @TODO remove this after `perspective` is GA
-const apiVersion = 'X'
-const useCdn = false
-const token = process.env.SANITY_API_READ_TOKEN
-if (!token) {
-  throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-}
-
-export type { SanityClient }
+const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15'
+const useCdn = true
+const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
 
-export const sanityClient = createClient({
-  projectId,
-  dataset,
-  apiVersion,
-  useCdn,
-  studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-  encodeSourceMapAtPath: () => true,
-  perspective: 'published',
-  token,
-})
-
-// Used to preview drafts as they will appear once published
-export const draftsClient = sanityClient.withConfig({
-  perspective: 'previewDrafts',
-  useCdn: false,
-})
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    studioUrl,
+    logger: console,
+    encodeSourceMap: true,
+    perspective: 'published',
+  })
+  if (preview) {
+    if (!preview.token) {
+      throw new Error('You must provide a token to preview drafts')
+    }
+    return client.withConfig({
+      perspective: 'previewDrafts',
+      token: preview.token,
+      useCdn: false,
+    })
+  }
+  return client
+}
diff --git a/apps/next-app-router/next.config.mjs b/apps/next-app-router/next.config.mjs
new file mode 100644
index 00000000..f7657674
--- /dev/null
+++ b/apps/next-app-router/next.config.mjs
@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    logging: 'verbose',
+    serverActions: true,
+  },
+}
+
+export default nextConfig
diff --git a/apps/next-pages-router-groq-store/src/Footer.tsx b/apps/next-pages-router-groq-store/src/Footer.tsx
index 4093838d..6c931df6 100644
--- a/apps/next-pages-router-groq-store/src/Footer.tsx
+++ b/apps/next-pages-router-groq-store/src/Footer.tsx
@@ -1,8 +1,8 @@
 import { FooterProps, footerQuery, Footer as UiFooter } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Footer(props: FooterProps) {
-  const data = useListeningQuery<FooterProps['data']>(props.data, footerQuery)
+  const [data] = useLiveQuery<FooterProps['data']>(props.data, footerQuery)
 
   return <UiFooter data={data} />
 }
diff --git a/apps/next-pages-router-groq-store/src/PreviewProvider.tsx b/apps/next-pages-router-groq-store/src/PreviewProvider.tsx
index 0380421f..152bdf7f 100644
--- a/apps/next-pages-router-groq-store/src/PreviewProvider.tsx
+++ b/apps/next-pages-router-groq-store/src/PreviewProvider.tsx
@@ -1,5 +1,6 @@
-import { GroqStoreProvider } from '@sanity/preview-kit/groq-store'
-import { dataset, projectId } from './sanity.env'
+import { LiveQueryProvider } from '@sanity/preview-kit'
+import { useMemo } from 'react'
+import { getClient } from './sanity.client'
 
 export default function PreviewProvider({
   children,
@@ -8,14 +9,14 @@ export default function PreviewProvider({
   children: React.ReactNode
   token: string
 }) {
+  const client = useMemo(() => getClient({ token }), [token])
   return (
-    <GroqStoreProvider
-      projectId={projectId}
-      dataset={dataset}
-      token={token}
-      documentLimit={Infinity}
+    <LiveQueryProvider
+      client={client}
+      logger={console}
+      cache={{ includeTypes: ['page'] }}
     >
       {children}
-    </GroqStoreProvider>
+    </LiveQueryProvider>
   )
 }
diff --git a/apps/next-pages-router-groq-store/src/Table.tsx b/apps/next-pages-router-groq-store/src/Table.tsx
index 7e017414..893833d6 100644
--- a/apps/next-pages-router-groq-store/src/Table.tsx
+++ b/apps/next-pages-router-groq-store/src/Table.tsx
@@ -1,8 +1,8 @@
 import { TableProps, tableQuery, Table as UiTable } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Table(props: TableProps) {
-  const data = useListeningQuery<TableProps['data']>(props.data, tableQuery)
+  const [data] = useLiveQuery<TableProps['data']>(props.data, tableQuery)
 
   return <UiTable data={data} />
 }
diff --git a/apps/next-pages-router/src/pages/api/exit-preview.ts b/apps/next-pages-router-groq-store/src/pages/api/disable-draft.ts
similarity index 84%
rename from apps/next-pages-router/src/pages/api/exit-preview.ts
rename to apps/next-pages-router-groq-store/src/pages/api/disable-draft.ts
index 2f10d5b0..8a8d1402 100644
--- a/apps/next-pages-router/src/pages/api/exit-preview.ts
+++ b/apps/next-pages-router-groq-store/src/pages/api/disable-draft.ts
@@ -4,7 +4,7 @@ export default function exitPreview(
   req: NextApiRequest,
   res: NextApiResponse
 ): void {
-  res.clearPreviewData({})
+  res.setDraftMode({ enable: false })
   res.writeHead(307, { Location: '/' })
   res.end()
 }
diff --git a/apps/next-pages-router-groq-store/src/pages/api/preview.ts b/apps/next-pages-router-groq-store/src/pages/api/draft.ts
similarity index 84%
rename from apps/next-pages-router-groq-store/src/pages/api/preview.ts
rename to apps/next-pages-router-groq-store/src/pages/api/draft.ts
index 5e2bf2ba..bff344b8 100644
--- a/apps/next-pages-router-groq-store/src/pages/api/preview.ts
+++ b/apps/next-pages-router-groq-store/src/pages/api/draft.ts
@@ -4,7 +4,7 @@ export default function preview(
   req: NextApiRequest,
   res: NextApiResponse
 ): void {
-  res.setPreviewData({}, {})
+  res.setDraftMode({ enable: true })
   res.writeHead(307, { Location: '/' })
   res.end()
 }
diff --git a/apps/next-pages-router-groq-store/src/pages/index.tsx b/apps/next-pages-router-groq-store/src/pages/index.tsx
index c5a7bf50..1aae362a 100644
--- a/apps/next-pages-router-groq-store/src/pages/index.tsx
+++ b/apps/next-pages-router-groq-store/src/pages/index.tsx
@@ -1,3 +1,9 @@
+import {
+  unstable__adapter as adapter,
+  unstable__environment as environment,
+} from '@sanity/client'
+import type { GetStaticProps, InferGetStaticPropsType } from 'next'
+import { useEffect } from 'react'
 import {
   Button,
   Container,
@@ -9,52 +15,35 @@ import {
   footerQuery,
   tableQuery,
 } from 'ui/react'
-import type { GetStaticProps, InferGetStaticPropsType } from 'next'
-import {
-  unstable__adapter as adapter,
-  unstable__environment as environment,
-} from '@sanity/client'
-import { sanityClient } from '../sanity.client'
-import { useEffect } from 'react'
+import { getClient } from '../sanity.client'
 
+import { useListeningQueryStatus } from '@sanity/preview-kit'
 import { lazy } from 'react'
-import Table from '../Table'
 import Footer from '../Footer'
-import { useListeningQueryStatus } from '@sanity/preview-kit'
+import Table from '../Table'
 
 const PreviewProvider = lazy(() => import('../PreviewProvider'))
 
 export const getStaticProps: GetStaticProps<{
-  preview: boolean
+  draftMode: boolean
   token: string
   table: TableProps['data']
   footer: FooterProps['data']
   timestamp: string
   server__adapter: typeof adapter
   server__environment: typeof environment
-}> = async ({ preview = false }) => {
-  const token = process.env.SANITY_API_READ_TOKEN
-  if (!token) {
-    throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-  }
-
-  const client = preview
-    ? // Used to preview drafts as they will appear once published
-      sanityClient.withConfig({
-        perspective: 'previewDrafts',
-        // required by previewDrafts
-        apiVersion: 'X',
-        useCdn: false,
-        token,
-      })
-    : sanityClient
-  const table = client.fetch(tableQuery)
-  const footer = client.fetch(footerQuery)
+}> = async ({ draftMode = false }) => {
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const client = getClient(draftMode ? { token } : undefined)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   const timestamp = new Date().toJSON()
 
   return {
     props: {
-      preview,
+      draftMode,
       token,
       table: await table,
       footer: await footer,
@@ -66,7 +55,7 @@ export const getStaticProps: GetStaticProps<{
 }
 
 export default function Page({
-  preview,
+  draftMode,
   token,
   table,
   footer,
@@ -74,13 +63,6 @@ export default function Page({
   server__adapter,
   server__environment,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const button = preview ? (
-    <ViewPublishedButtonWithLoadingStatus />
-  ) : (
-    <PreviewDraftsButton />
-  )
-  const action = preview ? '/api/exit-preview' : '/api/preview'
-
   useEffect(() => {
     console.log({
       client__adapter: adapter,
@@ -90,22 +72,25 @@ export default function Page({
 
   return (
     <Container>
-      <form action={action} style={{ display: 'contents' }}>
-        {preview ? (
-          <PreviewProvider token={token!}>
-            {button}
-            <Table data={table} />
-            <Footer data={footer} />
-          </PreviewProvider>
+      <form style={{ display: 'contents' }}>
+        {draftMode ? (
+          <ViewPublishedButton formAction="/api/disable-draft" />
         ) : (
-          <>
-            {button}
-            <Table data={table} />
-            <Footer data={footer} />
-          </>
+          <PreviewDraftsButton formAction="/api/draft" />
         )}
-        <Timestamp date={timestamp} />
       </form>
+      {draftMode ? (
+        <PreviewProvider token={token!}>
+          <Table data={table} />
+          <Footer data={footer} />
+        </PreviewProvider>
+      ) : (
+        <>
+          <Table data={table} />
+          <Footer data={footer} />
+        </>
+      )}
+      <Timestamp date={timestamp} />
       <RefreshButton />
       <script
         type="application/json"
@@ -118,15 +103,10 @@ export default function Page({
 }
 
 function RefreshButton() {
+  const status = useListeningQueryStatus(tableQuery)
   return (
     <form action="/api/revalidate" className="section">
-      <Button>Refresh</Button>
+      <Button isLoading={status === 'loading'}>Refresh</Button>
     </form>
   )
 }
-
-function ViewPublishedButtonWithLoadingStatus() {
-  const status = useListeningQueryStatus(tableQuery)
-
-  return <ViewPublishedButton isLoading={status === 'loading'} />
-}
diff --git a/apps/next-pages-router-groq-store/src/sanity.client.ts b/apps/next-pages-router-groq-store/src/sanity.client.ts
index 0354cef7..248ce854 100644
--- a/apps/next-pages-router-groq-store/src/sanity.client.ts
+++ b/apps/next-pages-router-groq-store/src/sanity.client.ts
@@ -1,13 +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 = false
 
-export const sanityClient = createClient({
-  projectId,
-  dataset,
-  apiVersion,
-  useCdn,
-  studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-  encodeSourceMapAtPath: () => true,
-})
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    perspective: 'published',
+  })
+  if (preview) {
+    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
+}
diff --git a/apps/next-pages-router-groq-store/src/sanity.env.ts b/apps/next-pages-router-groq-store/src/sanity.env.ts
deleted file mode 100644
index d93b8e4b..00000000
--- a/apps/next-pages-router-groq-store/src/sanity.env.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'pv8y60vp'
-export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production'
-export const apiVersion =
-  process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15'
-export const useCdn = false
diff --git a/apps/next-pages-router-live-store/src/Footer.tsx b/apps/next-pages-router-live-store/src/Footer.tsx
index 4093838d..6c931df6 100644
--- a/apps/next-pages-router-live-store/src/Footer.tsx
+++ b/apps/next-pages-router-live-store/src/Footer.tsx
@@ -1,8 +1,8 @@
 import { FooterProps, footerQuery, Footer as UiFooter } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Footer(props: FooterProps) {
-  const data = useListeningQuery<FooterProps['data']>(props.data, footerQuery)
+  const [data] = useLiveQuery<FooterProps['data']>(props.data, footerQuery)
 
   return <UiFooter data={data} />
 }
diff --git a/apps/next-pages-router-live-store/src/PreviewProvider.tsx b/apps/next-pages-router-live-store/src/PreviewProvider.tsx
index b4eedac8..99c1c875 100644
--- a/apps/next-pages-router-live-store/src/PreviewProvider.tsx
+++ b/apps/next-pages-router-live-store/src/PreviewProvider.tsx
@@ -1,5 +1,5 @@
 import { LiveQueryProvider } from '@sanity/preview-kit'
-import { draftsClient } from './sanity.client'
+import { getClient } from './sanity.client'
 import { useMemo } from 'react'
 
 export default function PreviewProvider({
@@ -9,16 +9,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>
   )
diff --git a/apps/next-pages-router-live-store/src/Table.tsx b/apps/next-pages-router-live-store/src/Table.tsx
index 7e017414..893833d6 100644
--- a/apps/next-pages-router-live-store/src/Table.tsx
+++ b/apps/next-pages-router-live-store/src/Table.tsx
@@ -1,8 +1,8 @@
 import { TableProps, tableQuery, Table as UiTable } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Table(props: TableProps) {
-  const data = useListeningQuery<TableProps['data']>(props.data, tableQuery)
+  const [data] = useLiveQuery<TableProps['data']>(props.data, tableQuery)
 
   return <UiTable data={data} />
 }
diff --git a/apps/next-pages-router-live-store/src/pages/api/exit-preview.ts b/apps/next-pages-router-live-store/src/pages/api/disable-draft.ts
similarity index 84%
rename from apps/next-pages-router-live-store/src/pages/api/exit-preview.ts
rename to apps/next-pages-router-live-store/src/pages/api/disable-draft.ts
index 2f10d5b0..8a8d1402 100644
--- a/apps/next-pages-router-live-store/src/pages/api/exit-preview.ts
+++ b/apps/next-pages-router-live-store/src/pages/api/disable-draft.ts
@@ -4,7 +4,7 @@ export default function exitPreview(
   req: NextApiRequest,
   res: NextApiResponse
 ): void {
-  res.clearPreviewData({})
+  res.setDraftMode({ enable: false })
   res.writeHead(307, { Location: '/' })
   res.end()
 }
diff --git a/apps/next-pages-router/src/pages/api/preview.ts b/apps/next-pages-router-live-store/src/pages/api/draft.ts
similarity index 84%
rename from apps/next-pages-router/src/pages/api/preview.ts
rename to apps/next-pages-router-live-store/src/pages/api/draft.ts
index 5e2bf2ba..bff344b8 100644
--- a/apps/next-pages-router/src/pages/api/preview.ts
+++ b/apps/next-pages-router-live-store/src/pages/api/draft.ts
@@ -4,7 +4,7 @@ export default function preview(
   req: NextApiRequest,
   res: NextApiResponse
 ): void {
-  res.setPreviewData({}, {})
+  res.setDraftMode({ enable: true })
   res.writeHead(307, { Location: '/' })
   res.end()
 }
diff --git a/apps/next-pages-router-live-store/src/pages/index.tsx b/apps/next-pages-router-live-store/src/pages/index.tsx
index e73453de..1aae362a 100644
--- a/apps/next-pages-router-live-store/src/pages/index.tsx
+++ b/apps/next-pages-router-live-store/src/pages/index.tsx
@@ -1,3 +1,9 @@
+import {
+  unstable__adapter as adapter,
+  unstable__environment as environment,
+} from '@sanity/client'
+import type { GetStaticProps, InferGetStaticPropsType } from 'next'
+import { useEffect } from 'react'
 import {
   Button,
   Container,
@@ -9,46 +15,35 @@ import {
   footerQuery,
   tableQuery,
 } from 'ui/react'
-import type { GetStaticProps, InferGetStaticPropsType } from 'next'
-import {
-  unstable__adapter as adapter,
-  unstable__environment as environment,
-} from '@sanity/client'
-import { sanityClient, draftsClient } from '../sanity.client'
-import { useEffect } from 'react'
+import { getClient } from '../sanity.client'
 
+import { useListeningQueryStatus } from '@sanity/preview-kit'
 import { lazy } from 'react'
-import Table from '../Table'
 import Footer from '../Footer'
-import { useListeningQueryStatus } from '@sanity/preview-kit'
+import Table from '../Table'
 
 const PreviewProvider = lazy(() => import('../PreviewProvider'))
 
 export const getStaticProps: GetStaticProps<{
-  preview: boolean
+  draftMode: boolean
   token: string
   table: TableProps['data']
   footer: FooterProps['data']
   timestamp: string
   server__adapter: typeof adapter
   server__environment: typeof environment
-}> = async ({ preview = false }) => {
-  const token = process.env.SANITY_API_READ_TOKEN
-  if (!token) {
-    throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-  }
-
-  const client = preview
-    ? // Used to preview drafts as they will appear once published
-      draftsClient.withConfig({ token })
-    : sanityClient
-  const table = client.fetch(tableQuery)
-  const footer = client.fetch(footerQuery)
+}> = async ({ draftMode = false }) => {
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const client = getClient(draftMode ? { token } : undefined)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   const timestamp = new Date().toJSON()
 
   return {
     props: {
-      preview,
+      draftMode,
       token,
       table: await table,
       footer: await footer,
@@ -60,7 +55,7 @@ export const getStaticProps: GetStaticProps<{
 }
 
 export default function Page({
-  preview,
+  draftMode,
   token,
   table,
   footer,
@@ -68,13 +63,6 @@ export default function Page({
   server__adapter,
   server__environment,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const button = preview ? (
-    <ViewPublishedButtonWithLoadingStatus />
-  ) : (
-    <PreviewDraftsButton />
-  )
-  const action = preview ? '/api/exit-preview' : '/api/preview'
-
   useEffect(() => {
     console.log({
       client__adapter: adapter,
@@ -84,22 +72,25 @@ export default function Page({
 
   return (
     <Container>
-      <form action={action} style={{ display: 'contents' }}>
-        {preview ? (
-          <PreviewProvider token={token!}>
-            {button}
-            <Table data={table} />
-            <Footer data={footer} />
-          </PreviewProvider>
+      <form style={{ display: 'contents' }}>
+        {draftMode ? (
+          <ViewPublishedButton formAction="/api/disable-draft" />
         ) : (
-          <>
-            {button}
-            <Table data={table} />
-            <Footer data={footer} />
-          </>
+          <PreviewDraftsButton formAction="/api/draft" />
         )}
-        <Timestamp date={timestamp} />
       </form>
+      {draftMode ? (
+        <PreviewProvider token={token!}>
+          <Table data={table} />
+          <Footer data={footer} />
+        </PreviewProvider>
+      ) : (
+        <>
+          <Table data={table} />
+          <Footer data={footer} />
+        </>
+      )}
+      <Timestamp date={timestamp} />
       <RefreshButton />
       <script
         type="application/json"
@@ -112,15 +103,10 @@ export default function Page({
 }
 
 function RefreshButton() {
+  const status = useListeningQueryStatus(tableQuery)
   return (
     <form action="/api/revalidate" className="section">
-      <Button>Refresh</Button>
+      <Button isLoading={status === 'loading'}>Refresh</Button>
     </form>
   )
 }
-
-function ViewPublishedButtonWithLoadingStatus() {
-  const status = useListeningQueryStatus(tableQuery)
-
-  return <ViewPublishedButton isLoading={status === 'loading'} />
-}
diff --git a/apps/next-pages-router-live-store/src/sanity.client.ts b/apps/next-pages-router-live-store/src/sanity.client.ts
index dcc60ab9..ae057d1f 100644
--- a/apps/next-pages-router-live-store/src/sanity.client.ts
+++ b/apps/next-pages-router-live-store/src/sanity.client.ts
@@ -1,22 +1,32 @@
 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
+const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
 
-export const sanityClient = createClient({
-  projectId,
-  dataset,
-  apiVersion,
-  useCdn,
-  studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-  encodeSourceMap: true,
-  encodeSourceMapAtPath: () => true,
-})
-
-// Used to preview drafts as they will appear once published
-export const draftsClient = sanityClient.withConfig({
-  perspective: 'previewDrafts',
-  // required by previewDrafts
-  apiVersion: 'X',
-  useCdn: false,
-})
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    studioUrl,
+    logger: console,
+    resultSourceMap: true,
+    perspective: 'published',
+  })
+  if (preview) {
+    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
+}
diff --git a/apps/next-pages-router-live-store/src/sanity.env.ts b/apps/next-pages-router-live-store/src/sanity.env.ts
deleted file mode 100644
index d93b8e4b..00000000
--- a/apps/next-pages-router-live-store/src/sanity.env.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'pv8y60vp'
-export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production'
-export const apiVersion =
-  process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15'
-export const useCdn = false
diff --git a/apps/next-pages-router-groq-store/src/pages/api/exit-preview.ts b/apps/next-pages-router/src/pages/api/disable-draft.ts
similarity index 84%
rename from apps/next-pages-router-groq-store/src/pages/api/exit-preview.ts
rename to apps/next-pages-router/src/pages/api/disable-draft.ts
index 2f10d5b0..8a8d1402 100644
--- a/apps/next-pages-router-groq-store/src/pages/api/exit-preview.ts
+++ b/apps/next-pages-router/src/pages/api/disable-draft.ts
@@ -4,7 +4,7 @@ export default function exitPreview(
   req: NextApiRequest,
   res: NextApiResponse
 ): void {
-  res.clearPreviewData({})
+  res.setDraftMode({ enable: false })
   res.writeHead(307, { Location: '/' })
   res.end()
 }
diff --git a/apps/next-pages-router-live-store/src/pages/api/preview.ts b/apps/next-pages-router/src/pages/api/draft.ts
similarity index 84%
rename from apps/next-pages-router-live-store/src/pages/api/preview.ts
rename to apps/next-pages-router/src/pages/api/draft.ts
index 56e060fd..bff344b8 100644
--- a/apps/next-pages-router-live-store/src/pages/api/preview.ts
+++ b/apps/next-pages-router/src/pages/api/draft.ts
@@ -4,7 +4,7 @@ export default function preview(
   req: NextApiRequest,
   res: NextApiResponse
 ): void {
-  res.setPreviewData({})
+  res.setDraftMode({ enable: true })
   res.writeHead(307, { Location: '/' })
   res.end()
 }
diff --git a/apps/next-pages-router/src/pages/index.tsx b/apps/next-pages-router/src/pages/index.tsx
index f318f535..cb64ee95 100644
--- a/apps/next-pages-router/src/pages/index.tsx
+++ b/apps/next-pages-router/src/pages/index.tsx
@@ -1,3 +1,9 @@
+import {
+  unstable__adapter as adapter,
+  unstable__environment as environment,
+} from '@sanity/client'
+import type { GetStaticProps, InferGetStaticPropsType } from 'next'
+import { useEffect } from 'react'
 import {
   Button,
   Container,
@@ -11,46 +17,29 @@ import {
   footerQuery,
   tableQuery,
 } from 'ui/react'
-import type { GetStaticProps, InferGetStaticPropsType } from 'next'
-import {
-  unstable__adapter as adapter,
-  unstable__environment as environment,
-} from '@sanity/client'
-import { sanityClient } from '../sanity.client'
-import { useEffect } from 'react'
+import { getClient } from '../sanity.client'
 
 export const getStaticProps: GetStaticProps<{
-  preview: boolean
+  draftMode: boolean
   table: TableProps['data']
   footer: FooterProps['data']
   timestamp: string
   server__adapter: typeof adapter
   server__environment: typeof environment
-}> = async ({ preview = false }) => {
-  const token = process.env.SANITY_API_READ_TOKEN
-  if (!token) {
-    throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-  }
-
-  const client = preview
-    ? // Used to preview drafts as they will appear once published
-      sanityClient.withConfig({
-        perspective: 'previewDrafts',
-        // required by previewDrafts
-        apiVersion: 'X',
-        useCdn: false,
-        token,
-      })
-    : sanityClient
-  const table = client.fetch(tableQuery)
-  const footer = client.fetch(footerQuery)
+}> = async ({ draftMode = false }) => {
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const client = getClient(draftMode ? { token } : undefined)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   const timestamp = new Date().toJSON()
 
   return {
     props: {
-      preview,
-      table: await table,
-      footer: await footer,
+      draftMode,
+      table,
+      footer,
       timestamp,
       server__adapter: adapter,
       server__environment: environment,
@@ -59,16 +48,13 @@ export const getStaticProps: GetStaticProps<{
 }
 
 export default function Page({
-  preview,
+  draftMode,
   table,
   footer,
   timestamp,
   server__adapter,
   server__environment,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
-  const button = preview ? <ViewPublishedButton /> : <PreviewDraftsButton />
-  const action = preview ? '/api/exit-preview' : '/api/preview'
-
   useEffect(() => {
     console.log({
       client__adapter: adapter,
@@ -78,12 +64,16 @@ export default function Page({
 
   return (
     <Container>
-      <form action={action} style={{ display: 'contents' }}>
-        {button}
-        <Table data={table} />
-        <Footer data={footer} />
-        <Timestamp date={timestamp} />
+      <form style={{ display: 'contents' }}>
+        {draftMode ? (
+          <ViewPublishedButton formAction="/api/disable-draft" />
+        ) : (
+          <PreviewDraftsButton formAction="/api/draft" />
+        )}
       </form>
+      <Table data={table} />
+      <Footer data={footer} />
+      <Timestamp date={timestamp} />
       <RefreshButton />
       <script
         type="application/json"
diff --git a/apps/next-pages-router/src/sanity.client.ts b/apps/next-pages-router/src/sanity.client.ts
index 461fb5e6..e81015f5 100644
--- a/apps/next-pages-router/src/sanity.client.ts
+++ b/apps/next-pages-router/src/sanity.client.ts
@@ -4,14 +4,28 @@ 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 = false
+const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
 
-export type { SanityClient }
-
-export const sanityClient = createClient({
-  projectId,
-  dataset,
-  apiVersion,
-  useCdn,
-  studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-  encodeSourceMapAtPath: () => true,
-})
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    studioUrl,
+    logger: console,
+    encodeSourceMap: true,
+    perspective: 'published',
+  })
+  if (preview) {
+    if (!preview.token) {
+      throw new Error('You must provide a token to preview drafts')
+    }
+    return client.withConfig({
+      perspective: 'previewDrafts',
+      token: preview.token,
+      useCdn: false,
+    })
+  }
+  return client
+}
diff --git a/apps/remix-groq-store-lazy/app/Footer.tsx b/apps/remix-groq-store-lazy/app/Footer.tsx
index ea5fa903..a842bc09 100644
--- a/apps/remix-groq-store-lazy/app/Footer.tsx
+++ b/apps/remix-groq-store-lazy/app/Footer.tsx
@@ -1,9 +1,9 @@
 import type { FooterProps } from 'ui/react'
 import { footerQuery, Footer as UiFooter } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Footer(props: FooterProps) {
-  const data = useListeningQuery<FooterProps['data']>(props.data, footerQuery)
+  const [data] = useLiveQuery<FooterProps['data']>(props.data, footerQuery)
 
   return <UiFooter data={data} />
 }
diff --git a/apps/remix-groq-store-lazy/app/PreviewProvider.tsx b/apps/remix-groq-store-lazy/app/PreviewProvider.tsx
index 867b82f9..7be8180b 100644
--- a/apps/remix-groq-store-lazy/app/PreviewProvider.tsx
+++ b/apps/remix-groq-store-lazy/app/PreviewProvider.tsx
@@ -1,25 +1,22 @@
-import {
-  GroqStoreProvider,
-  type GroqStoreProviderProps,
-} from '@sanity/preview-kit/groq-store'
+import { LiveQueryProvider } from '@sanity/preview-kit'
+import { useMemo } from 'react'
+import { getClient } from './getClient'
 
 export default function PreviewProvider({
   children,
   token,
-  projectId,
-  dataset,
 }: {
   children: React.ReactNode
   token: string
-} & Pick<GroqStoreProviderProps, 'projectId' | 'dataset'>) {
+}) {
+  const client = useMemo(() => getClient({ token }), [token])
   return (
-    <GroqStoreProvider
-      projectId={projectId}
-      dataset={dataset}
-      token={token}
-      documentLimit={Infinity}
+    <LiveQueryProvider
+      client={client}
+      logger={console}
+      cache={{ includeTypes: ['page'] }}
     >
       {children}
-    </GroqStoreProvider>
+    </LiveQueryProvider>
   )
 }
diff --git a/apps/remix-groq-store-lazy/app/Table.tsx b/apps/remix-groq-store-lazy/app/Table.tsx
index 7622f96d..9c67945e 100644
--- a/apps/remix-groq-store-lazy/app/Table.tsx
+++ b/apps/remix-groq-store-lazy/app/Table.tsx
@@ -1,9 +1,9 @@
 import type { TableProps } from 'ui/react'
 import { tableQuery, Table as UiTable } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Table(props: TableProps) {
-  const data = useListeningQuery<TableProps['data']>(props.data, tableQuery)
+  const [data] = useLiveQuery<TableProps['data']>(props.data, tableQuery)
 
   return <UiTable data={data} />
 }
diff --git a/apps/remix-groq-store-lazy/app/getClient.tsx b/apps/remix-groq-store-lazy/app/getClient.tsx
new file mode 100644
index 00000000..8471d981
--- /dev/null
+++ b/apps/remix-groq-store-lazy/app/getClient.tsx
@@ -0,0 +1,29 @@
+import { createClient } from '@sanity/preview-kit/client'
+import { type SanityClient } from '@sanity/preview-kit/client'
+
+const projectId = 'pv8y60vp'
+const dataset = 'production'
+const apiVersion = '2022-11-15'
+const useCdn = false
+
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    perspective: 'published',
+  })
+  if (preview) {
+    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
+}
diff --git a/apps/remix-groq-store-lazy/app/routes/index.tsx b/apps/remix-groq-store-lazy/app/routes/index.tsx
index dfc4bb10..db41c925 100644
--- a/apps/remix-groq-store-lazy/app/routes/index.tsx
+++ b/apps/remix-groq-store-lazy/app/routes/index.tsx
@@ -1,8 +1,6 @@
-import { createClient } from '@sanity/preview-kit/client'
 import type { LoaderArgs } from '@vercel/remix'
 import { useLoaderData, useRevalidator } from '@remix-run/react'
 
-import type { TableProps, FooterProps } from 'ui/react'
 import {
   Timestamp,
   tableQuery,
@@ -21,11 +19,7 @@ import { useEffect, lazy, Suspense } from 'react'
 import Footer from '~/Footer'
 import Table from '~/Table'
 import { useListeningQueryStatus } from '@sanity/preview-kit'
-
-const projectId = process.env.SANITY_PROJECT_ID || 'pv8y60vp'
-const dataset = process.env.SANITY_DATASET || 'production'
-const apiVersion = process.env.SANITY_API_VERSION || '2022-11-15'
-const useCdn = true
+import { getClient } from '../getClient'
 
 const PreviewProvider = lazy(() => import('../PreviewProvider'))
 
@@ -33,40 +27,19 @@ export async function loader({ request }: LoaderArgs) {
   const session = await getSession(request.headers.get('Cookie'))
   const preview = session.get('view') === 'previewDrafts'
 
-  const sanityClient = createClient({
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-    encodeSourceMap: true,
-    encodeSourceMapAtPath: () => true,
-  })
-
-  const token = process.env.SANITY_API_READ_TOKEN
-  if (!token) {
-    throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-  }
-  // Used to preview drafts as they will appear once published
-  const draftsClient = sanityClient.withConfig({
-    perspective: 'previewDrafts',
-    // required by previewDrafts
-    apiVersion: 'X',
-    useCdn: false,
-    token,
-  })
-  const client = preview ? draftsClient : sanityClient
-  const table = client.fetch<TableProps['data']>(tableQuery)
-  const footer = client.fetch<FooterProps['data']>(footerQuery)
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const client = getClient(preview ? { token } : undefined)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   const timestamp = new Date().toJSON()
 
   return {
     preview,
     token,
-    projectId,
-    dataset,
-    table: await table,
-    footer: await footer,
+    table,
+    footer,
     timestamp,
     server__adapter: adapter,
     server__environment: environment,
@@ -77,8 +50,6 @@ export default function Index() {
   const {
     preview,
     token,
-    projectId,
-    dataset,
     table,
     footer,
     timestamp,
@@ -113,11 +84,7 @@ export default function Index() {
               </>
             }
           >
-            <PreviewProvider
-              token={token!}
-              projectId={projectId}
-              dataset={dataset}
-            >
+            <PreviewProvider token={token!}>
               {button}
               <Table data={table} />
               <Footer data={footer} />
diff --git a/apps/remix-groq-store-lazy/tsconfig.json b/apps/remix-groq-store-lazy/tsconfig.json
index 675787b4..81f0e9f1 100644
--- a/apps/remix-groq-store-lazy/tsconfig.json
+++ b/apps/remix-groq-store-lazy/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "../remix-live-store/app/getClient.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2020"],
     "isolatedModules": true,
diff --git a/apps/remix-groq-store/app/Footer.tsx b/apps/remix-groq-store/app/Footer.tsx
index ea5fa903..a842bc09 100644
--- a/apps/remix-groq-store/app/Footer.tsx
+++ b/apps/remix-groq-store/app/Footer.tsx
@@ -1,9 +1,9 @@
 import type { FooterProps } from 'ui/react'
 import { footerQuery, Footer as UiFooter } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Footer(props: FooterProps) {
-  const data = useListeningQuery<FooterProps['data']>(props.data, footerQuery)
+  const [data] = useLiveQuery<FooterProps['data']>(props.data, footerQuery)
 
   return <UiFooter data={data} />
 }
diff --git a/apps/remix-groq-store/app/PreviewProvider.tsx b/apps/remix-groq-store/app/PreviewProvider.tsx
index 867b82f9..7be8180b 100644
--- a/apps/remix-groq-store/app/PreviewProvider.tsx
+++ b/apps/remix-groq-store/app/PreviewProvider.tsx
@@ -1,25 +1,22 @@
-import {
-  GroqStoreProvider,
-  type GroqStoreProviderProps,
-} from '@sanity/preview-kit/groq-store'
+import { LiveQueryProvider } from '@sanity/preview-kit'
+import { useMemo } from 'react'
+import { getClient } from './getClient'
 
 export default function PreviewProvider({
   children,
   token,
-  projectId,
-  dataset,
 }: {
   children: React.ReactNode
   token: string
-} & Pick<GroqStoreProviderProps, 'projectId' | 'dataset'>) {
+}) {
+  const client = useMemo(() => getClient({ token }), [token])
   return (
-    <GroqStoreProvider
-      projectId={projectId}
-      dataset={dataset}
-      token={token}
-      documentLimit={Infinity}
+    <LiveQueryProvider
+      client={client}
+      logger={console}
+      cache={{ includeTypes: ['page'] }}
     >
       {children}
-    </GroqStoreProvider>
+    </LiveQueryProvider>
   )
 }
diff --git a/apps/remix-groq-store/app/Table.tsx b/apps/remix-groq-store/app/Table.tsx
index 7622f96d..9c67945e 100644
--- a/apps/remix-groq-store/app/Table.tsx
+++ b/apps/remix-groq-store/app/Table.tsx
@@ -1,9 +1,9 @@
 import type { TableProps } from 'ui/react'
 import { tableQuery, Table as UiTable } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Table(props: TableProps) {
-  const data = useListeningQuery<TableProps['data']>(props.data, tableQuery)
+  const [data] = useLiveQuery<TableProps['data']>(props.data, tableQuery)
 
   return <UiTable data={data} />
 }
diff --git a/apps/remix-groq-store/app/getClient.tsx b/apps/remix-groq-store/app/getClient.tsx
new file mode 100644
index 00000000..8471d981
--- /dev/null
+++ b/apps/remix-groq-store/app/getClient.tsx
@@ -0,0 +1,29 @@
+import { createClient } from '@sanity/preview-kit/client'
+import { type SanityClient } from '@sanity/preview-kit/client'
+
+const projectId = 'pv8y60vp'
+const dataset = 'production'
+const apiVersion = '2022-11-15'
+const useCdn = false
+
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    perspective: 'published',
+  })
+  if (preview) {
+    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
+}
diff --git a/apps/remix-groq-store/app/routes/index.tsx b/apps/remix-groq-store/app/routes/index.tsx
index c6469e16..d1e6d348 100644
--- a/apps/remix-groq-store/app/routes/index.tsx
+++ b/apps/remix-groq-store/app/routes/index.tsx
@@ -1,70 +1,43 @@
-import { createClient } from '@sanity/preview-kit/client'
-import type { LoaderArgs } from '@vercel/remix'
 import { useLoaderData, useRevalidator } from '@remix-run/react'
+import type { LoaderArgs } from '@vercel/remix'
 
-import type { TableProps, FooterProps } from 'ui/react'
-import {
-  Timestamp,
-  tableQuery,
-  Button,
-  ViewPublishedButton,
-  PreviewDraftsButton,
-  footerQuery,
-} from 'ui/react'
 import {
   unstable__adapter as adapter,
   unstable__environment as environment,
 } from '@sanity/client'
-import { getSession } from '~/sessions'
+import { useListeningQueryStatus } from '@sanity/preview-kit'
 import { useEffect } from 'react'
+import {
+  Button,
+  PreviewDraftsButton,
+  Timestamp,
+  ViewPublishedButton,
+  footerQuery,
+  tableQuery,
+} from 'ui/react'
 import Footer from '~/Footer'
-import Table from '~/Table'
 import PreviewProvider from '~/PreviewProvider'
-import { useListeningQueryStatus } from '@sanity/preview-kit'
-
-const projectId = process.env.SANITY_PROJECT_ID || 'pv8y60vp'
-const dataset = process.env.SANITY_DATASET || 'production'
-const apiVersion = process.env.SANITY_API_VERSION || '2022-11-15'
-const useCdn = true
+import Table from '~/Table'
+import { getSession } from '~/sessions'
+import { getClient } from '../getClient'
 
 export async function loader({ request }: LoaderArgs) {
   const session = await getSession(request.headers.get('Cookie'))
   const preview = session.get('view') === 'previewDrafts'
 
-  const sanityClient = createClient({
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-    encodeSourceMap: true,
-    encodeSourceMapAtPath: () => true,
-  })
-
-  const token = process.env.SANITY_API_READ_TOKEN
-  if (!token) {
-    throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-  }
-  // Used to preview drafts as they will appear once published
-  const draftsClient = sanityClient.withConfig({
-    perspective: 'previewDrafts',
-    // required by previewDrafts
-    apiVersion: 'X',
-    useCdn: false,
-    token,
-  })
-  const client = preview ? draftsClient : sanityClient
-  const table = client.fetch<TableProps['data']>(tableQuery)
-  const footer = client.fetch<FooterProps['data']>(footerQuery)
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const client = getClient(preview ? { token } : undefined)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   const timestamp = new Date().toJSON()
 
   return {
     preview,
     token,
-    projectId,
-    dataset,
-    table: await table,
-    footer: await footer,
+    table,
+    footer,
     timestamp,
     server__adapter: adapter,
     server__environment: environment,
@@ -75,8 +48,6 @@ export default function Index() {
   const {
     preview,
     token,
-    projectId,
-    dataset,
     table,
     footer,
     timestamp,
@@ -102,11 +73,7 @@ export default function Index() {
     <>
       <form action={action} style={{ display: 'contents' }}>
         {preview ? (
-          <PreviewProvider
-            token={token!}
-            projectId={projectId}
-            dataset={dataset}
-          >
+          <PreviewProvider token={token!}>
             {button}
             <Table data={table} />
             <Footer data={footer} />
diff --git a/apps/remix-live-store-lazy/app/Footer.tsx b/apps/remix-live-store-lazy/app/Footer.tsx
index ea5fa903..a842bc09 100644
--- a/apps/remix-live-store-lazy/app/Footer.tsx
+++ b/apps/remix-live-store-lazy/app/Footer.tsx
@@ -1,9 +1,9 @@
 import type { FooterProps } from 'ui/react'
 import { footerQuery, Footer as UiFooter } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Footer(props: FooterProps) {
-  const data = useListeningQuery<FooterProps['data']>(props.data, footerQuery)
+  const [data] = useLiveQuery<FooterProps['data']>(props.data, footerQuery)
 
   return <UiFooter data={data} />
 }
diff --git a/apps/remix-live-store-lazy/app/PreviewProvider.tsx b/apps/remix-live-store-lazy/app/PreviewProvider.tsx
index 8747d2c9..c97bf74b 100644
--- a/apps/remix-live-store-lazy/app/PreviewProvider.tsx
+++ b/apps/remix-live-store-lazy/app/PreviewProvider.tsx
@@ -1,26 +1,17 @@
 import { LiveQueryProvider } from '@sanity/preview-kit'
-import { useState } from 'react'
-import { getClient } from '~/utils'
+import { useMemo } from 'react'
+import { getClient } from './getClient'
 
 export default function PreviewProvider({
   children,
-  projectId,
-  dataset,
-  apiVersion,
-  useCdn,
   token,
 }: {
   children: React.ReactNode
-} & Required<Parameters<typeof getClient>[1]>) {
-  const [client] = useState(() =>
-    getClient(true, { projectId, dataset, apiVersion, useCdn, token })
-  )
+  token: string
+}) {
+  const client = useMemo(() => getClient({ token }), [token])
   return (
-    <LiveQueryProvider
-      client={client}
-      experimental__turboSourceMap
-      logger={console}
-    >
+    <LiveQueryProvider client={client} logger={console}>
       {children}
     </LiveQueryProvider>
   )
diff --git a/apps/remix-live-store-lazy/app/Table.tsx b/apps/remix-live-store-lazy/app/Table.tsx
index 7622f96d..9c67945e 100644
--- a/apps/remix-live-store-lazy/app/Table.tsx
+++ b/apps/remix-live-store-lazy/app/Table.tsx
@@ -1,9 +1,9 @@
 import type { TableProps } from 'ui/react'
 import { tableQuery, Table as UiTable } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Table(props: TableProps) {
-  const data = useListeningQuery<TableProps['data']>(props.data, tableQuery)
+  const [data] = useLiveQuery<TableProps['data']>(props.data, tableQuery)
 
   return <UiTable data={data} />
 }
diff --git a/apps/remix-live-store-lazy/app/getClient.tsx b/apps/remix-live-store-lazy/app/getClient.tsx
new file mode 100644
index 00000000..de9997c1
--- /dev/null
+++ b/apps/remix-live-store-lazy/app/getClient.tsx
@@ -0,0 +1,33 @@
+import { createClient } from '@sanity/preview-kit/client'
+import { type SanityClient } from '@sanity/preview-kit/client'
+
+const projectId = 'pv8y60vp'
+const dataset = 'production'
+const apiVersion = '2022-11-15'
+const useCdn = true
+const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
+
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    studioUrl,
+    logger: console,
+    resultSourceMap: true,
+    perspective: 'published',
+  })
+  if (preview) {
+    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
+}
diff --git a/apps/remix-live-store-lazy/app/routes/index.tsx b/apps/remix-live-store-lazy/app/routes/index.tsx
index f8a5ce2a..380bffb5 100644
--- a/apps/remix-live-store-lazy/app/routes/index.tsx
+++ b/apps/remix-live-store-lazy/app/routes/index.tsx
@@ -1,7 +1,6 @@
 import type { LoaderArgs } from '@vercel/remix'
 import { useLoaderData, useRevalidator } from '@remix-run/react'
 
-import type { TableProps, FooterProps } from 'ui/react'
 import {
   TableFallback,
   Timestamp,
@@ -17,10 +16,10 @@ import {
 } from '@sanity/client'
 import { getSession } from '~/sessions'
 import { Suspense, lazy, useEffect } from 'react'
-import { getClient } from '~/utils'
 import Footer from '~/Footer'
 import Table from '~/Table'
 import { useListeningQueryStatus } from '@sanity/preview-kit'
+import { getClient } from '../getClient'
 
 const PreviewProvider = lazy(() => import('../PreviewProvider'))
 
@@ -28,37 +27,19 @@ export async function loader({ request }: LoaderArgs) {
   const session = await getSession(request.headers.get('Cookie'))
   const preview = session.get('view') === 'previewDrafts'
 
-  const projectId = process.env.SANITY_PROJECT_ID || 'pv8y60vp'
-  const dataset = process.env.SANITY_DATASET || 'production'
-  // const apiVersion = process.env.SANITY_API_VERSION || '2022-11-15'
-  // @TODO remove this after `perspective` is GA
-  const apiVersion = 'X'
-  const useCdn = true
-  const token = process.env.SANITY_API_READ_TOKEN
-  if (!token) {
-    throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-  }
-
-  const client = getClient(preview, {
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    token,
-  })
-  const table = client.fetch<TableProps['data']>(tableQuery)
-  const footer = client.fetch<FooterProps['data']>(footerQuery)
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const client = getClient(preview ? { token } : undefined)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   const timestamp = new Date().toJSON()
 
   return {
     preview,
     token,
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    table: await table,
-    footer: await footer,
+    table,
+    footer,
     timestamp,
     server__adapter: adapter,
     server__environment: environment,
@@ -69,10 +50,6 @@ export default function Index() {
   const {
     preview,
     token,
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
     table,
     footer,
     timestamp,
@@ -108,13 +85,7 @@ export default function Index() {
             }
           >
             {button}
-            <PreviewProvider
-              apiVersion={apiVersion}
-              useCdn={useCdn}
-              token={token!}
-              projectId={projectId}
-              dataset={dataset}
-            >
+            <PreviewProvider token={token!}>
               <Table data={table} />
               <Footer data={footer} />
             </PreviewProvider>
diff --git a/apps/remix-live-store-lazy/app/utils.ts b/apps/remix-live-store-lazy/app/utils.ts
deleted file mode 100644
index f2dd9b43..00000000
--- a/apps/remix-live-store-lazy/app/utils.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { createClient } from '@sanity/preview-kit/client'
-
-export function getClient(
-  preview: boolean,
-  {
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    token,
-  }: Pick<
-    Parameters<typeof createClient>[0],
-    'projectId' | 'dataset' | 'apiVersion' | 'useCdn' | 'token'
-  >
-) {
-  const sanityClient = createClient({
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-    encodeSourceMap: true,
-    encodeSourceMapAtPath: () => true,
-    perspective: 'published',
-    token,
-  })
-
-  if (preview) {
-    // Used to preview drafts as they will appear once published
-    return sanityClient.withConfig({
-      ignoreBrowserTokenWarning: true,
-      perspective: 'previewDrafts',
-      // required by previewDrafts
-      useCdn: false,
-    })
-  }
-
-  return sanityClient
-}
diff --git a/apps/remix-live-store/app/Footer.tsx b/apps/remix-live-store/app/Footer.tsx
index ea5fa903..a842bc09 100644
--- a/apps/remix-live-store/app/Footer.tsx
+++ b/apps/remix-live-store/app/Footer.tsx
@@ -1,9 +1,9 @@
 import type { FooterProps } from 'ui/react'
 import { footerQuery, Footer as UiFooter } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Footer(props: FooterProps) {
-  const data = useListeningQuery<FooterProps['data']>(props.data, footerQuery)
+  const [data] = useLiveQuery<FooterProps['data']>(props.data, footerQuery)
 
   return <UiFooter data={data} />
 }
diff --git a/apps/remix-live-store/app/PreviewProvider.tsx b/apps/remix-live-store/app/PreviewProvider.tsx
index 8747d2c9..c97bf74b 100644
--- a/apps/remix-live-store/app/PreviewProvider.tsx
+++ b/apps/remix-live-store/app/PreviewProvider.tsx
@@ -1,26 +1,17 @@
 import { LiveQueryProvider } from '@sanity/preview-kit'
-import { useState } from 'react'
-import { getClient } from '~/utils'
+import { useMemo } from 'react'
+import { getClient } from './getClient'
 
 export default function PreviewProvider({
   children,
-  projectId,
-  dataset,
-  apiVersion,
-  useCdn,
   token,
 }: {
   children: React.ReactNode
-} & Required<Parameters<typeof getClient>[1]>) {
-  const [client] = useState(() =>
-    getClient(true, { projectId, dataset, apiVersion, useCdn, token })
-  )
+  token: string
+}) {
+  const client = useMemo(() => getClient({ token }), [token])
   return (
-    <LiveQueryProvider
-      client={client}
-      experimental__turboSourceMap
-      logger={console}
-    >
+    <LiveQueryProvider client={client} logger={console}>
       {children}
     </LiveQueryProvider>
   )
diff --git a/apps/remix-live-store/app/Table.tsx b/apps/remix-live-store/app/Table.tsx
index 7622f96d..9c67945e 100644
--- a/apps/remix-live-store/app/Table.tsx
+++ b/apps/remix-live-store/app/Table.tsx
@@ -1,9 +1,9 @@
 import type { TableProps } from 'ui/react'
 import { tableQuery, Table as UiTable } from 'ui/react'
-import { useListeningQuery } from '@sanity/preview-kit'
+import { useLiveQuery } from '@sanity/preview-kit'
 
 export default function Table(props: TableProps) {
-  const data = useListeningQuery<TableProps['data']>(props.data, tableQuery)
+  const [data] = useLiveQuery<TableProps['data']>(props.data, tableQuery)
 
   return <UiTable data={data} />
 }
diff --git a/apps/remix-live-store/app/getClient.tsx b/apps/remix-live-store/app/getClient.tsx
new file mode 100644
index 00000000..de9997c1
--- /dev/null
+++ b/apps/remix-live-store/app/getClient.tsx
@@ -0,0 +1,33 @@
+import { createClient } from '@sanity/preview-kit/client'
+import { type SanityClient } from '@sanity/preview-kit/client'
+
+const projectId = 'pv8y60vp'
+const dataset = 'production'
+const apiVersion = '2022-11-15'
+const useCdn = true
+const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
+
+export function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
+    projectId,
+    dataset,
+    apiVersion,
+    useCdn,
+    studioUrl,
+    logger: console,
+    resultSourceMap: true,
+    perspective: 'published',
+  })
+  if (preview) {
+    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
+}
diff --git a/apps/remix-live-store/app/routes/index.tsx b/apps/remix-live-store/app/routes/index.tsx
index df0283fe..d1e6d348 100644
--- a/apps/remix-live-store/app/routes/index.tsx
+++ b/apps/remix-live-store/app/routes/index.tsx
@@ -1,60 +1,43 @@
-import type { LoaderArgs } from '@vercel/remix'
 import { useLoaderData, useRevalidator } from '@remix-run/react'
+import type { LoaderArgs } from '@vercel/remix'
 
-import type { TableProps, FooterProps } from 'ui/react'
-import {
-  Timestamp,
-  tableQuery,
-  Button,
-  ViewPublishedButton,
-  PreviewDraftsButton,
-  footerQuery,
-} from 'ui/react'
 import {
   unstable__adapter as adapter,
   unstable__environment as environment,
 } from '@sanity/client'
-import { getSession } from '~/sessions'
+import { useListeningQueryStatus } from '@sanity/preview-kit'
 import { useEffect } from 'react'
-import { getClient } from '~/utils'
+import {
+  Button,
+  PreviewDraftsButton,
+  Timestamp,
+  ViewPublishedButton,
+  footerQuery,
+  tableQuery,
+} from 'ui/react'
+import Footer from '~/Footer'
 import PreviewProvider from '~/PreviewProvider'
 import Table from '~/Table'
-import Footer from '~/Footer'
-import { useListeningQueryStatus } from '@sanity/preview-kit'
+import { getSession } from '~/sessions'
+import { getClient } from '../getClient'
 
 export async function loader({ request }: LoaderArgs) {
   const session = await getSession(request.headers.get('Cookie'))
   const preview = session.get('view') === 'previewDrafts'
 
-  const projectId = process.env.SANITY_PROJECT_ID || 'pv8y60vp'
-  const dataset = process.env.SANITY_DATASET || 'production'
-  const apiVersion = process.env.SANITY_API_VERSION || '2022-11-15'
-  const useCdn = true
-  const token = process.env.SANITY_API_READ_TOKEN
-  if (!token) {
-    throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
-  }
-
-  const client = getClient(preview, {
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    token,
-  })
-  const table = client.fetch<TableProps['data']>(tableQuery)
-  const footer = client.fetch<FooterProps['data']>(footerQuery)
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const client = getClient(preview ? { token } : undefined)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   const timestamp = new Date().toJSON()
 
   return {
     preview,
     token,
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    table: await table,
-    footer: await footer,
+    table,
+    footer,
     timestamp,
     server__adapter: adapter,
     server__environment: environment,
@@ -65,10 +48,6 @@ export default function Index() {
   const {
     preview,
     token,
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
     table,
     footer,
     timestamp,
@@ -94,13 +73,7 @@ export default function Index() {
     <>
       <form action={action} style={{ display: 'contents' }}>
         {preview ? (
-          <PreviewProvider
-            apiVersion={apiVersion}
-            useCdn={useCdn}
-            token={token!}
-            projectId={projectId}
-            dataset={dataset}
-          >
+          <PreviewProvider token={token!}>
             {button}
             <Table data={table} />
             <Footer data={footer} />
diff --git a/apps/remix-live-store/app/utils.ts b/apps/remix-live-store/app/utils.ts
deleted file mode 100644
index 94949b2e..00000000
--- a/apps/remix-live-store/app/utils.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { createClient } from '@sanity/preview-kit/client'
-
-export function getClient(
-  previewDrafts: boolean,
-  {
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    token,
-  }: Pick<
-    Parameters<typeof createClient>[0],
-    'projectId' | 'dataset' | 'apiVersion' | 'useCdn' | 'token'
-  >
-) {
-  const sanityClient = createClient({
-    projectId,
-    dataset,
-    apiVersion,
-    useCdn,
-    studioUrl: 'https://preview-kit-test-studio.sanity.build/',
-    encodeSourceMap: true,
-    encodeSourceMapAtPath: () => true,
-  })
-
-  if (previewDrafts) {
-    // Used to preview drafts as they will appear once published
-    return sanityClient.withConfig({
-      perspective: 'previewDrafts',
-      // required by previewDrafts
-      apiVersion: 'X',
-      useCdn: false,
-      token,
-      ignoreBrowserTokenWarning: true,
-    })
-  }
-
-  return sanityClient
-}
diff --git a/apps/remix/app/routes/index.tsx b/apps/remix/app/routes/index.tsx
index 00228efd..9b315a08 100644
--- a/apps/remix/app/routes/index.tsx
+++ b/apps/remix/app/routes/index.tsx
@@ -1,8 +1,6 @@
-import { createClient } from '@sanity/preview-kit/client'
 import type { LoaderArgs } from '@vercel/remix'
 import { useLoaderData, useRevalidator } from '@remix-run/react'
 
-import type { TableProps, FooterProps } from 'ui/react'
 import {
   Table,
   Timestamp,
@@ -19,47 +17,54 @@ import {
 } from '@sanity/client'
 import { getSession } from '~/sessions'
 import { useEffect } from 'react'
+import { createClient, type SanityClient } from '@sanity/preview-kit/client'
 
 const projectId = process.env.SANITY_PROJECT_ID || 'pv8y60vp'
 const dataset = process.env.SANITY_DATASET || 'production'
 const apiVersion = process.env.SANITY_API_VERSION || '2022-11-15'
 const useCdn = true
+const studioUrl = 'https://preview-kit-test-studio.sanity.build/'
 
-export async function loader({ request }: LoaderArgs) {
-  const session = await getSession(request.headers.get('Cookie'))
-  const preview = session.get('view') === 'previewDrafts'
-
-  const sanityClient = createClient({
+function getClient(preview?: { token: string }): SanityClient {
+  const client = createClient({
     projectId,
     dataset,
     apiVersion,
     useCdn,
-    studioUrl: 'https://preview-kit-test-studio.sanity.build/',
+    studioUrl,
+    logger: console,
     encodeSourceMap: true,
-    encodeSourceMapAtPath: () => true,
+    perspective: 'published',
   })
-
-  const token = process.env.SANITY_API_READ_TOKEN
-  if (!token) {
-    throw new TypeError(`Missing SANITY_API_READ_TOKEN`)
+  if (preview) {
+    if (!preview.token) {
+      throw new Error('You must provide a token to preview drafts')
+    }
+    return client.withConfig({
+      perspective: 'previewDrafts',
+      token: preview.token,
+      useCdn: false,
+    })
   }
-  // Used to preview drafts as they will appear once published
-  const draftsClient = sanityClient.withConfig({
-    perspective: 'previewDrafts',
-    // required by previewDrafts
-    apiVersion: 'X',
-    useCdn: false,
-    token,
-  })
-  const client = preview ? draftsClient : sanityClient
-  const table = client.fetch<TableProps['data']>(tableQuery)
-  const footer = client.fetch<FooterProps['data']>(footerQuery)
+  return client
+}
+
+export async function loader({ request }: LoaderArgs) {
+  const session = await getSession(request.headers.get('Cookie'))
+  const preview = session.get('view') === 'previewDrafts'
+
+  const token = process.env.SANITY_API_READ_TOKEN!
+  const client = getClient(preview ? { token } : undefined)
+  const [table, footer] = await Promise.all([
+    client.fetch(tableQuery),
+    client.fetch(footerQuery),
+  ])
   const timestamp = new Date().toJSON()
 
   return {
     preview,
-    table: await table,
-    footer: await footer,
+    table,
+    footer,
     timestamp,
     server__adapter: adapter,
     server__environment: environment,
diff --git a/packages/preview-kit/README.md b/packages/preview-kit/README.md
index c09c959b..7fdf219e 100644
--- a/packages/preview-kit/README.md
+++ b/packages/preview-kit/README.md
@@ -200,6 +200,12 @@ const titleEditLink = editLinks.title
 console.log(title, titleEditLink)
 ```
 
+## Using Perspectives
+
+The `perspective` option can be used to specify special filtering behavior for queries. The default value is `raw`, which means no special filtering is applied, while [`published`](#published) and [`previewDrafts`](#previewdrafts) can be used to optimize for specific use cases. Read more about this option:
+- [Perspectives in Sanity docs][perspectives-docs]
+- [Perspectives in @sanity/client README][perspectives-readme]
+
 # `@sanity/preview-kit`
 
 > **Note**
@@ -247,6 +253,7 @@ export function getClient({
     dataset: 'production',
     apiVersion: '2023-06-20',
     useCdn: true,
+    perspective: 'published',
   })
   if (preview) {
     if (!preview.token) {
@@ -256,6 +263,7 @@ export function getClient({
       token: preview.token,
       useCdn: false,
       ignoreBrowserTokenWarning: true,
+      perspective: 'previewDrafts',
     })
   }
   return client
@@ -650,15 +658,59 @@ return (
       maxDocuments: 10000,
       // The default cache includes all document types, you can reduce the amount of documents
       // by only including the ones you need.
+      // You can run the `array::unique(*._type)` GROQ query in `Vision` in your Studio to see how many types are in your dataset.
+      // Just be careful that you don't forget the document types you might be using in strong references, such as `project` or `sanity.imageAsset`
       includeTypes: ['page', 'product', 'sanity.imageAsset'],
       // Turn off using a mutation EventSource listener, this means content updates will require a manual refresh
-      listen: false
+      listen: false,
     }}
+    // If the cache is full it'll fallback to a polling interval mode, that refreshes every 10 seconds by default.
+    // You can opt-in to having an error thrown instead by setting this to `0`.
+    refreshInterval={10000}
+    // Passing a logger gives you more information on what to expect based on your configuration
+    logger={console}
+  >
+    {children}
+  </LiveQueryProvider>
+)
+```
+
+#### Content Source Map features
+
+When the `client` instance is configured to `client.config().resultSourceMap == true` the `LiveQueryProvider` will opt-in to a faster and smarter cache than the default mode.
+It'll only listen for mutations on the documents that you are using in your queries, and apply the mutations to the cache in real-time.
+This mode is best-effort, and if you're relying on features such as `upper` you may want to disable this mode.
+
+```tsx
+import { LiveQueryProvider } from '@sanity/preview-kit'
+
+return (
+  <LiveQueryProvider
+    client={client}
+    turboSourceMap={false}
+    // Passing a logger gives you more information on what to expect based on your configuration
+    logger={console}
+  >
+    {children}
+  </LiveQueryProvider>
+)
+```
+
+For data that can't be traced with Content Source Maps there's a background refresh interval. Depending on your queries you might want to tweak this interval to get the best performance.
+
+```tsx
+import { LiveQueryProvider } from '@sanity/preview-kit'
+
+return (
+  <LiveQueryProvider
+    client={client}
+    // Refetch all queries every minute instead of the default 10 seconds
+    refreshInterval={1000 * 60}
     // Passing a logger gives you more information on what to expect based on your configuration
     logger={console}
   >
     {children}
-  </GroqStoreProvider>
+  </LiveQueryProvider>
 )
 ```
 
@@ -681,3 +733,5 @@ MIT-licensed. See [LICENSE](LICENSE).
 [enterprise-cta]: https://www.sanity.io/enterprise?utm_source=github.com&utm_medium=referral&utm_campaign=may-vercel-launch
 [next-sanity-readme]: https://github.com/sanity-io/next-sanity#readme
 [migration]: https://github.com/sanity-io/preview-kit/blob/main/MIGRATION.md
+[perspectives-docs]: https://www.sanity.io/docs/perspectives
+[perspectives-readme]: https://github.com/sanity-io/client/#performing-queries
diff --git a/packages/preview-kit/src/LiveQueryProvider.tsx b/packages/preview-kit/src/LiveQueryProvider.tsx
index e99a5d4c..7234f506 100644
--- a/packages/preview-kit/src/LiveQueryProvider.tsx
+++ b/packages/preview-kit/src/LiveQueryProvider.tsx
@@ -35,28 +35,31 @@ export interface LiveQueryProviderProps {
   client: SanityClient
   cache?: CacheOptions
   /**
-   * @defaultValue false
-   * @alpha Highly experimental, may have breaking changes in minor releases
+   * Uses a `Listen` API call with EventSource to stream updates in real-time to the documents cache, powered by `Content Source Map` metadata
+   * @defaultValue true
    */
-  experimental__turboSourceMap?: boolean
+  turboSourceMap?: boolean
   /**
    * The interval in millieseconds to refetch in the background, when the tab is active.
+   * It's only used if `turboSourceMap` is set to `true` or there are too many documents to fit in the local cache.
    * Set it to `0` to disable background refresh.
-   * @defaultValue experimental__turboSourceMap ? 10000 : 0
-   * @alpha Highly experimental, may have breaking changes in minor releases
+   * @defaultValue 10000
    */
-  experimental__refreshInterval?: number
+  refreshInterval?: number
   logger?: Logger
 }
 
 export const LiveQueryProvider = memo(function LiveQueryProvider(
   props: LiveQueryProviderProps
 ) {
-  const {
-    children,
-    experimental__turboSourceMap = false,
-    experimental__refreshInterval,
-  } = props
+  const { children, refreshInterval = 10000 } = props
+
+  if (!props.client) {
+    throw new Error(
+      'Missing a `client` prop with a configured Sanity client instance'
+    )
+  }
+
   // Ensure these values are stable even if userland isn't memoizing properly
   const [client] = useState(() =>
     props.client.withConfig({
@@ -65,23 +68,19 @@ export const LiveQueryProvider = memo(function LiveQueryProvider(
   )
   const [cache] = useState(() => props.cache)
   const [logger] = useState(() => props.logger)
+  const turboSourceMap = useMemo(
+    () => props.turboSourceMap ?? client.config().resultSourceMap,
+    [client, props.turboSourceMap]
+  )
 
-  useEffect(() => {
-    if (experimental__refreshInterval || experimental__turboSourceMap) {
-      logger?.warn(
-        '[@sanity/preview-kit]: You are using experimental features, these may have breaking changes in minor releases'
-      )
-    }
-  }, [experimental__refreshInterval, experimental__turboSourceMap, logger])
-
-  if (experimental__turboSourceMap) {
+  if (turboSourceMap) {
     return (
       <Suspense fallback={children}>
         <LiveStoreProvider
           client={client}
           logger={logger}
-          refreshInterval={experimental__refreshInterval}
-          turboSourceMap={experimental__turboSourceMap}
+          refreshInterval={refreshInterval}
+          turboSourceMap={turboSourceMap}
         >
           {children}
         </LiveStoreProvider>
@@ -94,7 +93,7 @@ export const LiveQueryProvider = memo(function LiveQueryProvider(
       client={client}
       cache={cache}
       logger={logger}
-      experimental__refreshInterval={experimental__refreshInterval}
+      refreshInterval={refreshInterval}
     >
       {children}
     </SelectStoreProvider>
@@ -104,13 +103,7 @@ export const LiveQueryProvider = memo(function LiveQueryProvider(
 const SelectStoreProvider = memo(function SelectStoreProvider(
   props: LiveQueryProviderProps
 ) {
-  const {
-    children,
-    experimental__refreshInterval = 0,
-    client,
-    cache,
-    logger,
-  } = props
+  const { children, refreshInterval, client, cache, logger } = props
   const maxDocuments = cache?.maxDocuments ?? DEFAULT_MAX_DOCUMENTS
   const [documentsCount, setDocumentsCount] = useState<number | null>(null)
   const [error, setError] = useState<Error | null>(null)
@@ -154,12 +147,12 @@ const SelectStoreProvider = memo(function SelectStoreProvider(
     return children
   }
 
-  if (experimental__refreshInterval && documentsCount >= maxDocuments) {
+  if (refreshInterval && documentsCount >= maxDocuments) {
     return (
       <Suspense fallback={children}>
         <LiveStoreProvider
           client={client}
-          refreshInterval={experimental__refreshInterval}
+          refreshInterval={refreshInterval}
           turboSourceMap={false}
           logger={logger}
         >
diff --git a/packages/preview-kit/src/client/createClient.ts b/packages/preview-kit/src/client/createClient.ts
index 1d9425c0..0bb17a73 100644
--- a/packages/preview-kit/src/client/createClient.ts
+++ b/packages/preview-kit/src/client/createClient.ts
@@ -33,7 +33,9 @@ export const createClient = (config: PreviewKitClientConfig): SanityClient => {
 
   try {
     if (shouldEncodeSourceMap && config.resultSourceMap !== false) {
-      logger?.debug('[@sanity/preview-kit]: Creating source map enabled client')
+      logger?.debug?.(
+        '[@sanity/preview-kit]: Creating source map enabled client'
+      )
       const httpRequest = createHttpRequest({ ...config, studioUrl })
       return new SanityClient(httpRequest, {
         ...config,
diff --git a/packages/preview-kit/src/client/request.ts b/packages/preview-kit/src/client/request.ts
index 0cefb3d8..c1f78067 100644
--- a/packages/preview-kit/src/client/request.ts
+++ b/packages/preview-kit/src/client/request.ts
@@ -41,7 +41,7 @@ function transcodeResponse({
       ) {
         if (!isContentSourceMapBody(response.body)) {
           if (logger) {
-            logger?.error(
+            logger?.error?.(
               '[@sanity/preview-kit]: Missing Content Source Map from response body',
               response.body
             )
@@ -55,29 +55,30 @@ function transcodeResponse({
           const isSkipping = transcoder.report.skipped.length
           const isEncoding = transcoder.report.encoded.length
           if (isSkipping || isEncoding) {
-            logger?.groupCollapsed(
+            // eslint-disable-next-line @typescript-eslint/no-extra-semi
+            ;(logger?.groupCollapsed || logger.log)?.(
               '[@sanity/preview-kit]: Stega encoding source map into result'
             )
-            logger?.log(
+            logger.log?.(
               `[@sanity/preview-kit]: Paths encoded: ${transcoder.report.encoded.length}, skipped: ${transcoder.report.skipped.length}`
             )
           }
           if (transcoder.report.encoded.length > 0) {
-            logger?.log(`[@sanity/preview-kit]: Table of encoded paths`)
-            logger?.table(transcoder.report.encoded)
+            logger?.log?.(`[@sanity/preview-kit]: Table of encoded paths`)
+            ;(logger?.table || logger.log)?.(transcoder.report.encoded)
           }
           if (transcoder.report.skipped.length > 0) {
             const skipped = new Set<string>()
             for (const { path } of transcoder.report.skipped) {
               skipped.add(path.replace(/\[\d+\]/g, '[]'))
             }
-            logger?.log(`[@sanity/preview-kit]: List of skipped paths`, [
+            logger?.log?.(`[@sanity/preview-kit]: List of skipped paths`, [
               ...skipped.values(),
             ])
           }
 
           if (isSkipping || isEncoding) {
-            logger?.groupEnd()
+            logger?.groupEnd?.()
           }
         }
 
diff --git a/packages/preview-kit/src/client/sourcemap.ts b/packages/preview-kit/src/client/sourcemap.ts
index 22b18774..650767e6 100644
--- a/packages/preview-kit/src/client/sourcemap.ts
+++ b/packages/preview-kit/src/client/sourcemap.ts
@@ -108,7 +108,9 @@ export function resolveMapping(
   const resultJsonPath = normalisedJsonPath(resultPath)
 
   if (!csm.mappings) {
-    logger?.error('Missing resultSourceMap.mappings', { resultSourceMap: csm })
+    logger?.error?.('Missing resultSourceMap.mappings', {
+      resultSourceMap: csm,
+    })
     return undefined
   }
 
diff --git a/packages/preview-kit/src/client/transcode.ts b/packages/preview-kit/src/client/transcode.ts
index 075a7b1f..b4c929d8 100644
--- a/packages/preview-kit/src/client/transcode.ts
+++ b/packages/preview-kit/src/client/transcode.ts
@@ -83,7 +83,8 @@ export function createTranscoder(
   transcode: Transcoder
   walk: (input: ContentSourceMapQueryResponse) => ContentSourceMapQueryResponse
 } {
-  const createEditLink = defineEditLink(studioUrl)
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const createEditLink = defineEditLink(studioUrl!)
   const report: Record<
     'encoded' | 'skipped',
     { path: string; length: number; value: string }[]
diff --git a/packages/preview-kit/src/client/types.ts b/packages/preview-kit/src/client/types.ts
index cfe31858..4c2b8a40 100644
--- a/packages/preview-kit/src/client/types.ts
+++ b/packages/preview-kit/src/client/types.ts
@@ -19,9 +19,11 @@ export type FilterDefault = (props: {
 
 export type Logger =
   | typeof console
-  | Pick<
-      typeof console,
-      'debug' | 'error' | 'groupCollapsed' | 'groupEnd' | 'log' | 'table'
+  | Partial<
+      Pick<
+        typeof console,
+        'debug' | 'error' | 'groupCollapsed' | 'groupEnd' | 'log' | 'table'
+      >
     >
 
 /** @public */
diff --git a/packages/ui/src/react/components.tsx b/packages/ui/src/react/components.tsx
index d89300c2..b20a941c 100644
--- a/packages/ui/src/react/components.tsx
+++ b/packages/ui/src/react/components.tsx
@@ -118,7 +118,7 @@ export function Button({
   isLoading,
   formAction,
 }: {
-  children: React.ReactNode
+  children?: React.ReactNode
   isLoading?: boolean
   formAction?: JSX.IntrinsicElements['button']['formAction']
 }) {