templates: fix issue with populateAuthors hook breaking live-preview on website template (#11608)

Fixes https://github.com/payloadcms/payload/issues/11468

The populateAuthors hook could break live preview if it returned a
notFound error as we didn't catch these properly

templates/website/src/collections/Posts/hooks/populateAuthors.ts

@@ -6,27 +6,32 @@ import { User } from 'src/payload-types'
 // GraphQL will not return mutated user data that differs from the underlying schema
 // So we use an alternative `populatedAuthors` field to populate the user data, hidden from the admin UI
 export const populateAuthors: CollectionAfterReadHook = async ({ doc, req, req: { payload } }) => {
-  if (doc?.authors) {
+  if (doc?.authors && doc?.authors?.length > 0) {
     const authorDocs: User[] = []
 
     for (const author of doc.authors) {
+      try {
         const authorDoc = await payload.findByID({
           id: typeof author === 'object' ? author?.id : author,
           collection: 'users',
           depth: 0,
-        req,
         })
 
         if (authorDoc) {
           authorDocs.push(authorDoc)
         }
-    }
 
+        if (authorDocs.length > 0) {
           doc.populatedAuthors = authorDocs.map((authorDoc) => ({
             id: authorDoc.id,
             name: authorDoc.name,
           }))
         }
+      } catch {
+        // swallow error
+      }
+    }
+  }
 
   return doc
 }

templates/with-vercel-website/src/blocks/Form/Checkbox/index.tsx

@@ -39,7 +39,7 @@ export const Checkbox: React.FC<
           {label}
         </Label>
       </div>
-      {errors[name] && <Error />}
+      {errors[name] && <Error name={name} />}
     </Width>
   )
 }

templates/with-vercel-website/src/blocks/Form/Country/index.tsx

@@ -59,7 +59,7 @@ export const Country: React.FC<
         }}
         rules={{ required }}
       />
-      {errors[name] && <Error />}
+      {errors[name] && <Error name={name} />}
     </Width>
   )
 }

templates/with-vercel-website/src/blocks/Form/Email/index.tsx

@@ -32,7 +32,7 @@ export const Email: React.FC<
         {...register(name, { pattern: /^\S[^\s@]*@\S+$/, required })}
       />
 
-      {errors[name] && <Error />}
+      {errors[name] && <Error name={name} />}
     </Width>
   )
 }

templates/with-vercel-website/src/blocks/Form/Error/index.tsx

@@ -1,5 +1,15 @@
-import * as React from 'react'
+'use client'
 
-export const Error: React.FC = () => {
-  return <div className="mt-2 text-red-500 text-sm">This field is required</div>
+import * as React from 'react'
+import { useFormContext } from 'react-hook-form'
+
+export const Error = ({ name }: { name: string }) => {
+  const {
+    formState: { errors },
+  } = useFormContext()
+  return (
+    <div className="mt-2 text-red-500 text-sm">
+      {(errors[name]?.message as string) || 'This field is required'}
+    </div>
+  )
 }

templates/with-vercel-website/src/blocks/Form/Number/index.tsx

@@ -30,7 +30,7 @@ export const Number: React.FC<
         type="number"
         {...register(name, { required })}
       />
-      {errors[name] && <Error />}
+      {errors[name] && <Error name={name} />}
     </Width>
   )
 }

templates/with-vercel-website/src/blocks/Form/Select/index.tsx

@@ -57,7 +57,7 @@ export const Select: React.FC<
         }}
         rules={{ required }}
       />
-      {errors[name] && <Error />}
+      {errors[name] && <Error name={name} />}
     </Width>
   )
 }

templates/with-vercel-website/src/blocks/Form/State/index.tsx

@@ -58,7 +58,7 @@ export const State: React.FC<
         }}
         rules={{ required }}
       />
-      {errors[name] && <Error />}
+      {errors[name] && <Error name={name} />}
     </Width>
   )
 }

templates/with-vercel-website/src/blocks/Form/Text/index.tsx

@@ -26,7 +26,7 @@ export const Text: React.FC<
         )}
       </Label>
       <Input defaultValue={defaultValue} id={name} type="text" {...register(name, { required })} />
-      {errors[name] && <Error />}
+      {errors[name] && <Error name={name} />}
     </Width>
   )
 }

templates/with-vercel-website/src/blocks/Form/Textarea/index.tsx

@@ -34,7 +34,7 @@ export const Textarea: React.FC<
         {...register(name, { required: required })}
       />
 
-      {errors[name] && <Error />}
+      {errors[name] && <Error name={name} />}
     </Width>
   )
 }

templates/with-vercel-website/src/collections/Posts/hooks/populateAuthors.ts

@@ -6,27 +6,32 @@ import { User } from 'src/payload-types'
 // GraphQL will not return mutated user data that differs from the underlying schema
 // So we use an alternative `populatedAuthors` field to populate the user data, hidden from the admin UI
 export const populateAuthors: CollectionAfterReadHook = async ({ doc, req, req: { payload } }) => {
-  if (doc?.authors) {
+  if (doc?.authors && doc?.authors?.length > 0) {
     const authorDocs: User[] = []
 
     for (const author of doc.authors) {
+      try {
         const authorDoc = await payload.findByID({
           id: typeof author === 'object' ? author?.id : author,
           collection: 'users',
           depth: 0,
-        req,
         })
 
         if (authorDoc) {
           authorDocs.push(authorDoc)
         }
-    }
 
+        if (authorDocs.length > 0) {
           doc.populatedAuthors = authorDocs.map((authorDoc) => ({
             id: authorDoc.id,
             name: authorDoc.name,
           }))
         }
+      } catch {
+        // swallow error
+      }
+    }
+  }
 
   return doc
 }