chore(templates): update website template to use transactions for seeding (#7098)

templates/website/.env.example

@@ -1,6 +1,3 @@
-# Run on a specific port
-PORT=3000
-
 # Database connection string
 DATABASE_URI=mongodb://127.0.0.1/payload-template-website
 

templates/website/next.config.js

@@ -2,11 +2,13 @@ import { withPayload } from '@payloadcms/next/withPayload'
 
 import redirects from './redirects.js'
 
+const NEXT_PUBLIC_SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000'
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
     remotePatterns: [
-      ...[process.env.NEXT_PUBLIC_SERVER_URL /* 'https://example.com' */].map((item) => {
+      ...[NEXT_PUBLIC_SERVER_URL /* 'https://example.com' */].map((item) => {
         const url = new URL(item)
 
         return {

templates/website/src/app/components/Blocks/index.tsx

@@ -8,7 +8,6 @@ import { CallToActionBlock } from '../../blocks/CallToAction'
 import { ContentBlock } from '../../blocks/Content'
 import { FormBlock } from '../../blocks/Form'
 import { MediaBlock } from '../../blocks/MediaBlock'
-import { RelatedPosts, type RelatedPostsProps } from '../../blocks/RelatedPosts'
 import { toKebabCase } from '../../utilities/toKebabCase'
 
 const blockComponents = {
@@ -17,11 +16,10 @@ const blockComponents = {
   cta: CallToActionBlock,
   formBlock: FormBlock,
   mediaBlock: MediaBlock,
-  relatedPosts: RelatedPosts,
 }
 
 export const Blocks: React.FC<{
-  blocks: (Page['layout'][0] | RelatedPostsProps)[]
+  blocks: Page['layout'][0][]
 }> = (props) => {
   const { blocks } = props
 

templates/website/src/app/components/Media/Image/index.tsx

@@ -45,8 +45,6 @@ export const Image: React.FC<MediaProps> = (props) => {
     height = fullHeight
     alt = altFromResource
 
-    const filename = fullFilename
-
     src = `${process.env.NEXT_PUBLIC_SERVER_URL}${url}`
   }
 

templates/website/src/app/providers/HeaderTheme/index.tsx

@@ -2,13 +2,13 @@
 
 import type { Theme } from '@/providers/Theme/types'
 
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import React, { createContext, useCallback, useContext, useState } from 'react'
 
 import canUseDOM from '../../utilities/canUseDOM'
 
 export interface ContextType {
   headerTheme?: Theme | null
-  setHeaderTheme: (theme: Theme | null) => void // eslint-disable-line no-unused-vars
+  setHeaderTheme: (theme: Theme | null) => void  
 }
 
 const initialContext: ContextType = {

templates/website/src/payload/endpoints/seed.ts

@@ -1,4 +1,4 @@
-import type { PayloadHandler } from 'payload'
+import { type PayloadHandler, commitTransaction, initTransaction } from 'payload'
 
 import { seed as seedScript } from '../seed'
 
@@ -10,7 +10,9 @@ export const seed: PayloadHandler = async (req): Promise<Response> => {
   }
 
   try {
-    await seedScript(payload)
+    await initTransaction(req)
+    await seedScript({ payload, req })
+    await commitTransaction(req)
     return Response.json({ success: true })
   } catch (error: unknown) {
     const message = error instanceof Error ? error.message : 'Unknown error'

templates/website/src/payload/seed/index.ts

@@ -1,4 +1,4 @@
-import type { Payload } from 'payload'
+import type { Payload, PayloadRequest } from 'payload'
 
 import fs from 'fs'
 import path from 'path'
@@ -23,7 +23,13 @@ const globals = ['header', 'footer']
 // i.e. running `yarn seed` locally instead of using the admin UI within an active app
 // The app is not running to revalidate the pages and so the API routes are not available
 // These error messages can be ignored: `Error hitting revalidate route for...`
-export const seed = async (payload: Payload): Promise<void> => {
+export const seed = async ({
+  payload,
+  req,
+}: {
+  payload: Payload
+  req: PayloadRequest
+}): Promise<void> => {
   payload.logger.info('Seeding database...')
 
   // we need to clear the media directory before seeding
@@ -45,6 +51,7 @@ export const seed = async (payload: Payload): Promise<void> => {
     ...collections.map((collection) =>
       payload.delete({
         collection: collection as 'media',
+        req,
         where: {},
       }),
     ),
@@ -52,6 +59,7 @@ export const seed = async (payload: Payload): Promise<void> => {
       payload.updateGlobal({
         slug: global as 'header',
         data: {},
+        req,
       }),
     ),
   ])
@@ -62,6 +70,7 @@ export const seed = async (payload: Payload): Promise<void> => {
     ['demo-author@payloadcms.com'].map(async (email) => {
       await payload.delete({
         collection: 'users',
+        req,
         where: {
           email: {
             equals: email,
@@ -79,6 +88,7 @@ export const seed = async (payload: Payload): Promise<void> => {
         email: 'demo-author@payloadcms.com',
         password: 'password',
       },
+      req,
     }),
   ])
 
@@ -91,21 +101,25 @@ export const seed = async (payload: Payload): Promise<void> => {
       collection: 'media',
       data: image1,
       filePath: path.resolve(dirname, 'image-post1.webp'),
+      req,
     }),
     await payload.create({
       collection: 'media',
       data: image2,
       filePath: path.resolve(dirname, 'image-post2.webp'),
+      req,
     }),
     await payload.create({
       collection: 'media',
       data: image2,
       filePath: path.resolve(dirname, 'image-post3.webp'),
+      req,
     }),
     await payload.create({
       collection: 'media',
       data: image2,
       filePath: path.resolve(dirname, 'image-hero1.webp'),
+      req,
     }),
   ])
 
@@ -117,36 +131,42 @@ export const seed = async (payload: Payload): Promise<void> => {
       data: {
         title: 'Technology',
       },
+      req,
     }),
     await payload.create({
       collection: 'categories',
       data: {
         title: 'News',
       },
+      req,
     }),
     await payload.create({
       collection: 'categories',
       data: {
         title: 'Finance',
       },
+      req,
     }),
     await payload.create({
       collection: 'categories',
       data: {
         title: 'Design',
       },
+      req,
     }),
     await payload.create({
       collection: 'categories',
       data: {
         title: 'Software',
       },
+      req,
     }),
     await payload.create({
       collection: 'categories',
       data: {
         title: 'Engineering',
       },
+      req,
     }),
   ])
 
@@ -175,6 +195,7 @@ export const seed = async (payload: Payload): Promise<void> => {
         .replace(/"\{\{IMAGE_2\}\}"/g, image2ID)
         .replace(/"\{\{AUTHOR\}\}"/g, demoAuthorID),
     ),
+    req,
   })
 
   const post2Doc = await payload.create({
@@ -185,6 +206,7 @@ export const seed = async (payload: Payload): Promise<void> => {
         .replace(/"\{\{IMAGE_2\}\}"/g, image3ID)
         .replace(/"\{\{AUTHOR\}\}"/g, demoAuthorID),
     ),
+    req,
   })
 
   const post3Doc = await payload.create({
@@ -195,6 +217,7 @@ export const seed = async (payload: Payload): Promise<void> => {
         .replace(/"\{\{IMAGE_2\}\}"/g, image1ID)
         .replace(/"\{\{AUTHOR\}\}"/g, demoAuthorID),
     ),
+    req,
   })
 
   // update each post with related posts
@@ -206,6 +229,7 @@ export const seed = async (payload: Payload): Promise<void> => {
       data: {
         relatedPosts: [post2Doc.id, post3Doc.id],
       },
+      req,
     }),
     await payload.update({
       id: post2Doc.id,
@@ -213,6 +237,7 @@ export const seed = async (payload: Payload): Promise<void> => {
       data: {
         relatedPosts: [post1Doc.id, post3Doc.id],
       },
+      req,
     }),
     await payload.update({
       id: post3Doc.id,
@@ -220,6 +245,7 @@ export const seed = async (payload: Payload): Promise<void> => {
       data: {
         relatedPosts: [post1Doc.id, post2Doc.id],
       },
+      req,
     }),
   ])
 
@@ -232,6 +258,7 @@ export const seed = async (payload: Payload): Promise<void> => {
         .replace(/"\{\{IMAGE_1\}\}"/g, imageHomeID)
         .replace(/"\{\{IMAGE_2\}\}"/g, image2ID),
     ),
+    req,
   })
 
   payload.logger.info(`— Seeding contact form...`)
@@ -239,6 +266,7 @@ export const seed = async (payload: Payload): Promise<void> => {
   const contactForm = await payload.create({
     collection: 'forms',
     data: JSON.parse(JSON.stringify(contactFormData)),
+    req,
   })
 
   let contactFormID = contactForm.id
@@ -254,6 +282,7 @@ export const seed = async (payload: Payload): Promise<void> => {
     data: JSON.parse(
       JSON.stringify(contactPageData).replace(/"\{\{CONTACT_FORM_ID\}\}"/g, contactFormID),
     ),
+    req,
   })
 
   payload.logger.info(`— Seeding header...`)
@@ -281,6 +310,7 @@ export const seed = async (payload: Payload): Promise<void> => {
         },
       ],
     },
+    req,
   })
 
   payload.logger.info(`— Seeding footer...`)
@@ -314,6 +344,7 @@ export const seed = async (payload: Payload): Promise<void> => {
         },
       ],
     },
+    req,
   })
 
   payload.logger.info('Seeded database successfully!')

templates/website/src/payload/seed/post-3.ts

@@ -1,7 +1,7 @@
 import type { Post } from '../../payload-types'
 
 export const post3: Partial<Post> = {
-  slug: 'post-3',
+  slug: 'dollar-and-sense-the-financial-forecast',
   _status: 'published',
   authors: ['{{AUTHOR}}'],
   content: {