Access collections in a custom preview

Netlify CMS
, ,
#1

Hi there,

In a custom preview, ‘Companies’, I’d like to show a list of posts, from the Posts collection, that are related to that company.

I can’t find a way to access the posts collection in the Companies preview.

Could anyone point me in the right direction please?

Thank you :heart:

#2

Could the Relation Widget be what you need
https://www.netlifycms.org/docs/widgets/#relation

#3

Hello all, I’m in the same situation. I need the complete data from another collection to display in the preview. (home page has a list of “latest” posts that I want the client to be able to see in the preview)

Now, relation widget does work marvelously when I have a non multiple: true relation widget. Since the data is now available from the fieldsMetadata props in the preview.

But, the issue comes when the relation widget has the multiple: true flag, the fieldsMetadata comes back empty :frowning:.

Anyone has had any luck with this?

#4

Oh well, I searched around the repo, and it seems the issue has just been fixed. Here’s the issue https://github.com/netlify/netlify-cms/issues/4177. Relation widget with multiple turned on now has initial metaData :slight_smile:

Just needed to update my dependency to latest

1 Like
#5

Thanks so much for letting me know about the bug @daniel_s , it was so confusing why fieldsMetaData was empty :slight_smile:

I’d be very interested to see how you’re doing this in your preview.

Thanks again :sunflower:

#6

No problem at all @equivalentideas. Happy that helped. On that note though, it seems that in github the release of netlify-cms-app 2.12.21 has the change in there, but NPM does not have that version yet (2.12.20 is the latest in npm at the time of writing).

I’m trying to find how the team connects github releases to NPM and I can’t find it anywhere.

As for how we do previews:
Since we’re using Gatsby, we try to separate all page components into 2.

One part of the component is platform agnostic, it only receives the data as props and has nothing to do with Gatsby, this component handles rendering the actual html css and js.

The second part is a Gatsby wrapper, which we export by default so Gatsby can render the page. We use this component to fetch data with graphql through Gatsby, clean the data a little (aka clear data so it ends up without the data.frontmatter), and inside, as a child, we use part 1 and send the data as props.

This way, we can import the first part of the page component in a netlify custom preview, fetch the data through the netlify-cms props and unwrap the data from immutable-js (const {data} = props.entry.toJS()) and, again, use the first part as a child and send the data as props.

Let me know if that makes sense. We only got stuck with relation widgets (multiple flag true) because of that little bug.

#7

Sorry for that, we had an issue with the npm release that some packages didn’t go through. It should be sorted out (we published the missing packages 2 days ago).

Please let me know If that fix sorted the issue out for you.

The lerna version command is the one tagging the release:

#8

Thanks @erez yep this sorted it out.

It’s still quite a difficult area of the software I think, and the documentation around the custom previews feels a bit limited, like at an early point you’re on your own to trawl through github issues and look for example implementations (mine is drawn from https://github.com/hankchizljaw/hylia/blob/master/src/admin/previews.js using nunjucks templates).

It would be great to get more guidance in this area, and also to see some examples of what’s possible—I’m sure some people are doing some pretty wild stuff with this :smiley:

#9

Thanks @equivalentideas, our docs do need to be improved.
We have a new initiative for that here:

If you’d like to contribute/submit some feedback.

1 Like