Update Sanity loader and add GH workflow to set up preview branch

templates/hydrogen-theme/.github/workflows/preview-branch-mirror.yml

@@ -0,0 +1,28 @@
+###############
+# This Workflow is used to mirror the main branch to a preview branch.
+# Useful for having a preview URL that can be used by Sanity Studio.
+###############
+name: Mirror Main Branch
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  mirror:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Fetch latest changes
+        run: git fetch origin main
+
+      - name: Push to Mirror Branch
+        run: |
+          git checkout -b preview
+          git push --force origin preview
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

templates/hydrogen-theme/app/components/sanity/VisualEditing.tsx

@@ -7,7 +7,7 @@ import { cx } from "class-variance-authority";
 import { useEnvironmentVariables } from "~/hooks/useEnvironmentVariables";
 import { useIsInIframe } from "~/hooks/useIsInIframe";
 import { useSanityClient } from "~/hooks/useSanityClient";
-import { useSanityLoader } from "~/hooks/useSanityLoader";
+import { useLiveMode } from "~/lib/sanity/sanity.loader";
 
 export function VisualEditing() {
   const env = useEnvironmentVariables();
@@ -19,7 +19,6 @@ export function VisualEditing() {
   );
   const sanityStudioUrl = env?.SANITY_STUDIO_URL!;
   const client = useSanityClient();
-  const { useLiveMode } = useSanityLoader();
 
   useEffect(() => {
     if (!sanityStudioUrl) return;

templates/hydrogen-theme/app/hooks/useSanityClient.tsx

@@ -4,15 +4,13 @@ import { useSanityPreviewMode } from "./useSanityPreviewMode";
 
 export function useSanityClient() {
   const env = useEnvironmentVariables();
-  const sanityPreviewMode = useSanityPreviewMode();
   const { client } = getSanityClient({
     projectId: env?.SANITY_STUDIO_PROJECT_ID!,
     dataset: env?.SANITY_STUDIO_DATASET!,
     studioUrl: env?.SANITY_STUDIO_URL!,
     useStega: env?.SANITY_STUDIO_USE_STEGA!,
     apiVersion: env?.SANITY_STUDIO_API_VERSION!,
     useCdn: env?.NODE_ENV === "production",
-    sanityPreviewMode,
   });
 
   return client;

templates/hydrogen-theme/app/hooks/useSanityQuery.tsx

@@ -1,14 +1,14 @@
 import type { QueryParams } from "@sanity/client/stega";
 import type { QueryStoreState, UseQueryOptions } from "@sanity/react-loader";
-import { useSanityLoader } from "./useSanityLoader";
+
+import { useQuery } from "~/lib/sanity/sanity.loader";
 
 export function useSanityQuery<T>(cms: {
   initial: UseQueryOptions<T>["initial"];
   params: QueryParams;
   query: string;
 }): QueryStoreState<T, unknown> {
   const { initial, params, query } = cms;
-  const { useQuery } = useSanityLoader();
 
   return useQuery(query, params, {
     initial,

templates/hydrogen-theme/app/lib/sanity/client.ts

@@ -8,17 +8,8 @@ export const getSanityClient = (args: {
   studioUrl: string;
   apiVersion: string;
   useCdn: boolean;
-  sanityPreviewMode?: boolean;
 }) => {
-  const {
-    projectId,
-    dataset,
-    useStega,
-    studioUrl,
-    apiVersion,
-    useCdn,
-    sanityPreviewMode,
-  } = args;
+  const { projectId, dataset, useStega, studioUrl, apiVersion, useCdn } = args;
 
   return {
     client: createClient({
@@ -27,7 +18,7 @@ export const getSanityClient = (args: {
       useCdn,
       apiVersion: apiVersion || "2023-10-01",
       stega: {
-        enabled: sanityPreviewMode && useStega === "true" ? true : false,
+        enabled: useStega === "true" ? true : false,
         studioUrl,
       },
     }),

templates/hydrogen-theme/app/lib/sanity/sanity.loader.ts

@@ -0,0 +1,7 @@
+import { createQueryStore } from "@sanity/react-loader";
+
+// This is the "smallest" possible version of a query store
+// Where stega-enabled queries only happen server-side to avoid bundle bloat
+export const queryStore = createQueryStore({ client: false, ssr: true });
+
+export const { useLiveMode, useQuery } = queryStore;

templates/hydrogen-theme/app/lib/sanity/sanity.server.ts

@@ -10,12 +10,11 @@ import type {
 import { CacheShort, createWithCache } from "@shopify/hydrogen";
 
 import { getSanityClient } from "./client";
-import { createQueryStore } from "@sanity/react-loader";
+import { queryStore } from "./sanity.loader";
 
 type CreateSanityClientOptions = {
   cache: Cache;
   waitUntil: ExecutionContext["waitUntil"];
-  sanityPreviewMode: boolean;
   config: {
     projectId: string;
     dataset: string;
@@ -46,8 +45,10 @@ export type Sanity = {
   }>;
 };
 
+let sanityServerClientHasBeenInitialized = false;
+
 export function createSanityClient(options: CreateSanityClientOptions) {
-  const { cache, waitUntil, config, sanityPreviewMode } = options;
+  const { cache, waitUntil, config } = options;
   const { projectId, dataset, useStega, useCdn, studioUrl, apiVersion } =
     config;
 
@@ -58,13 +59,12 @@ export function createSanityClient(options: CreateSanityClientOptions) {
     apiVersion,
     useStega,
     studioUrl,
-    sanityPreviewMode,
   });
 
-  const queryStore = createQueryStore({
-    client,
-    ssr: false,
-  });
+  if (!sanityServerClientHasBeenInitialized) {
+    queryStore.setServerClient(client);
+    sanityServerClientHasBeenInitialized = true;
+  }
 
   const sanity: Sanity = {
     client,
@@ -76,7 +76,7 @@ export function createSanityClient(options: CreateSanityClientOptions) {
     }) {
       const { loadQuery } = queryStore;
       const { query } = groqdQuery as GroqdQuery;
-      const queryHash = await hashQuery(query, params, sanityPreviewMode);
+      const queryHash = await hashQuery(query, params);
       const withCache = createWithCache({
         cache,
         waitUntil,
@@ -119,17 +119,9 @@ export async function sha256(message: string): Promise<string> {
  * Hash query and its parameters for use as cache key
  * NOTE: Oxygen deployment will break if the cache key is long or contains `\n`
  */
-function hashQuery(
-  query: GroqdQuery["query"],
-  params?: QueryParams,
-  sanityPreviewMode?: boolean
-) {
+function hashQuery(query: GroqdQuery["query"], params?: QueryParams) {
   let hash = query;
 
-  if (sanityPreviewMode) {
-    hash += "previewMode";
-  }
-
   if (params !== null) {
     hash += JSON.stringify(params);
   }

templates/hydrogen-theme/server.ts

@@ -80,7 +80,6 @@ export default {
       const sanity = createSanityClient({
         cache,
         waitUntil,
-        sanityPreviewMode,
         config: {
           projectId: envVars.SANITY_STUDIO_PROJECT_ID,
           dataset: envVars.SANITY_STUDIO_DATASET,