reference an entire collection (relationship to all docs)

unonweb

3 months ago

1 1

• Selected Answer
  

  jmikrut

  Payload Team

  3 months ago

  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:

  1. in 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.
  2. Just have the frontend React component go and fetch the docs that it should. This is not ideal because the frontend will have to make another fetch, and you'll need to have some type of "loading" state or similar, but it could work just fine.

  In either case, your block itself would only store blockType: 'archive' and then collection: 'posts' or whatever. It would not store any data.

  1 reply
• 

  unonweb

  3 months ago

  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?