Merge branch 'main' of https://github.com/tinloof/medusa-b2c-starter

storefront/app/api/draft/route.ts

@@ -1,21 +1,7 @@
 import config from "@/config";
 import {client} from "@/data/sanity/client";
-import {validatePreviewUrl} from "@sanity/preview-url-secret";
-import {draftMode} from "next/headers";
-import {redirect} from "next/navigation";
+import {defineEnableDraftMode} from "next-sanity/draft-mode";
 
-const clientWithToken = client.withConfig({token: config.sanity.token});
-
-export async function GET(request: Request) {
-  const {isValid, redirectTo = "/"} = await validatePreviewUrl(
-    clientWithToken,
-    request.url,
-  );
-  if (!isValid) {
-    return new Response("Invalid secret", {status: 401});
-  }
-
-  (await draftMode()).enable();
-
-  redirect(redirectTo);
-}
+export const {GET} = defineEnableDraftMode({
+  client: client.withConfig({token: config.sanity.token}),
+});

storefront/components/sections/hero/index.tsx

@@ -1,6 +1,6 @@
 import {SanityImage} from "@/components/shared/sanity-image";
 import Video from "@/components/shared/video";
-import {stegaClean} from "@sanity/client/stega";
+import {stegaClean} from "next-sanity";
 
 import type {ModularPageSection} from "../types";
 

storefront/components/sections/hero/simple-hero.tsx

@@ -2,8 +2,7 @@ import {Link} from "@/components/shared/button";
 import {SanityImage} from "@/components/shared/sanity-image";
 import Body from "@/components/shared/typography/body";
 import Heading from "@/components/shared/typography/heading";
-import {stegaClean} from "@sanity/client/stega";
-import React from "react";
+import {stegaClean} from "next-sanity";
 
 import type {ModularPageSection} from "../types";
 

storefront/data/sanity/client.ts

@@ -1,8 +1,8 @@
-import type {ClientPerspective} from "@sanity/client";
+import type {ClientPerspective} from "next-sanity";
 
 import config from "@/config";
-import {createClient} from "@sanity/client";
 import createImageUrlBuilder from "@sanity/image-url";
+import {createClient} from "next-sanity";
 
 const clientConfig = {
   apiVersion: config.sanity.apiVersion,

storefront/data/sanity/index.ts

@@ -8,10 +8,10 @@ import type {
   NOT_FOUND_PAGE_QUERYResult,
   PRODUCT_QUERYResult,
   REDIRECT_QUERYResult,
+  ROUTE_QUERYResult,
   TEXT_PAGE_QUERYResult,
 } from "@/types/sanity.generated";
 
-import {loadQuery, loadRoute} from "./load-query";
 import {
   COOKIE_BANNER_QUERY,
   DICTIONARY_QUERY,
@@ -22,24 +22,34 @@ import {
   NOT_FOUND_PAGE_QUERY,
   PRODUCT_QUERY,
   REDIRECT_QUERY,
+  ROUTE_QUERY,
   TEXT_PAGE_QUERY,
 } from "./queries";
+import {sanityFetch} from "./sanity-fetch";
+
+// Loader for routes
+export function loadRoute(pathname: string) {
+  return sanityFetch<ROUTE_QUERYResult>({
+    params: {pathname},
+    query: ROUTE_QUERY,
+  });
+}
 
 export async function loadModularPage(pathname: string) {
-  return loadQuery<MODULAR_PAGE_QUERYResult>({
+  return sanityFetch<MODULAR_PAGE_QUERYResult>({
     params: {pathname},
     query: MODULAR_PAGE_QUERY,
   });
 }
 
 export async function loadHome() {
-  return loadQuery<HOME_QUERYResult>({
+  return sanityFetch<HOME_QUERYResult>({
     query: HOME_QUERY,
   });
 }
 
 export function loadGlobalData() {
-  return loadQuery<GLOBAL_QUERYResult>({
+  return sanityFetch<GLOBAL_QUERYResult>({
     query: GLOBAL_QUERY,
   });
 }
@@ -74,45 +84,45 @@ export async function loadPageByPathname({
 }
 
 export function loadRedirects(paths: string[]) {
-  return loadQuery<REDIRECT_QUERYResult>({
+  return sanityFetch<REDIRECT_QUERYResult>({
     params: {paths},
     query: REDIRECT_QUERY,
   });
 }
 
 export function loadNotFound() {
-  return loadQuery<NOT_FOUND_PAGE_QUERYResult>({
+  return sanityFetch<NOT_FOUND_PAGE_QUERYResult>({
     query: NOT_FOUND_PAGE_QUERY,
   });
 }
 
 export function loadCookieBanner() {
-  return loadQuery<COOKIE_BANNER_QUERYResult>({
+  return sanityFetch<COOKIE_BANNER_QUERYResult>({
     query: COOKIE_BANNER_QUERY,
   });
 }
 
 export async function loadTextPage(pathname: string) {
-  return loadQuery<TEXT_PAGE_QUERYResult>({
+  return sanityFetch<TEXT_PAGE_QUERYResult>({
     params: {pathname},
     query: TEXT_PAGE_QUERY,
   });
 }
 
 export function loadFaqs() {
-  return loadQuery<FAQS_PAGE_QUERYResult>({
+  return sanityFetch<FAQS_PAGE_QUERYResult>({
     query: FAQS_PAGE_QUERY,
   });
 }
 
 export function loadDictionary() {
-  return loadQuery<DICTIONARY_QUERYResult>({
+  return sanityFetch<DICTIONARY_QUERYResult>({
     query: DICTIONARY_QUERY,
   });
 }
 
 export function loadProductContent(handle: string) {
-  return loadQuery<PRODUCT_QUERYResult>({
+  return sanityFetch<PRODUCT_QUERYResult>({
     params: {handle},
     query: PRODUCT_QUERY,
   });

storefront/data/sanity/queries/index.ts

@@ -1,4 +1,4 @@
-import {groq} from "next-sanity";
+import {defineQuery, groq} from "next-sanity";
 
 import {SECTIONS_BODY_FRAGMENT} from "./section";
 
@@ -20,14 +20,14 @@ export const GLOBAL_QUERY = groq`{
   "header": *[_id == "header" && _type == "header"][0],
 }`;
 
-export const ROUTE_QUERY = groq`
+export const ROUTE_QUERY = defineQuery(`
   *[pathname.current == $pathname][0] {
     'routeData': {
       ...,
       'pathname': pathname.current,
     },
   }
-`;
+`);
 
 export const SITEMAP_QUERY = groq`
   *[

storefront/data/sanity/sanity-fetch.ts

@@ -0,0 +1,46 @@
+import type {QueryParams} from "next-sanity";
+
+import config from "@/config";
+import {client} from "@/data/sanity/client";
+import {draftMode} from "next/headers";
+import "server-only";
+
+export async function sanityFetch<QueryResponse>({
+  params = {},
+  query,
+}: {
+  params?: Promise<QueryParams> | QueryParams;
+  query: string;
+}): Promise<QueryResponse> {
+  const isDraftMode = (await draftMode()).isEnabled;
+
+  const perspective = isDraftMode ? "previewDrafts" : "published";
+
+  const token = config.sanity.token;
+
+  const stega =
+    perspective === "previewDrafts" || process.env.VERCEL_ENV === "preview";
+
+  if (perspective === "previewDrafts") {
+    return client.fetch(query, await params, {
+      // And we can't cache the responses as it would slow down the live preview experience
+      next: {revalidate: 0},
+      perspective: "previewDrafts",
+      stega,
+      // The token is required to fetch draft content
+      token,
+      // The `previewDrafts` perspective isn't available on the API CDN
+      useCdn: false,
+    });
+  }
+
+  return client.fetch(query, await params, {
+    // When using the `published` perspective we use time-based revalidation to match the time-to-live on Sanity's API CDN (60 seconds)
+    next: {revalidate: 120},
+    perspective: "published",
+    stega,
+    // Only enable Stega in production if it's a Vercel Preview Deployment, as the Vercel Toolbar supports Visual Editing
+    // The `published` perspective is available on the API CDN
+    useCdn: true,
+  });
+}

storefront/package.json

@@ -28,12 +28,9 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@sanity/asset-utils": "^1.3.0",
-    "@sanity/client": "^6.20.1",
     "@sanity/icons": "^3.2.0",
     "@sanity/image-url": "^1.0.2",
     "@sanity/orderable-document-list": "^1.2.1",
-    "@sanity/preview-url-secret": "^1.6.17",
-    "@sanity/react-loader": "^1.10.3",
     "@sanity/ui": "^2.6.1",
     "@sanity/vision": "^3.48.1",
     "@stripe/react-stripe-js": "^2.8.1",
@@ -47,7 +44,7 @@
     "embla-carousel-react": "^8.3.0",
     "lodash": "^4.17.21",
     "next": "15.0.0",
-    "next-sanity": "9.7.0-canary.25",
+    "next-sanity": "^9.7.1",
     "nuqs": "^1.20.0",
     "react": "19.0.0-rc-65a56d0e-20241020",
     "react-dom": "19.0.0-rc-65a56d0e-20241020",