Is there a working example of the preview button?

[samtietjen]

I'm having some difficulty understanding how the preview button works.

I usually reference the current Payload website for how things are done, but the preview functionality is currently broken on it. None of the examples seem to use preview either.

At one time it seems that preview did work on the Payload website:
https://github.com/payloadcms/website/search?q=preview&type=commits

These commits got me most of the way there. I'm successfully passing the JWT token to the static props, it redirects me to the slug's page, but I continue to see the published content.

I'm not using GraphQL, just plain ol' REST.

const pageQuery = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/pages?where[slug][equals]=${slug}`, {
    headers: {
      ...preview ? {
        Authorization: `JWT ${payloadToken}` // when previewing, send the payload token to bypass draft access control
      } : {}
    }
  }).then(
    (res) => res.json(),
  );

Any ideas? Been working on this for days.

[jmikrut]

Ahhh yeah the payload site is on next 13’s app folder, which doesn’t support preview yet… Or at least it didn’t when we built the site. I haven’t checked into it lately. Regardless I think you are pointing to a good example that we need to make and we can do it with good old Next’s pages folder.

I think we could probably get started on this first thing next week because I think it’s super necessary. Give us a bit here and I’ll get back to you!

[samtietjen]

Appreciate it! It isn't a huge deal for me, but it is for the designers I work with. It can be tough to visualize exactly what blocks do if you haven't made them yourself. I'll keep an eye out.

[HQ92]

I'd be really interested in an example of this as well. I'm also using the app folder in Next 13, but now with the release of api routes in the app folder I think now might be the time to provide a simple answer to this?

[iamprompt]

I think you might need draft=true parameters in the url to show the draft content alongside with JWT token

[samtietjen]

Okay so I got it to work under the following conditions: you save the current state as a draft, you press preview, it shows the draft. The issue here is that anyone logged in is just going to see the most recent draft of each page. I'm sure there's some sort of logic to match a user with their draft, but then that user would still be browsing a site of their drafts when they might not want to be. Shouldn't preview be returning a preview of the current state of the inputs and not saved drafts?

Apologies, still very new to Payload and figuring things out.

[iamprompt]

Did you use Nextjs for the website? If so, you can actually specified path of the preview to let the user click on the button and add jwt token to the preview data to use to fetch the data and also you can add the header bar for user to exit from the preview mode, otherwise just show the published one.

[samtietjen]

Yep! Using a preview API route, capturing JWT and the preview variable in getStaticProps. The one thing that I didn't setup is the payload admin bar, which if I'm understanding correctly, lets you decide if you're viewing a draft or not. To be clear though, the preview button will always show the most recent draft, correct? It isn't sending the current state of the inputs as props in some sort of way.

[iamprompt]

I haven't set the payload admin bar either. But what I set up is the bar with the Link of the api to clear the preview data and redirect back to the same page, that's it. And yes, the preview button in payload is the link to preview page, so that we need to press save before we go to the preview page to see the latest change.

I think, it would be better UX to trigger save automatically when press 'preview' button.

[samtietjen]

Ahhhh I'm learning! I'm guessing you might accumulate a lot of drafts. Probably isn't an issue, but are there any methods to clean this up? There doesn't seem to be any ability to delete them in the UI. Unless I'm missing it.

Thanks so much for all of your help!