fix: preview mode for odb/fallback pages

Author: lindsaylevine

src/lib/helpers/setupNetlifyFunctionForPage.js

@@ -11,7 +11,7 @@ const getNextDistDir = require('./getNextDistDir')
 const { logItem } = require('./logger')
 
 // Create a Netlify Function for the page with the given file path
-const setupNetlifyFunctionForPage = async ({ filePath, functionsPath, isApiPage, isISR }) => {
+const setupNetlifyFunctionForPage = async ({ filePath, functionsPath, isApiPage, isODB, forFallbackPreviewMode }) => {
   // Set function name based on file path
   const functionName = getNetlifyFunctionName(filePath, isApiPage)
   const functionDirectory = join(functionsPath, functionName)
@@ -23,8 +23,9 @@ const setupNetlifyFunctionForPage = async ({ filePath, functionsPath, isApiPage,
   }
 
   // Write entry point to function directory
-  const entryPointPath = join(functionDirectory, `${functionName}.js`)
-  await writeFile(entryPointPath, getTemplate({ filePath, isISR }))
+  const fileName = forFallbackPreviewMode ? `preview-${functionName}` : functionName
+  const entryPointPath = join(functionDirectory, `${fileName}.js`)
+  await writeFile(entryPointPath, getTemplate({ filePath, isODB }))
 
   // Copy function helper
   await copy(join(TEMPLATES_DIR, 'getHandlerFunction.js'), join(functionDirectory, 'getHandlerFunction.js'))

src/lib/pages/getStaticProps/redirects.js

@@ -6,6 +6,7 @@ const addDefaultLocaleRedirect = require('../../helpers/addDefaultLocaleRedirect
 const asyncForEach = require('../../helpers/asyncForEach')
 const getFilePathForRoute = require('../../helpers/getFilePathForRoute')
 const getNetlifyFunctionName = require('../../helpers/getNetlifyFunctionName')
+const isRouteWithFallback = require('../../helpers/isRouteWithFallback')
 
 const getPages = require('./pages')
 
@@ -35,11 +36,15 @@ const getRedirects = async () => {
     const relativePath = getFilePathForRoute(srcRoute || route, 'js')
     const filePath = slash(join('pages', relativePath))
     const functionName = getNetlifyFunctionName(filePath)
+    const isODB = await isRouteWithFallback(srcRoute)
 
     // Preview mode conditions
     const conditions = ['Cookie=__prerender_bypass,__next_preview_data']
+    // ODB pages' preview mode needs a special flagged standard function because
+    // their default function (an ODB) is not functional for preview mode
     const target = `/.netlify/functions/${functionName}`
-    const previewModeRedirect = { conditions, force: true, target }
+    const previewModeTarget = isODB ? `/.netlify/functions/preview-${functionName}` : target
+    const previewModeRedirect = { conditions, force: true, target: previewModeTarget }
 
     // Add a preview mode redirect for the standard route
     redirects.push({
@@ -54,7 +59,7 @@ const getRedirects = async () => {
     })
 
     // Preview mode default locale redirect must precede normal default locale redirect
-    await addDefaultLocaleRedirect(redirects, route, target, previewModeRedirect)
+    await addDefaultLocaleRedirect(redirects, route, target, { conditions, force: true })
     await addDefaultLocaleRedirect(redirects, route)
   })
 

src/lib/pages/getStaticPropsWithFallback/setup.js

@@ -14,11 +14,16 @@ const setup = async (functionsPath) => {
   const pages = await getPages()
 
   // Create Netlify Function for every page
-  return pages.map(({ route }) => {
+  return pages.reduce((jobs, { route }) => {
     const relativePath = getFilePathForRoute(route, 'js')
     const filePath = slash(join('pages', relativePath))
-    return { type: 'function', filePath, functionsPath, isISR: true }
-  })
+    // Need two different functions - one ODB for normal pages, one standard for preview mode
+    return [
+      ...jobs,
+      { type: 'function', filePath, functionsPath, isODB: true },
+      { type: 'function', filePath, functionsPath, forFallbackPreviewMode: true },
+    ]
+  }, [])
 }
 
 module.exports = setup

src/lib/templates/getTemplate.js

@@ -1,5 +1,5 @@
-const getTemplate = ({ filePath, isISR }) => {
-  if (isISR) {
+const getTemplate = ({ filePath, isODB }) => {
+  if (isODB) {
     return `// Auto-generated file. DO NOT MODIFY.
 const { getHandlerFunction } = require('./getHandlerFunction')
 const { builder } = require('@netlify/functions')