payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
24.94k stars 1.59k forks source link

Payload .find() does not fetch fresh data #8129

Closed odwrotnie closed 1 month ago

odwrotnie commented 1 month ago

Link to reproduction

No response

Environment Info

"@payloadcms/next": "3.0.0-beta.90"
"react": "19.0.0-rc-06d0b89e-20240801",
"react-dom": "19.0.0-rc-06d0b89e-20240801",
"next": "15.0.0-canary.104",

Basically - the same as in https://github.com/payloadcms/payload-3.0-demo

Describe the Bug

The list is not updated on production after creating new Announcement in /admin (on dev it is OK):


import { getPayloadHMR } from "@payloadcms/next/utilities"
import config from '@payload-config'

export default async function AnnouncementsList() {

    const payload = await getPayloadHMR({ config })
    const list = await payload.find(
        {
            collection: 'announcements',
            sort: '-start',
        }
    )

    return <div className="">
        {
            list.docs.map((a) => {
                return <ul key={a.id} className="list-disc">
                    <li className="">{a.name}</li>
                </ul>
            })
        }
    </div>
}

```****

### Reproduction Steps

1. I have just cloned the `payload-3.0-demo` project
2. Added new model
3. On dev mode it is showing all Announcements
4. On production it is displaying items rendered during build

### Adapters and Plugins

_No response_
tyteen4a03 commented 1 month ago

This isn't a bug with Payload but rather with how Next.js caches pages in production. You need to add a hook to your collections that will instruct the Next.js cache to revalidate the relevant paths once it has been saved - see https://github.com/payloadcms/payload/blob/beta/templates/website/src/collections/Pages/hooks/revalidatePage.ts for an example.

odwrotnie commented 1 month ago

Thanks!

I have resolved it with unstable_cache like that:

import { getPayloadHMR } from "@payloadcms/next/utilities"
import config from '@payload-config'
import { unstable_cache } from "next/cache"

export default async function AnnouncementsList() {

    const payload = await getPayloadHMR({ config })
    const getCachedAnnouncements = unstable_cache(
        async () => {
            return await payload.find(
                {
                    collection: 'announcements',
                    sort: '-start',
                }
            )
        }, ['announcements'],
        {
            tags: ['announcements'],
            revalidate: 60
        }
    )
    const announcements = await getCachedAnnouncements()

    return <div className="">
        {
            announcements.docs.map((a) => {
                return <ul key={a.id} className="list-disc">
                    <li className="">{a.name}</li>
                </ul>
            })
        }
    </div>
}
github-actions[bot] commented 1 month ago

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.