Updates readme and env sample

.env.sample

@@ -1,2 +1,8 @@
+# Content API Endpoint
 HYGRAPH_ENDPOINT=
-HYGRAPH_TOKEN=
+# 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=

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

src/app/api/draft/route.ts → src/app/api/draft/route.js

@@ -1,13 +1,14 @@
 import { draftMode, cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
-
+import { HygraphClient } from '@/utils/client'
 
 
 export async function GET(request) {
   const { searchParams } = new URL(request.url)
   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 })