Performance issues with large array list
Describe the Bug
I have an array field with 50 articles. Each article has a category, partners, image, etc., which are relationships. This means that every time I open the collection, it makes a bunch of requests.
Example: In this list, I have 10 entries, each with a category and a partner. This means there will be 10 requests, one for each relationship. Also, when I drag an item in the list, Payload makes multiple requests as well.
Link to the code that reproduces this issue
https://github.com/ed-cscosta/payload-array-issue
Reproduction Steps
Run the app and create one category and one partner. Then, create a post and add five items to the array. Observe how many requests Payload makes during this process. Sometimes, in the production environment, the app crashes when I try to drag items in the list.
Which area(s) are affected? (Select all that apply)
area: ui, area: core
Environment Info
Binaries:
Node: 22.14.0
npm: 10.9.2
Yarn: 1.22.22
pnpm: 10.13.1
Relevant Packages:
payload: 3.49.1
next: 15.4.4
@payloadcms/email-nodemailer: 3.49.1
@payloadcms/graphql: 3.49.1
@payloadcms/next/utilities: 3.49.1
@payloadcms/payload-cloud: 3.49.1
@payloadcms/richtext-lexical: 3.49.1
@payloadcms/translations: 3.49.1
@payloadcms/ui/shared: 3.49.1
react: 19.1.0
react-dom: 19.1.1
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
Available memory (MB): 16384
Available CPU cores: 8
This seems to be related to https://github.com/payloadcms/payload/pull/13228
The PR speeds up the data fetching by only fetching the title (instead of all fields) of the documents in the relationship fields.
So the number of requests made will stay the same, but the individual requests should complete faster.
I think just minimizing requests per relationship field in arrays would go a long way here. With 10 array items, that's 10 round trips per relationship, even though we have all the IDs to load in advance. I think it should be possible to batch this into a single request. The relationship field does this already. That said, I get the sense that it might be a bit tricky since the array field is essentially just a wrapper for renderFields for each row.
I would like to add an additional observation to this issue. The current behaviour, where each relationship field triggers its own REST request, causes a significant number of parallel database connections when using MongoDB on Vercel.
In my case, I have documents with more than 50 relationship fields, which results in 50 parallel REST requests, which quickly leads to hitting the MongoDB connection limit of 500.
From my perspective, this makes the issue quite critical. Batching requests, at least per collection, would already reduce the load substantially. Another possible solution could be a form of lazy loading for relationship titles, so the number of parallel requests is limited.