Merge pull request #3 from demo-repositories/latest

Latest

next/app/[slug]/page.tsx

@@ -8,7 +8,7 @@ import Marquee from "@/components/marquee";
 import QuerySet from "@/components/query-set";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
-import { loadQuery } from "@/lib/sanity/store";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 import dynamic from "next/dynamic";
 import type { PageParams } from "@/components/pages/types";
 const PagePreview = dynamic(

next/app/landing-pages/page.tsx

@@ -1,6 +1,6 @@
 import LandingPages, { query } from "@/components/pages/landing-pages";
 import { ISanityLandingPageDocument } from "@/components/pages/landing-page";
-import { loadQuery } from "@/lib/sanity/store";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 
 /**
  * List of all available 'landingPage' documents. Not in POC scope but helpful for seeing what contet is available to look at.

next/app/page.tsx

@@ -2,7 +2,7 @@ import Stories, { query as storiesQuery } from "@/components/pages/stories";
 import LandingPages, {
   query as landingPagesQuery,
 } from "@/components/pages/landing-pages";
-import { loadQuery } from "@/lib/sanity/store";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 import { ISanityStoryDocument } from "@/components/pages/story";
 import { ISanityLandingPageDocument } from "@/components/pages/landing-page";
 import { groq } from "next-sanity";

next/app/story/[slug]/page.tsx

@@ -3,7 +3,7 @@ import Story, { query, ISanityStoryDocument } from "@/components/pages/story";
 import CustomPortableText from "@/components/pages/story/custom-portable-text";
 import { notFound } from "next/navigation";
 import type { Metadata, ResolvingMetadata } from "next";
-import { loadQuery } from "@/lib/sanity/store";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 import dynamic from "next/dynamic";
 import { PageParams } from "@/components/pages/types";
 

next/app/story/page.tsx

@@ -1,6 +1,5 @@
 import Stories, { query } from "@/components/pages/stories";
-import { loadQuery } from "@/lib/sanity/store";
-
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 export default async function StoriesPage() {
   const { data } = await loadQuery<number>(query);
 

next/components/bynder-block/index.tsx

@@ -1,8 +1,10 @@
 import RenderBynderBlock from "./component";
 
+
 // import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 // import query from "./query";
 
+
 import { ISanityDocument } from "@/lib/sanity/types";
 /**
  * Maps to the 'dynamicCta' object type in Sanity.
@@ -25,7 +27,9 @@ export interface ISanityBynderBlockDocument extends ISanityDocument {
 export default async function BynderBlock(props) {
   // const params = { _id: _ref };
 
+
   // const initial = await componentData(params);
 
+
   return <RenderBynderBlock {...props.value} />;
 }

next/components/bynder-block/preview.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useQuery } from "@/lib/sanity/store";
+import { useQuery } from "@/lib/sanity/loader/useQuery";
 import Spinner from "@/components/spinner";
 import RenderBynderBlock from "./component";
 import query from "./query";

next/components/card-deck/index.tsx

@@ -1,4 +1,4 @@
-import { loadQuery } from "@/lib/sanity/store";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 import { TSanityCardDeckDocument } from "@/lib/sanity/types";
 import query from "./query";
 import { RenderCardDeck } from "./component";

next/components/data-table/index.tsx

@@ -1,4 +1,4 @@
-import { loadQuery } from "@/lib/sanity/store";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 import query from "./query";
 import { ISanityDocument } from "@/lib/sanity/types";
 import RenderDataTable from "./component";

next/components/dynamic-cta/index.tsx

@@ -1,5 +1,5 @@
 import RenderDynamicCTA from "./component";
-import { loadQuery } from "@/lib/sanity/store";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 import { TButtonProps } from "@/components/button";
 import query from "./query";
 import { ISanityDocument } from "@/lib/sanity/types";

next/components/pages/story/preview.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useQuery } from "@/lib/sanity/store";
+import { useQuery } from "@/lib/sanity/loader/useQuery";
 import Story, { ISanityStoryDocument, query } from "./index";
 import PreviewCustomPortableText from "./custom-portable-text/preview";
 import { PageParams } from "../types";

next/components/query-set/index.tsx

@@ -1,7 +1,7 @@
 import RenderQuerySet from "./component";
 import Results from "./results";
 import query from "./query";
-import { loadQuery } from "@/lib/sanity/store";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";
 import { TRenderQuerySetProps } from "./types";
 
 /**

next/components/query-set/results/index.tsx

@@ -1,6 +1,5 @@
 import RenderResults from "./component";
-import { loadQuery } from "@/lib/sanity/store";
-import query from "./query";
+import { loadQuery } from "@/lib/sanity/loader/loadQuery";import query from "./query";
 import { vercelStegaCleanAll } from "@sanity/client/stega";
 import type { TResult } from "./component";
 /**

next/lib/sanity/client.ts

@@ -1,4 +1,4 @@
-import { createClient } from "next-sanity";
+import { createClient } from "@sanity/client/stega";
 
 const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID; // "pv8y60vp"
 const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET; // "production"

next/lib/sanity/loader/loadQuery.ts

@@ -0,0 +1,50 @@
+import "server-only";
+
+import * as queryStore from "@sanity/react-loader";
+import { draftMode } from "next/headers";
+
+import { client } from "@/lib/sanity/client";
+
+import { token } from "@/lib/sanity/token";
+
+const serverClient = client.withConfig({
+  token,
+  stega: {
+    // Enable stega if it's a Vercel preview deployment, as the Vercel Toolbar has controls that shows overlays
+    enabled: process.env.VERCEL_ENV === "preview",
+  },
+});
+
+/**
+ * Sets the server client for the query store, doing it here ensures that all data fetching in production
+ * happens on the server and not on the client.
+ * Live mode in `sanity/presentation` still works, as it uses the `useLiveMode` hook to update `useQuery` instances with
+ * live draft content using `postMessage`.
+ */
+queryStore.setServerClient(serverClient);
+
+const usingCdn = serverClient.config().useCdn;
+// Automatically handle draft mode
+export const loadQuery = ((query, params = {}, options = {}) => {
+  const {
+    perspective = draftMode().isEnabled ? "previewDrafts" : "published",
+  } = options;
+  // Don't cache by default
+  let revalidate: NextFetchRequestConfig["revalidate"] = 0;
+  // If `next.tags` is set, and we're not using the CDN, then it's safe to cache
+  if (!usingCdn && Array.isArray(options.next?.tags)) {
+    revalidate = false;
+  } else if (usingCdn) {
+    revalidate = 60;
+  }
+  return queryStore.loadQuery(query, params, {
+    ...options,
+    next: {
+      revalidate,
+      ...(options.next || {}),
+    },
+    perspective,
+    // @TODO add support in `@sanity/client/stega` for the below
+    // stega: {enabled: draftMode().isEnabled}
+  });
+}) satisfies typeof queryStore.loadQuery;

next/lib/sanity/loader/useQuery.ts

@@ -0,0 +1,31 @@
+import {
+  type QueryParams,
+  type QueryResponseInitial,
+  type UseQueryOptionsDefinedInitial,
+} from "@sanity/react-loader";
+import * as queryStore from "@sanity/react-loader";
+
+/**
+ * Exports to be used in client-only or components that render both server and client
+ */
+export const useQuery = <
+  QueryResponseResult = unknown,
+  QueryResponseError = unknown,
+>(
+  query: string,
+  params?: QueryParams,
+  options?: UseQueryOptionsDefinedInitial<QueryResponseResult>,
+) => {
+  const snapshot = queryStore.useQuery<QueryResponseResult, QueryResponseError>(
+    query,
+    params,
+    options,
+  );
+
+  // Always throw errors if there are any
+  if (snapshot.error) {
+    throw snapshot.error;
+  }
+
+  return snapshot;
+};

next/lib/sanity/token.ts

@@ -0,0 +1,15 @@
+import "server-only";
+
+import { experimental_taintUniqueValue } from "react";
+
+export const token = process.env.SANITY_API_READ_TOKEN;
+
+if (!token) {
+  throw new Error("Missing SANITY_API_READ_TOKEN");
+}
+
+experimental_taintUniqueValue(
+  "Do not pass the sanity API read token to the client.",
+  process,
+  token,
+);