department-of-veterans-affairs · tjheffner · Sep 7, 2023 · Sep 8, 2023 · Sep 8, 2023 · Sep 8, 2023
@@ -3,5 +3,5 @@ NEXT_PUBLIC_DRUPAL_BASE_URL=https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsi
 NEXT_IMAGE_DOMAIN=https://content-build-medc0xjkxm4jmpzxl3tfbcs7qcddsivh.ci.cms.va.gov
 DRUPAL_SITE_ID=
 DRUPAL_PREVIEW_SECRET=
-DRUPAL_CLIENT_ID=
-DRUPAL_CLIENT_SECRET=
+DRUPAL_CLIENT_ID=foo
+DRUPAL_CLIENT_SECRET=bar
@@ -13,6 +13,9 @@ const nextConfig = {
   },
   env: {
     NEXT_PUBLIC_DRUPAL_BASE_URL: process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
+    DRUPAL_CLIENT_ID: process.env.DRUPAL_CLIENT_ID,
+    DRUPAL_CLIENT_SECRET: process.env.DRUPAL_CLIENT_SECRET,
+    DRUPAL_PREVIEW_SECRET: process.env.DRUPAL_PREVIEW_SECRET,
     GOOGLE_TAG_MANAGER_AUTH: process.env.GOOGLE_TAG_MANAGER_AUTH,
     GOOGLE_TAG_MANAGER_PREVIEW: process.env.GOOGLE_TAG_MANAGER_PREVIEW,
     GOOGLE_TAG_MANAGER_ID: process.env.GOOGLE_TAG_MANAGER_ID,

@@ -5,6 +5,8 @@
   "scripts": {
     "dev": "SSG=false next dev",
     "build": "SSG=true next build",
+    "build:preview":"SSG=false next build",
+    "start": "next start",
     "postbuild": "next-sitemap",
     "export": "SSG=true next build && next export",
     "export:serve": "http-server out -p 8001",

@@ -8,6 +8,7 @@ import { drupalClient } from '@/lib/utils/drupalClient'
 import { queries } from '.'
 import { NodeNewsStory } from '@/types/dataTypes/drupal/node'
 import { NewsStoryType } from '@/types/index'
+import { GetServerSidePropsContext } from 'next'
 
 // Define the query params for fetching node--news_story.
 export const params: QueryParams<null> = () => {
@@ -24,19 +25,30 @@ export const params: QueryParams<null> = () => {
 // Define the option types for the data loader.
 type DataOpts = QueryOpts<{
   id: string
+  context?: GetServerSidePropsContext // from the preview api route
 }>
 
 // Implement the data loader.
 export const data: QueryData<DataOpts, NodeNewsStory> = async (
   opts
 ): Promise<NodeNewsStory> => {
-  const entity = await drupalClient.getResource<NodeNewsStory>(
-    'node--news_story',
-    opts?.id,
-    {
-      params: params().getQueryObject(),
-    }
-  )
+  const entity = opts.context.preview
+    ? // need to use getResourceFromContext for unpublished revisions
+      await drupalClient.getResourceFromContext<NodeNewsStory>(
+        'node--news_story',
+        opts.context,
+        {
+          params: params().getQueryObject(),
+        }
+      )
+    : // otherwise just lookup by uuid
+      await drupalClient.getResource<NodeNewsStory>(
+        'node--news_story',
+        opts.id,
+        {
+          params: params().getQueryObject(),
+        }
+      )
 
   return entity
 }

@@ -45,4 +45,10 @@ export const fetcher = async (input: RequestInfo, init?: RequestInit) => {
 export const drupalClient = new DrupalClient(baseUrl, {
   fetcher,
   useDefaultResourceTypeEntry: true,
+  auth: {
+    clientId: process.env.DRUPAL_CLIENT_ID,
+    clientSecret: process.env.DRUPAL_CLIENT_SECRET,
+  },
+  previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
+  forceIframeSameSiteCookie: process.env.NODE_ENV === 'development',
 })
@@ -3,6 +3,7 @@ import {
   GetStaticPathsContext,
   GetStaticPathsResult,
   GetStaticPropsContext,
+  InferGetStaticPropsType,
 } from 'next'
 import Head from 'next/head'
 import { QueryOpts } from 'next-drupal-query'
@@ -20,13 +21,14 @@ import {
   getStaticPathsByResourceType,
 } from '@/lib/utils/staticPaths'
 
-export default function ResourcePage({ resource, globalElements }) {
+export default function ResourcePage({ resource, preview, globalElements }) {
   if (!resource) return null
 
   const title = `${resource.title} | Veterans Affairs`
 
   return (
     <Wrapper bannerData={globalElements.bannerData}>
+      {preview ? <>This is a preview page</> : null}
       <Head>
         <title>{title}</title>
       </Head>
@@ -46,7 +48,7 @@ export async function getStaticPaths(
   // so we set SSG=true on `next build/export` and SSG=false on `next dev`.
   // `getStaticPaths` will never be called during runtime (`next start`), but we could set
   // SSG=false there as well, for good measure.
-  if (!process.env.SSG) {
+  if (process.env.SSG === 'false') {
     return {
       paths: [],
       fallback: 'blocking',
@@ -74,7 +76,12 @@ export async function getStaticProps(context: GetStaticPropsContext) {
       ? drupalClient.getPathFromContext(context)
       : isListingPage.path
 
-  const pathInfo = await drupalClient.translatePath(path)
+  // need to use Context here for previewing unpublished revisions
+  const pathInfo =
+    isListingPage === false
+      ? await drupalClient.translatePathFromContext(context)
+      : await drupalClient.translatePath(path)
+
   if (!pathInfo) {
     return {
       notFound: true,
@@ -113,14 +120,15 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
   // If we're not in preview mode and the resource is not published,
   // Return page not found.
-  if (!context.preview && resource?.published === false) {
+  if (!context.preview && !resource?.published) {
     return {
       notFound: true,
     }
   }
 
   return {
     props: {
+      preview: context.preview || false,
       resource,
       globalElements: await getGlobalElements(
         pathInfo.jsonapi?.entryPoint,

@@ -1,6 +1,6 @@
 import { NextApiResponse } from 'next'
 
-export default async function exit(_, response: NextApiResponse) {
+export default function exit(_, response: NextApiResponse) {
   response.clearPreviewData()
   response.writeHead(307, { Location: '/' })
   response.end()

@@ -1,3 +1,9 @@
-import { DrupalPreview } from 'next-drupal'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { drupalClient } from '@/lib/utils/drupalClient'
 
-export default DrupalPreview()
+export default async function handler(
+  request: NextApiRequest,
+  response: NextApiResponse
+) {
+  await drupalClient.preview(request, response)
+}