diff --git a/.env.test b/.env.test index 750d48e18..12a35daf7 100644 --- a/.env.test +++ b/.env.test @@ -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 diff --git a/next.config.js b/next.config.js index c7c76a042..c220f20d8 100644 --- a/next.config.js +++ b/next.config.js @@ -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, diff --git a/package.json b/package.json index 1cb220741..a46fcb1db 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/data/queries/newsStory.ts b/src/data/queries/newsStory.ts index afde081e8..6d75e9c46 100644 --- a/src/data/queries/newsStory.ts +++ b/src/data/queries/newsStory.ts @@ -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 = () => { @@ -24,19 +25,30 @@ export const params: QueryParams = () => { // 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 = async ( opts ): Promise => { - const entity = await drupalClient.getResource( - 'node--news_story', - opts?.id, - { - params: params().getQueryObject(), - } - ) + const entity = opts.context.preview + ? // need to use getResourceFromContext for unpublished revisions + await drupalClient.getResourceFromContext( + 'node--news_story', + opts.context, + { + params: params().getQueryObject(), + } + ) + : // otherwise just lookup by uuid + await drupalClient.getResource( + 'node--news_story', + opts.id, + { + params: params().getQueryObject(), + } + ) return entity } diff --git a/src/lib/utils/drupalClient.ts b/src/lib/utils/drupalClient.ts index f9112b079..6f958882b 100644 --- a/src/lib/utils/drupalClient.ts +++ b/src/lib/utils/drupalClient.ts @@ -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', }) diff --git a/src/pages/[[...slug]].tsx b/src/pages/[[...slug]].tsx index 589cf303c..96d26089e 100644 --- a/src/pages/[[...slug]].tsx +++ b/src/pages/[[...slug]].tsx @@ -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 ( + {preview ? <>This is a preview page : null} {title} @@ -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,7 +120,7 @@ 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, } @@ -121,6 +128,7 @@ export async function getStaticProps(context: GetStaticPropsContext) { return { props: { + preview: context.preview || false, resource, globalElements: await getGlobalElements( pathInfo.jsonapi?.entryPoint, diff --git a/src/pages/api/exit-preview.tsx b/src/pages/api/exit-preview.tsx index 6d29b0c1c..b7e302fdb 100644 --- a/src/pages/api/exit-preview.tsx +++ b/src/pages/api/exit-preview.tsx @@ -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() diff --git a/src/pages/api/preview.tsx b/src/pages/api/preview.tsx index 39fa2fca4..c56aa5b4d 100644 --- a/src/pages/api/preview.tsx +++ b/src/pages/api/preview.tsx @@ -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) +}