From 28f14c1f85dac143a4ea8752ca693617770742f1 Mon Sep 17 00:00:00 2001
From: Bryan Robinson <bryanlrobinson@gmail.com>
Date: Wed, 14 Aug 2024 15:51:45 -0400
Subject: [PATCH 1/2] Updates readme and env sample

---
 .env.sample                |  8 +++++++-
 README.md                  | 14 ++++++++++++++
 src/app/api/draft/route.ts | 22 ++++++----------------
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/.env.sample b/.env.sample
index 2dc6e11..03de7ee 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,2 +1,8 @@
+# Content API Endpoint
 HYGRAPH_ENDPOINT=
-HYGRAPH_TOKEN=
\ No newline at end of file
+# Token if you don't want an open content API
+HYGRAPH_TOKEN=
+# Token that serves all content from DRAFT stage
+HYGRAPH_PREVIEW_TOKEN=
+# String to match in Live Preview query parameters
+HYGRAPH_QUERY_SECRET=
\ No newline at end of file
diff --git a/README.md b/README.md
index 1757570..2cb6550 100644
--- a/README.md
+++ b/README.md
@@ -41,8 +41,22 @@ npm install
 npm run dev
 ```
 
+## Setting up Live Preview
+
+Live preview runs through the API endpoint at `/api/draft`. This endpoint sets draftMode() from Next.js and allows for the change to the Hygraph Token from Published to Draft token.
+
+In the cloned Hygraph project, the Post and Page models have a sidebar widget for Live preview configured to the following URLs:
+
+```
+post: http://localhost:3000/api/draft?slug=${slug}&model=post
+page: http://localhost:3000/api/draft?slug=${slug}&model=page
+```
+
+The API Route will handle redirects and if there is a Draft token in your `.env.local` file, it will use that token to fetch the draft content.
+
 ## Features
 * App Router
 * Tailwind CSS
 * Built-in 404 page functionality
 * `generateMetadata` for SEO
+* Live Preview
diff --git a/src/app/api/draft/route.ts b/src/app/api/draft/route.ts
index 13ad34d..e8f7e4a 100644
--- a/src/app/api/draft/route.ts
+++ b/src/app/api/draft/route.ts
@@ -1,6 +1,6 @@
 import { draftMode, cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
-
+import { HygraphClient } from '@/utils/client'
 
 
 export async function GET(request) {
@@ -8,6 +8,7 @@ export async function GET(request) {
   const previewToken = searchParams.get('previewToken')
   const slug = searchParams.get('slug')
   const model= searchParams.get('model')
+  const client = HygraphClient({preview: true})
 
   let modelUrl = ''
   if (model === 'page') {
@@ -23,28 +24,17 @@ export async function GET(request) {
     }
   `
 
-
+console.log(previewToken, process.env.HYGRAPH_QUERY_SECRET, slug, model)
 
   // Check for a slug and for a preview token
   if (previewToken !== process.env.HYGRAPH_QUERY_SECRET || !slug || !model) {
+
     return new Response('Invalid token', { status: 401 })
   }
 
-  // Get 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'
-    },
-    body: JSON.stringify({
-      query,
-      variables: { slug }
-    })
-  })
-
-  // Return the data
-  const { data } = await res.json()
+  const data = await client.request(query, {slug})
 
+  // Get the slug from Hygraph to ensure we don't run into redirect loops
   // If the data returns in undefined or in the wrong shape, return an error
   if (!data || !data.page) {
     return new Response('Invalid slug', { status: 401 })

From 7a02e68979d1a77f1d86cbb3e182f7c8bf0a7177 Mon Sep 17 00:00:00 2001
From: Bryan Robinson <bryanlrobinson@gmail.com>
Date: Thu, 15 Aug 2024 12:52:30 -0400
Subject: [PATCH 2/2] Removes TS since none of the rest of the project is TS

---
 src/app/api/draft/{route.ts => route.js} |  0
 tsconfig.json                            | 37 ------------------------
 2 files changed, 37 deletions(-)
 rename src/app/api/draft/{route.ts => route.js} (100%)
 delete mode 100644 tsconfig.json

diff --git a/src/app/api/draft/route.ts b/src/app/api/draft/route.js
similarity index 100%
rename from src/app/api/draft/route.ts
rename to src/app/api/draft/route.js
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index bf38ce7..0000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "noEmit": true,
-    "incremental": true,
-    "module": "esnext",
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}