Merge pull request #13 from thomasKn/thomas/fv-223-fix-usesanitydata-…

…to-use-rootloaderdata Update useSanityData to use root loader data
frontvibe · Jan 30, 2024 · 354d90e · 354d90e
2 parents 18565d9 + c444a13
commit 354d90e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/app/hooks/useSanityData.tsx b/app/hooks/useSanityData.tsx
@@ -11,6 +11,7 @@ import {useEncodeDataAttribute} from '@sanity/react-loader';
 import {useQuery} from '~/lib/sanity/sanity.loader';
 
 import {useEnvironmentVariables} from './useEnvironmentVariables';
+import {useRootLoaderData} from './useRootLoaderData';
 
 type Initial = {
   data: unknown;
@@ -22,17 +23,20 @@ type InitialData<U> = U extends {data: infer V} ? V : never;
  * The `useSanityData` hook is needed to preview live data from Sanity Studio.
  * It must be used within a route that has a loader that returns a `sanityPreviewPayload` object.
  */
-export function useSanityData<T extends Initial>(initial: T) {
+export function useSanityData<T extends Initial>(initial: T, routeId?: string) {
   const loaderData = useLoaderData<{
     sanity?: {
       params?: QueryParams;
       query?: string;
     };
   }>();
-  const sanity = loaderData?.sanity;
+  const rootLoaderData = useRootLoaderData();
   const env = useEnvironmentVariables();
   const studioUrl = env?.SANITY_STUDIO_URL!;
 
+  const sanity =
+    routeId && routeId === 'root' ? rootLoaderData?.sanity : loaderData?.sanity;
+
   if (sanity === undefined) {
     // eslint-disable-next-line no-console
     console.warn(

diff --git a/app/hooks/useSanityRoot.tsx b/app/hooks/useSanityRoot.tsx
@@ -3,9 +3,12 @@ import {useSanityData} from './useSanityData';
 
 export function useSanityRoot() {
   const rootLoaderdata = useRootLoaderData();
+
   const sanityGlobal = rootLoaderdata?.sanityRoot!;
-  const {data, encodeDataAttribute, loading, sourceMap} =
-    useSanityData(sanityGlobal);
+  const {data, encodeDataAttribute, loading, sourceMap} = useSanityData(
+    sanityGlobal,
+    'root',
+  );
 
   return {data, encodeDataAttribute, loading, sourceMap};
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -151,7 +151,7 @@ export default function App() {
         <Links />
         <style dangerouslySetInnerHTML={{__html: cssVars}} />
       </head>
-      <body className="bg-background text-foreground flex min-h-screen flex-col [&_main]:grow">
+      <body className="flex min-h-screen flex-col bg-background text-foreground [&_main]:grow">
         <Layout>
           <Outlet />
         </Layout>

diff --git a/studio/schemas/objects/sections/collectionBanner.tsx b/studio/schemas/objects/sections/collectionBanner.tsx
@@ -26,7 +26,7 @@ export default defineField({
     select: {
       settings: 'settings',
     },
-    prepare({settings}:any) {
+    prepare({settings}: any) {
       return {
         title: 'Collection Banner',
         media: () => settings.hide ? <EyeOff/> : <Image />,