From 3c193246e240b60c1b2edce90c6371362f2a8062 Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Sun, 10 Mar 2024 01:49:43 -0500
Subject: [PATCH] fix: provide configPromise to getPayload to avoid error on
 first-time, uncached load

---
 src/app/(app)/page.tsx     | 16 ++++++++++------
 src/app/my-route/route.ts  |  5 ++++-
 src/components/Example.tsx |  3 ++-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index d76faa9..9ad2fbf 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -6,15 +6,18 @@ const Page = () => {
   return (
     <article className={['container'].filter(Boolean).join(' ')}>
       <h1>
-        Payload 3.0 <span className='rainbow'>ALPHA</span>!
+        Payload 3.0 <span className="rainbow">ALPHA</span>!
       </h1>
       <p>
         This alpha is rapidly evolving, you can report any bugs against{' '}
-        <a href='https://github.com/payloadcms/payload-3.0-alpha-demo/issues' target='_blank'>
+        <a href="https://github.com/payloadcms/payload-3.0-alpha-demo/issues" target="_blank">
           the repo
         </a>{' '}
         or in the{' '}
-        <a href='https://discord.com/channels/967097582721572934/1215659716538273832' target='_blank'>
+        <a
+          href="https://discord.com/channels/967097582721572934/1215659716538273832"
+          target="_blank"
+        >
           dedicated channel in Discord
         </a>
         .
@@ -22,12 +25,12 @@ const Page = () => {
 
       <p>
         <strong>
-          Payload is running at <Link href='/admin'>/admin</Link>
+          Payload is running at <Link href="/admin">/admin</Link>
         </strong>
       </p>
 
       <p>
-        <Link href='/my-route' target='_blank'>
+        <Link href="/my-route" target="_blank">
           /my-route
         </Link>{' '}
         contains an example of a custom route running the Local API.
@@ -40,7 +43,8 @@ const Page = () => {
       <pre>
         <code>
           {`import { getPayload } from 'payload'
-const payload = await getPayload()
+import configPromise from "@payload-config";
+const payload = await getPayload({ config: configPromise })
 
 const data = await payload.find({
   collection: 'posts',
diff --git a/src/app/my-route/route.ts b/src/app/my-route/route.ts
index cd1bfef..a78662e 100644
--- a/src/app/my-route/route.ts
+++ b/src/app/my-route/route.ts
@@ -1,7 +1,10 @@
 import { getPayload } from 'payload'
+import configPromise from '@payload-config'
 
 export const GET = async () => {
-  const payload = await getPayload()
+  const payload = await getPayload({
+    config: configPromise,
+  })
 
   const data = await payload.find({
     collection: 'users',
diff --git a/src/components/Example.tsx b/src/components/Example.tsx
index 4456627..f8355b5 100644
--- a/src/components/Example.tsx
+++ b/src/components/Example.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import { getPayload } from 'payload'
+import configPromise from '@payload-config'
 
 const Example: React.FC = async () => {
-  const payload = await getPayload()
+  const payload = await getPayload({ config: configPromise })
   const url = payload.config.serverURL
   return <div>The admin panel is running at: {url}</div>
 }