server function

Author: alexanbj

apps/docs/app/lib/previewMiddleware.ts

@@ -1,11 +1,12 @@
-import { createMiddleware } from '@tanstack/start'
-import { getCookie } from 'vinxi/http'
+import { createMiddleware } from '@tanstack/start';
+import { getCookie } from 'vinxi/http';
 
-const previewMiddleware = createMiddleware().server(async ({ next }) => {
+export const previewMiddleware = createMiddleware().server(async ({ next }) => {
   const isPreview = getCookie('__sanity_preview') === 'true';
+  console.log({ isPreview });
   return next({
     context: {
       previewMode: isPreview,
-    }
-  })
-})
+    },
+  });
+});

apps/docs/app/lib/sanity.server.ts

@@ -0,0 +1,21 @@
+import { createServerFn } from '@tanstack/start';
+import { previewMiddleware } from './previewMiddleware';
+import { sanityFetch as _sanityFetch, client } from './sanity';
+
+export const sanityFetch = createServerFn({ method: 'GET' })
+  .middleware([previewMiddleware])
+  .validator((data: { query: any; params: any }) => data)
+  .handler(async ({ data, context }) => {
+    const { query, params } = data;
+
+    if (context.previewMode) {
+      const previewClient = client.withConfig({
+        perspective: 'previewDrafts',
+        token: process.env.SANITY_VIEWER_TOKEN, // Needed for accessing previewDrafts perspective
+        useCdn: false, // the previewDrafts perspective requires this to be `false
+      });
+      return _sanityFetch({ query, params, client: previewClient });
+    }
+
+    return _sanityFetch({ query, params });
+  });

apps/docs/app/lib/sanity.ts

@@ -11,12 +11,14 @@ export const client = createClient({
 export async function sanityFetch<const QueryString extends string>({
   query,
   params = {},
+  client: _client = client,
 }: {
   query: QueryString;
   params?: QueryParams;
+  client?: typeof client;
 }) {
   // Not sure what's happening here, but I need to set filterReponse to false to get the data as an array?
-  const { result } = await client.fetch(query, params, {
+  const { result } = await _client.fetch(query, params, {
     filterResponse: false,
   });
 

apps/docs/app/routes/_docs/komponenter/$slug.tsx

@@ -1,6 +1,7 @@
 import * as badgeExamples from '@/examples/badge';
 import * as buttonExamples from '@/examples/button';
-import { sanityFetch } from '@/lib/sanity';
+import { sanityFetch } from '@/lib/sanity.server';
+import { ComponentPreview } from '@/ui/component-preview';
 import { Content } from '@/ui/content';
 import { PropsTable } from '@/ui/props-table';
 import { createFileRoute, notFound } from '@tanstack/react-router';
@@ -15,8 +16,10 @@ export const Route = createFileRoute('/_docs/komponenter/$slug')({
   component: Page,
   loader: async ({ params }) => {
     const res = await sanityFetch({
-      query: COMPONENT_QUERY,
-      params: { slug: params.slug },
+      data: {
+        query: COMPONENT_QUERY,
+        params: { slug: params.slug },
+      },
     });
 
     if (res.data == null) {

apps/docs/app/routes/api/preview-mode/disable.ts

@@ -1,9 +1,14 @@
 import { createAPIFileRoute } from '@tanstack/start/api';
-import { deleteCookie, sendRedirect } from 'vinxi/http'
+import { deleteCookie, sendRedirect } from 'vinxi/http';
 
-export const APIRoute = createAPIFileRoute('/api/studio/preview-mode/disable')({
+export const APIRoute = createAPIFileRoute('/api/preview-mode/disable')({
   GET: () => {
-    deleteCookie('__sanity_preview', { path: '/', secure: import.meta.env.PROD, httpOnly: true, sameSite: 'strict' });
+    deleteCookie('__sanity_preview', {
+      path: '/',
+      secure: import.meta.env.PROD,
+      httpOnly: true,
+      sameSite: 'strict',
+    });
     sendRedirect('/');
   },
 });

apps/docs/app/routes/api/preview-mode/enable.ts

@@ -5,7 +5,7 @@ import { createAPIFileRoute } from '@tanstack/start/api';
 import { SanityClient } from 'sanity';
 import { sendRedirect, setCookie } from 'vinxi/http';
 
-export const APIRoute = createAPIFileRoute('/api/studio/preview-mode/enable')({
+export const APIRoute = createAPIFileRoute('/api/preview-mode/enable')({
   GET: async ({ request }) => {
     if (!process.env.SANITY_VIEWER_TOKEN) {
       throw new Response('Preview mode missing token', { status: 401 });
@@ -15,17 +15,22 @@ export const APIRoute = createAPIFileRoute('/api/studio/preview-mode/enable')({
       token: process.env.SANITY_VIEWER_TOKEN,
     });
 
-    const {
-      isValid,
-      redirectTo = '/',
-    } = await validatePreviewUrl(clientWithToken, request.url);
+    const { isValid, redirectTo = '/' } = await validatePreviewUrl(
+      clientWithToken,
+      request.url,
+    );
 
     if (!isValid) {
       throw new Response('Invalid secret', { status: 401 });
     }
 
     // we can use sameSite: 'strict' because we're running an embedded studio
-    setCookie('__sanity_preview', randomBytes(16).toString('hex'), { path: '/', secure: import.meta.env.PROD, httpOnly: true, sameSite: 'strict' });
-    sendRedirect(redirectTo)
+    setCookie('__sanity_preview', randomBytes(16).toString('hex'), {
+      path: '/',
+      secure: import.meta.env.PROD,
+      httpOnly: true,
+      sameSite: 'strict',
+    });
+    sendRedirect(redirectTo);
   },
 });