// app/api/preview/route.ts
import { draftMode, cookies } from 'next/headers';
import { redirect } from 'next/navigation';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const slug = searchParams.get('slug');

  // Check the secret against the value configured in your environment
  if (secret !== process.env.HYGRAPH_PREVIEW_SECRET || !slug) {
    return new Response('Invalid token', { status: 401 });
  }

  // Fetch the slug from Hygraph to ensure we don't run into redirect loops
  const res = await fetch(process.env.HYGRAPH_ENDPOINT!, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.HYGRAPH_PREVIEW_TOKEN}`,
    },
    body: JSON.stringify({
      query: `
        query SinglePage($slug: String!) {
          page(where: { slug: $slug }, stage: DRAFT) {
            slug
          }
        }
      `,
      variables: { slug },
    }),
  });

  const { data } = await res.json();

  if (!data?.page) {
    return new Response('Invalid slug', { status: 401 });
  }

  // Workaround for https://github.com/vercel/next.js/issues/49927
  // Enable draft mode as usual (await required in Next.js 15+)
  const draft = await draftMode();
  draft.enable();

  // Update the cookie and set SameSite=None so it works inside the Hygraph iframe
  const cookieStore = await cookies();
  const cookie = cookieStore.get('__prerender_bypass');
  cookieStore.set({
    name: '__prerender_bypass',
    value: cookie?.value,
    httpOnly: true,
    path: '/',
    secure: true,
    sameSite: 'none',
  });

  redirect(`/${data.page.slug}`);
}

// app/[slug]/page.tsx
import { request } from 'graphql-request';
import { draftMode } from 'next/headers';

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  // isEnabled is true if the draft mode cookie has been set by the preview route
  // See: https://nextjs.org/docs/app/building-your-application/configuring/draft-mode
  const { slug } = await params;
  const { isEnabled } = await draftMode();

  // Default stage is PUBLISHED. Switch to DRAFT when draft mode is active.
  const query = `
    query Page($slug: String!, $stage: Stage! = PUBLISHED) {
      page(where: { slug: $slug }, stage: $stage) {
        title
        description
        slug
      }
    }
  `;

  const variables = {
    stage: isEnabled ? 'DRAFT' : 'PUBLISHED',
    slug,
  };

  // Use the preview token in draft mode so the DRAFT stage is accessible,
  // and the production token otherwise so only PUBLISHED content is served
  const endpoint = process.env.HYGRAPH_ENDPOINT!;
  const token = isEnabled
    ? process.env.HYGRAPH_PREVIEW_TOKEN!
    : process.env.HYGRAPH_PRODUCTION_TOKEN!;

  const { page } = await request(endpoint, query, variables, {
    Authorization: `Bearer ${token}`,
  });

  return (
    <main>
      <h1>{page.title}</h1>
      <p>{page.description}</p>
    </main>
  );
}

# .env.local
HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PREVIEW_TOKEN=your-draft-stage-token
HYGRAPH_PRODUCTION_TOKEN=your-published-stage-token
HYGRAPH_PREVIEW_SECRET=MY_SECRET_TOKEN

// api/preview.js
export default async function handler(req, res) {
  const { slug, preview } = req.query;
  const isPreview = preview === 'true';
  const stage = isPreview ? 'DRAFT' : 'PUBLISHED';
  const token = isPreview
    ? process.env.HYGRAPH_PREVIEW_TOKEN
    : process.env.HYGRAPH_PRODUCTION_TOKEN;

  const query = `
    query Page($slug: String!, $stage: Stage!) {
      page(where: { slug: $slug }, stage: $stage) {
        title
        description
        slug
      }
    }
  `;

  const response = await fetch(process.env.HYGRAPH_ENDPOINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({ query, variables: { slug, stage } }),
  });

  const { data } = await response.json();
  res.status(200).json(data.page);
}

// src/Page.jsx
import { useEffect, useState } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';

export default function Page() {
  const { slug } = useParams();
  const [searchParams] = useSearchParams();
  const isPreview = searchParams.get('preview') === 'true';
  const [page, setPage] = useState(null);

  useEffect(() => {
    fetch(`/api/preview?slug=${slug}&preview=${isPreview}`)
      .then((res) => res.json())
      .then(setPage);
  }, [slug, isPreview]);

  if (!page) return null;

  return (
    <main>
      <h1>{page.title}</h1>
      <p>{page.description}</p>
    </main>
  );
}

# Serverless function environment
HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PREVIEW_TOKEN=your-draft-stage-token
HYGRAPH_PRODUCTION_TOKEN=your-published-stage-token

// app/sessions.server.ts
import { createCookieSessionStorage } from '@remix-run/node';

export const { getSession, commitSession } = createCookieSessionStorage({
  cookie: {
    name: '__preview_mode',
    secrets: [process.env.HYGRAPH_PREVIEW_SECRET!],
    secure: true,
    sameSite: 'none', // required so the cookie works inside the Studio preview iframe
    path: '/',
    httpOnly: true,
  },
});

// app/routes/preview.tsx
import { redirect, type LoaderFunctionArgs } from '@remix-run/node';
import { getSession, commitSession } from '~/sessions.server';

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const slug = url.searchParams.get('slug');
  const secret = url.searchParams.get('secret');

  if (!slug || secret !== process.env.HYGRAPH_PREVIEW_SECRET) {
    throw new Response('Invalid token', { status: 401 });
  }

  const session = await getSession(request.headers.get('Cookie'));
  session.set('isPreview', true);

  return redirect(`/${slug}`, {
    headers: { 'Set-Cookie': await commitSession(session) },
  });
}

// app/routes/$slug.tsx
import { json, type LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getSession } from '~/sessions.server';

export async function loader({ request, params }: LoaderFunctionArgs) {
  const session = await getSession(request.headers.get('Cookie'));
  const isPreview = session.get('isPreview') === true;

  const stage = isPreview ? 'DRAFT' : 'PUBLISHED';
  const token = isPreview
    ? process.env.HYGRAPH_PREVIEW_TOKEN
    : process.env.HYGRAPH_PRODUCTION_TOKEN;

  const query = `
    query Page($slug: String!, $stage: Stage!) {
      page(where: { slug: $slug }, stage: $stage) {
        title
        description
        slug
      }
    }
  `;

  const res = await fetch(process.env.HYGRAPH_ENDPOINT!, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({ query, variables: { slug: params.slug, stage } }),
  });

  const { data } = await res.json();
  return json({ page: data.page });
}

export default function Slug() {
  const { page } = useLoaderData<typeof loader>();

  return (
    <main>
      <h1>{page.title}</h1>
      <p>{page.description}</p>
    </main>
  );
}

HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PREVIEW_TOKEN=your-draft-stage-token
HYGRAPH_PRODUCTION_TOKEN=your-published-stage-token
HYGRAPH_PREVIEW_SECRET=your-secret-token

// api/preview.js
export default async function handler(req, res) {
  const { slug, preview } = req.query;
  const isPreview = preview === 'true';
  const stage = isPreview ? 'DRAFT' : 'PUBLISHED';
  const token = isPreview
    ? process.env.HYGRAPH_PREVIEW_TOKEN
    : process.env.HYGRAPH_PRODUCTION_TOKEN;

  const query = `
    query Page($slug: String!, $stage: Stage!) {
      page(where: { slug: $slug }, stage: $stage) {
        title
        description
        slug
      }
    }
  `;

  const response = await fetch(process.env.HYGRAPH_ENDPOINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({ query, variables: { slug, stage } }),
  });

  const { data } = await response.json();
  res.status(200).json(data.page);
}

<!-- src/views/Page.vue -->
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const isPreview = route.query.preview === 'true';
const page = ref(null);

onMounted(async () => {
  const res = await fetch(
    `/api/preview?slug=${route.params.slug}&preview=${isPreview}`
  );
  page.value = await res.json();
});
</script>

<template>
  <main v-if="page">
    <h1>{{ page.title }}</h1>
    <p>{{ page.description }}</p>
  </main>
</template>

# Serverless function environment
HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PREVIEW_TOKEN=your-draft-stage-token
HYGRAPH_PRODUCTION_TOKEN=your-published-stage-token

// plugins/preview.ts
export default defineNuxtPlugin((nuxtApp) => {
  const route = useRoute();

  // Refresh page data when navigating while ?preview=true is present
  nuxtApp.hook('page:finish', () => {
    if (route.query.preview === 'true') {
      refreshNuxtData();
    }
  });

  // Expose a reactive $preview flag for templates and page logic
  return {
    provide: {
      preview: computed(() => route.query.preview === 'true'),
    },
  };
});

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    hygraphEndpoint: process.env.HYGRAPH_ENDPOINT,
    hygraphPreviewToken: process.env.HYGRAPH_PREVIEW_TOKEN,
    hygraphProductionToken: process.env.HYGRAPH_PRODUCTION_TOKEN,
  },
});

// server/api/page.get.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const slug = String(query.slug ?? '');
  const isPreview = query.preview === 'true';
  const config = useRuntimeConfig();

  const stage = isPreview ? 'DRAFT' : 'PUBLISHED';
  const token = isPreview
    ? config.hygraphPreviewToken
    : config.hygraphProductionToken;

  const graphqlQuery = `
    query Page($slug: String!, $stage: Stage! = PUBLISHED) {
      page(where: { slug: $slug }, stage: $stage) {
        title
        description
      }
    }
  `;

  const response = await $fetch<{ data: { page: { title: string; description: string } } }>(
    config.hygraphEndpoint,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
      body: {
        query: graphqlQuery,
        variables: { slug, stage },
      },
    }
  );

  return response.data.page;
});

<!-- pages/[slug].vue -->
<script setup>
const route = useRoute();

const { data: page } = await useFetch('/api/page', {
  query: computed(() => ({
    slug: route.params.slug,
    preview: route.query.preview === 'true' ? 'true' : 'false',
  })),
});
</script>

<template>
  <main v-if="page">
    <h1>{{ page.title }}</h1>
    <p>{{ page.description }}</p>
  </main>
</template>

HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PREVIEW_TOKEN=your-draft-stage-token
HYGRAPH_PRODUCTION_TOKEN=your-published-stage-token

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // SSR is required — static generation caches responses and editors
  // will always see stale content in preview without it
  output: 'server',
  adapter: vercel(), // or node, netlify, cloudflare
});

---
// src/pages/[slug].astro
import { request } from 'graphql-request';

// HYGRAPH_PREVIEW=true is set in your preview deployment environment only.
// Do not set this in production — it would serve DRAFT content to all visitors.
const isPreview = import.meta.env.HYGRAPH_PREVIEW === 'true';

// Default stage is PUBLISHED. Switch to DRAFT in the preview deployment.
const query = `
  query Page($slug: String!, $stage: Stage! = PUBLISHED) {
    page(where: { slug: $slug }, stage: $stage) {
      title
      description
    }
  }
`;

const variables = {
  stage: isPreview ? 'DRAFT' : 'PUBLISHED',
  slug: Astro.params.slug,
};

const token = isPreview
  ? import.meta.env.HYGRAPH_PREVIEW_TOKEN
  : import.meta.env.HYGRAPH_PRODUCTION_TOKEN;

const { page } = await request(
  import.meta.env.HYGRAPH_ENDPOINT,
  query,
  variables,
  { Authorization: `Bearer ${token}` }
);
---

<html>
  <head><title>{page.title}</title></head>
  <body>
    <main>
      <h1>{page.title}</h1>
      <p>{page.description}</p>
    </main>
  </body>
</html>

# Preview environment only
HYGRAPH_PREVIEW=true
HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PREVIEW_TOKEN=your-draft-stage-token

# Production environment
HYGRAPH_PREVIEW=false
HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PRODUCTION_TOKEN=your-published-stage-token

// server.js
import express from 'express';
import fetch from 'node-fetch';

const app = express();

async function fetchPage(slug, isPreview) {
  const stage = isPreview ? 'DRAFT' : 'PUBLISHED';
  const token = isPreview
    ? process.env.HYGRAPH_PREVIEW_TOKEN
    : process.env.HYGRAPH_PRODUCTION_TOKEN;

  const query = `
    query Page($slug: String!, $stage: Stage!) {
      page(where: { slug: $slug }, stage: $stage) {
        title
        description
        slug
      }
    }
  `;

  const res = await fetch(process.env.HYGRAPH_ENDPOINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({ query, variables: { slug, stage } }),
  });

  const { data } = await res.json();
  return data.page;
}

app.get('/:slug', async (req, res) => {
  const isPreview = req.query.preview === 'true';
  const page = await fetchPage(req.params.slug, isPreview);

  res.send(`
    <html>
      <body>
        <h1>${page.title}</h1>
        <p>${page.description}</p>
      </body>
    </html>
  `);
});

app.listen(3000);

HYGRAPH_ENDPOINT=https://your-region.cdn.hygraph.com/content/your-project-id/master
HYGRAPH_PREVIEW_TOKEN=your-draft-stage-token
HYGRAPH_PRODUCTION_TOKEN=your-published-stage-token