diff --git a/.github/workflows/push-to-external-repo.yml b/.github/workflows/push-to-external-repo.yml index 309eb62..b087637 100644 --- a/.github/workflows/push-to-external-repo.yml +++ b/.github/workflows/push-to-external-repo.yml @@ -43,6 +43,7 @@ jobs: external_repository: ${{ vars.EXTERNAL_REPO }} publish_branch: ${{ steps.branch.outputs.branch }} allow_empty_commit: true + exclude_assets: false - name: Generate pull request comment if: github.event_name == 'pull_request' && steps.changed-files-yaml.outputs.hydrogen-theme_any_changed == 'true' diff --git a/templates/hydrogen-theme/.github/workflows/preview-branch-mirror.yml b/templates/hydrogen-theme/.github/workflows/preview-branch-mirror.yml new file mode 100644 index 0000000..75cf0f8 --- /dev/null +++ b/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 }} diff --git a/templates/hydrogen-theme/app/components/sanity/VisualEditing.tsx b/templates/hydrogen-theme/app/components/sanity/VisualEditing.tsx index 9308dc9..3cc9d26 100644 --- a/templates/hydrogen-theme/app/components/sanity/VisualEditing.tsx +++ b/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; diff --git a/templates/hydrogen-theme/app/hooks/useSanityClient.tsx b/templates/hydrogen-theme/app/hooks/useSanityClient.tsx index 72deb58..3ad12c9 100644 --- a/templates/hydrogen-theme/app/hooks/useSanityClient.tsx +++ b/templates/hydrogen-theme/app/hooks/useSanityClient.tsx @@ -4,7 +4,6 @@ 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!, @@ -12,7 +11,6 @@ export function useSanityClient() { useStega: env?.SANITY_STUDIO_USE_STEGA!, apiVersion: env?.SANITY_STUDIO_API_VERSION!, useCdn: env?.NODE_ENV === "production", - sanityPreviewMode, }); return client; diff --git a/templates/hydrogen-theme/app/hooks/useSanityLoader.tsx b/templates/hydrogen-theme/app/hooks/useSanityLoader.tsx deleted file mode 100644 index 3661b61..0000000 --- a/templates/hydrogen-theme/app/hooks/useSanityLoader.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { createQueryStore } from "@sanity/react-loader"; -import { useSanityClient } from "./useSanityClient"; - -export function useSanityLoader() { - const client = useSanityClient(); - const queryStore = createQueryStore({ - client, - ssr: false, - }); - const { useLiveMode, useQuery } = queryStore; - - return { queryStore, useLiveMode, useQuery }; -} diff --git a/templates/hydrogen-theme/app/hooks/useSanityQuery.tsx b/templates/hydrogen-theme/app/hooks/useSanityQuery.tsx index 5a23057..983a055 100644 --- a/templates/hydrogen-theme/app/hooks/useSanityQuery.tsx +++ b/templates/hydrogen-theme/app/hooks/useSanityQuery.tsx @@ -1,6 +1,7 @@ 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(cms: { initial: UseQueryOptions["initial"]; @@ -8,7 +9,6 @@ export function useSanityQuery(cms: { query: string; }): QueryStoreState { const { initial, params, query } = cms; - const { useQuery } = useSanityLoader(); return useQuery(query, params, { initial, diff --git a/templates/hydrogen-theme/app/lib/sanity/client.ts b/templates/hydrogen-theme/app/lib/sanity/client.ts index fc4ad47..638d4e0 100644 --- a/templates/hydrogen-theme/app/lib/sanity/client.ts +++ b/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, }, }), diff --git a/templates/hydrogen-theme/app/lib/sanity/sanity.loader.ts b/templates/hydrogen-theme/app/lib/sanity/sanity.loader.ts new file mode 100644 index 0000000..38e38f8 --- /dev/null +++ b/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; diff --git a/templates/hydrogen-theme/app/lib/sanity/sanity.server.ts b/templates/hydrogen-theme/app/lib/sanity/sanity.server.ts index 7dfe697..0f7cc0b 100644 --- a/templates/hydrogen-theme/app/lib/sanity/sanity.server.ts +++ b/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 { * 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); } diff --git a/templates/hydrogen-theme/server.ts b/templates/hydrogen-theme/server.ts index 4d0af69..472d2e9 100644 --- a/templates/hydrogen-theme/server.ts +++ b/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,