I don't understand how I can reference an entire collection from within a block.
I would like to build a block that enables the user to reference a collection that will be included in the block.
For example: The user wants to build a "Shop" page. She includes some layout blocks. Now she wants to include all docs from the "Products" collection into the block, so that they're going to show up on the "Shop" page at the place she selected within the overall layout.
What I've tried:
This question follows #1516 in my process to understand the architecture of payload (how it is meant to be used). Thank you.
Hey @unonweb —
I would go with your second option but I think you're thinking about this a bit incorrectly.
I can query for the collection data but I don't know where to save it.
The collection data is saved in the separate collection. I think you're trying to duplicate it or similar, which would not be a good idea.
Here's a use case that we come up against a lot.
Say you're building a Next site on a layout-builder mentality, and you have a few blocks. One is Archive
or similar that allows a user to choose a collection to render an archive for, and then the frontend component should output the most recent 10 posts in the collection that was selected.
The way we'd do this would be either one of two ways:
getStaticProps
or wherever, check to see if you have any Archive
blocks and then automatically make fetches to the /api/whatever-collection
endpoint, and then send back the results from getStaticProps
.In either case, your block itself would only store blockType: 'archive'
and then collection: 'posts'
or whatever. It would not store any data.
In my case I want the fronted to be complety independent of my PayloadCMS. That's why everything's exported as json data after change.
I would like to give my users the possibility to include a collection when building a page.
Ideally they would be able to select like "On this page I want to include all products that are cheaper than 50€" or "On that page I want to include all blog posts that are tagged with 'traveling'".
So in the frontend I would have the corresponding data as json for the corresponding page.
I can use a select
field and further fields that enable the user to specify the desired data.
I can query this data in a afterRead
hook and export it as json.
But I don't know how to give the user feedback in the admin UI showing which docs are included.
The only field related to this is relationship
and it would work great if I could reference an entire collection with it.
It would also work if I could do something like:
const relationField = [
{
type: 'select',
name: 'selectedCollection',
options: ['shop-products', 'shop-categories'],
},
{
type: 'relationship',
relationTo: (args) => args.siblingData.selectedCollection, // doesn't work
hooks: {
afterRead: async (args) => {
// populate relationship with entire collection
const collection = args?.siblingData?.selectedCollection // works
const result = await payload.find({
collection: collection,
})
return result
}
}
}
]
Well, then I'd still have the issue that the admin UI requires that the relationship field contains just an array of IDs.
Don't know how to solve this.
Custom UI field?
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.