fix(next): autosave document rendering

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

@@ -49,7 +49,7 @@ export const renderDocument = async ({
 }> => {
   const {
     collectionConfig,
-    docID: id,
+    docID: idFromArgs,
     globalConfig,
     locale,
     permissions,
@@ -72,7 +72,7 @@ export const renderDocument = async ({
   const segments = Array.isArray(params?.segments) ? params.segments : []
   const collectionSlug = collectionConfig?.slug || undefined
   const globalSlug = globalConfig?.slug || undefined
-  const isEditing = getIsEditing({ id, collectionSlug, globalSlug })
+  let isEditing = getIsEditing({ id: idFromArgs, collectionSlug, globalSlug })
 
   let RootViewOverride: PayloadComponent
   let CustomView: ViewFromConfig<ServerSideEditViewProps>
@@ -82,10 +82,10 @@ export const renderDocument = async ({
   let apiURL: string
 
   // Fetch the doc required for the view
-  const doc =
+  let doc =
     initialData ||
     (await getDocumentData({
-      id,
+      id: idFromArgs,
       collectionSlug,
       globalSlug,
       locale,
@@ -104,7 +104,7 @@ export const renderDocument = async ({
   ] = await Promise.all([
     // Get document preferences
     getDocPreferences({
-      id,
+      id: idFromArgs,
       collectionSlug,
       globalSlug,
       payload,
@@ -113,7 +113,7 @@ export const renderDocument = async ({
 
     // Get permissions
     getDocumentPermissions({
-      id,
+      id: idFromArgs,
       collectionConfig,
       data: doc,
       globalConfig,
@@ -122,7 +122,7 @@ export const renderDocument = async ({
 
     // Fetch document lock state
     getIsLocked({
-      id,
+      id: idFromArgs,
       collectionConfig,
       globalConfig,
       isEditing,
@@ -135,7 +135,7 @@ export const renderDocument = async ({
     { state: formState },
   ] = await Promise.all([
     getVersions({
-      id,
+      id: idFromArgs,
       collectionConfig,
       docPermissions,
       globalConfig,
@@ -144,15 +144,15 @@ export const renderDocument = async ({
       user,
     }),
     buildFormState({
-      id,
+      id: idFromArgs,
       collectionSlug,
       data: doc,
       docPermissions,
       docPreferences,
       fallbackLocale: false,
       globalSlug,
       locale: locale?.code,
-      operation: (collectionSlug && id) || globalSlug ? 'update' : 'create',
+      operation: (collectionSlug && idFromArgs) || globalSlug ? 'update' : 'create',
       renderAllFields: true,
       req,
       schemaPath: collectionSlug || globalSlug,
@@ -187,7 +187,7 @@ export const renderDocument = async ({
 
     const apiQueryParams = `?${params.toString()}`
 
-    apiURL = `${serverURL}${apiRoute}/${collectionSlug}/${id}${apiQueryParams}`
+    apiURL = `${serverURL}${apiRoute}/${collectionSlug}/${idFromArgs}${apiQueryParams}`
 
     RootViewOverride =
       collectionConfig?.admin?.components?.views?.edit?.root &&
@@ -274,8 +274,10 @@ export const renderDocument = async ({
   const validateDraftData =
     collectionConfig?.versions?.drafts && collectionConfig?.versions?.drafts?.validate
 
-  if (shouldAutosave && !validateDraftData && !id && collectionSlug) {
-    const doc = await payload.create({
+  let id = idFromArgs
+
+  if (shouldAutosave && !validateDraftData && !idFromArgs && collectionSlug) {
+    doc = await payload.create({
       collection: collectionSlug,
       data: initialData || {},
       depth: 0,
@@ -287,12 +289,18 @@ export const renderDocument = async ({
     })
 
     if (doc?.id) {
-      const redirectURL = formatAdminURL({
-        adminRoute,
-        path: `/collections/${collectionSlug}/${doc.id}`,
-        serverURL,
-      })
-      redirect(redirectURL)
+      id = doc.id
+      isEditing = getIsEditing({ id: doc.id, collectionSlug, globalSlug })
+
+      if (!drawerSlug) {
+        const redirectURL = formatAdminURL({
+          adminRoute,
+          path: `/collections/${collectionSlug}/${doc.id}`,
+          serverURL,
+        })
+
+        redirect(redirectURL)
+      }
     } else {
       throw new Error('not-found')
     }

packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useModal } from '@faceless-ui/modal'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
 import type { DocumentDrawerProps } from './types.js'
@@ -45,6 +45,7 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
 
   const [DocumentView, setDocumentView] = useState<React.ReactNode>(undefined)
   const [isLoading, setIsLoading] = useState(true)
+  const hasRenderedDocument = useRef(false)
 
   const getDocumentView = useCallback(
     (docID?: number | string) => {
@@ -142,8 +143,9 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
   }, [getDocumentView])
 
   useEffect(() => {
-    if (!DocumentView) {
+    if (!DocumentView && !hasRenderedDocument.current) {
       getDocumentView(existingDocID)
+      hasRenderedDocument.current = true
     }
   }, [DocumentView, getDocumentView, existingDocID])
 

packages/ui/src/providers/ServerFunctions/index.tsx

@@ -32,7 +32,7 @@ type RenderDocument = (args: {
   redirectAfterDelete?: boolean
   redirectAfterDuplicate?: boolean
   signal?: AbortSignal
-}) => Promise<{ docID: string; Document: React.ReactNode }>
+}) => Promise<{ data: Data; Document: React.ReactNode }>
 
 type GetDocumentSlots = (args: {
   collectionSlug: string
@@ -129,16 +129,12 @@ export const ServerFunctionsProvider: React.FC<{
       const { signal: remoteSignal, ...rest } = args || {}
 
       try {
-        if (!remoteSignal?.aborted) {
-          const result = (await serverFunction({
-            name: 'render-document',
-            args: { fallbackLocale: false, ...rest },
-          })) as { docID: string; Document: React.ReactNode }
+        const result = (await serverFunction({
+          name: 'render-document',
+          args: { fallbackLocale: false, ...rest },
+        })) as { data: Data; Document: React.ReactNode }
 
-          if (!remoteSignal?.aborted) {
-            return result
-          }
-        }
+        return result
       } catch (_err) {
         console.error(_err) // eslint-disable-line no-console
       }

test/fields-relationship/e2e.spec.ts

@@ -179,10 +179,9 @@ describe('fields - relationship', () => {
     await expect(options).toHaveCount(2) // two docs
     await options.nth(0).click()
     await expect(field).toContainText(relationOneDoc.id)
-    await saveDocAndAssert(page)
-    await wait(200)
-    await trackNetworkRequests(page, `/api/${relationOneSlug}`, {
-      beforePoll: async () => await page.reload(),
+    await trackNetworkRequests(page, `/api/${relationOneSlug}`, async () => {
+      await saveDocAndAssert(page)
+      await wait(200)
     })
   })
 

test/helpers/e2e/trackNetworkRequests.ts

@@ -8,6 +8,7 @@ import { expect } from '@playwright/test'
 export const trackNetworkRequests = async (
   page: Page,
   url: string,
+  action: () => Promise<any>,
   options?: {
     allowedNumberOfRequests?: number
     beforePoll?: () => Promise<any> | void
@@ -26,6 +27,8 @@ export const trackNetworkRequests = async (
     }
   })
 
+  await action()
+
   if (typeof beforePoll === 'function') {
     await beforePoll()
   }

test/versions/e2e.spec.ts

@@ -25,6 +25,7 @@
 import type { BrowserContext, Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { navigateToDoc } from 'helpers/e2e/navigateToDoc.js'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -43,6 +44,7 @@ import {
   throttleTest,
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
+import { trackNetworkRequests } from '../helpers/e2e/trackNetworkRequests.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../helpers/reInitializeDB.js'
 import { waitForAutoSaveToRunAndComplete } from '../helpers/waitForAutoSaveToRunAndComplete.js'
@@ -394,6 +396,42 @@ describe('versions', () => {
       expect(page.url()).toMatch(/\/versions$/)
     })
 
+    test('collection - should autosave', async () => {
+      await page.goto(autosaveURL.create)
+      await page.locator('#field-title').fill('autosave title')
+      await waitForAutoSaveToRunAndComplete(page)
+      await expect(page.locator('#field-title')).toHaveValue('autosave title')
+
+      const { id: postID } = await payload.create({
+        collection: postCollectionSlug,
+        data: {
+          title: 'post title',
+          description: 'post description',
+        },
+      })
+
+      await page.goto(postURL.edit(postID))
+
+      await trackNetworkRequests(
+        page,
+        `${serverURL}/admin/collections/${postCollectionSlug}/${postID}`,
+        async () => {
+          await page
+            .locator(
+              '#field-relationToAutosaves.field-type.relationship .relationship-add-new__add-button.doc-drawer__toggler',
+            )
+            .click()
+        },
+        {
+          allowedNumberOfRequests: 1,
+        },
+      )
+
+      const drawer = page.locator('[id^=doc-drawer_autosave-posts_1_]')
+      await expect(drawer).toBeVisible()
+      await expect(drawer.locator('.id-label')).toBeVisible()
+    })
+
     test('global - should autosave', async () => {
       const url = new AdminUrlUtil(serverURL, autoSaveGlobalSlug)
       await page.goto(url.global(autoSaveGlobalSlug))

tsconfig.json

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