fix(next): live preview url (#5692)

packages/next/src/views/LivePreview/index.tsx

@@ -1,6 +1,7 @@
 import type { LivePreviewConfig } from 'payload/config'
-import type { EditViewComponent } from 'payload/types'
+import type { EditViewComponent, TypeWithID } from 'payload/types'
 
+import { notFound } from 'next/navigation.js'
 import React from 'react'
 
 import { LivePreviewClient } from './index.client.js'
@@ -11,6 +12,7 @@ export const LivePreviewView: EditViewComponent = async (props) => {
 
   const {
     collectionConfig,
+    docID,
     globalConfig,
     locale,
     req: {
@@ -22,8 +24,30 @@ export const LivePreviewView: EditViewComponent = async (props) => {
     } = {},
   } = initPageResult
 
-  // TODO(JAKE): not sure what `data` is or what it should be
+  let data: TypeWithID
-  const data = 'data' in props ? props.data : {}
+
+  try {
+    if (collectionConfig) {
+      data = await initPageResult.req.payload.findByID({
+        id: docID,
+        collection: collectionConfig.slug,
+        depth: 0,
+        draft: true,
+        fallbackLocale: null,
+      })
+    }
+
+    if (globalConfig) {
+      data = await initPageResult.req.payload.findGlobal({
+        slug: globalConfig.slug,
+        depth: 0,
+        draft: true,
+        fallbackLocale: null,
+      })
+    }
+  } catch (error) {
+    notFound()
+  }
 
   let livePreviewConfig: LivePreviewConfig = topLevelLivePreviewConfig
 
@@ -54,10 +78,11 @@ export const LivePreviewView: EditViewComponent = async (props) => {
   const url =
     typeof livePreviewConfig?.url === 'function'
       ? await livePreviewConfig.url({
+          collectionConfig,
           data,
-          documentInfo: {}, // TODO: recreate this object server-side, see `useDocumentInfo`
+          globalConfig,
-          // @ts-expect-error
           locale,
+          payload: initPageResult.req.payload,
         })
       : livePreviewConfig?.url
 

packages/payload/src/admin/views/types.ts

@@ -2,6 +2,7 @@ import type { Translations } from '@payloadcms/translations'
 
 import type { Permissions } from '../../auth/index.js'
 import type { SanitizedCollectionConfig } from '../../collections/config/types.js'
+import type { Locale } from '../../config/types.js'
 import type { SanitizedGlobalConfig } from '../../globals/config/types.js'
 import type { PayloadRequest } from '../../types/index.js'
 

packages/payload/src/config/types.ts

@@ -63,9 +63,11 @@ export type LivePreviewConfig = {
    */
   url?:
     | ((args: {
+        collectionConfig?: SanitizedCollectionConfig
         data: Record<string, any>
-        documentInfo: any // TODO: remove or populate this
+        globalConfig?: SanitizedGlobalConfig
         locale: Locale
+        payload: Payload
       }) => Promise<string> | string)
     | string
 }

test/live-preview/seed/tenant-1.ts

@@ -2,5 +2,5 @@ import type { Tenant } from '../payload-types.js'
 
 export const tenant1: Omit<Tenant, 'createdAt' | 'id' | 'updatedAt'> = {
   title: 'Tenant 1',
-  clientURL: 'http://localhost:3001',
+  clientURL: 'http://localhost:3000',
 }

test/live-preview/seed/tenant-2.ts

@@ -2,5 +2,5 @@ import type { Tenant } from '../payload-types.js'
 
 export const tenant2: Omit<Tenant, 'createdAt' | 'id' | 'updatedAt'> = {
   title: 'Tenant 2',
-  clientURL: 'http://localhost:3002',
+  clientURL: 'http://localhost:3001',
 }

test/live-preview/utilities/formatLivePreviewURL.ts

@@ -1,17 +1,34 @@
-export const formatLivePreviewURL = async ({ data, documentInfo }) => {
+import type { LivePreviewConfig } from 'payload/config'
+
+import type { Tenant } from '../payload-types.js'
+
+export const formatLivePreviewURL: LivePreviewConfig['url'] = async ({
+  data,
+  collectionConfig,
+  payload,
+}) => {
   let baseURL = 'http://localhost:3000/live-preview'
 
   // You can run async requests here, if needed
   // For example, multi-tenant apps may need to lookup additional data
   if (data.tenant) {
     try {
-      const fullTenant = await fetch(
+      const fullTenant = (await payload
-        `http://localhost:3000/api/tenants?where[id][equals]=${data.tenant}&limit=1&depth=0`,
+        .find({
-      )
+          collection: 'tenants',
-        .then((res) => res.json())
+          where: {
-        .then((res) => res?.docs?.[0])
+            id: {
+              equals: data.tenant,
+            },
+          },
+          limit: 1,
+          depth: 0,
+        })
+        .then((res) => res?.docs?.[0])) as Tenant
 
-      baseURL = fullTenant?.clientURL
+      if (fullTenant?.clientURL) {
+        baseURL = `${fullTenant.clientURL}/live-preview`
+      }
     } catch (e) {
       console.error(e)
     }
@@ -21,6 +38,6 @@ export const formatLivePreviewURL = async ({ data, documentInfo }) => {
   // I.e. append '/posts' to the URL if the document is a post
   // You can also do this on individual collection or global config, if preferred
   return `${baseURL}${
-    documentInfo?.slug && documentInfo.slug !== 'pages' ? `/${documentInfo.slug}` : ''
+    collectionConfig && collectionConfig.slug !== 'pages' ? `/${collectionConfig.slug}` : ''
   }${data?.slug && data.slug !== 'home' ? `/${data.slug}` : ''}`
 }

tsconfig.json

@@ -37,7 +37,7 @@
     ],
     "paths": {
       "@payload-config": [
-        "./test/fields/config.ts"
+        "./test/live-preview/config.ts"
       ],
       "@payloadcms/live-preview": [
         "./packages/live-preview/src"