Is there a working example of the preview button?

samtietjen

8 months ago

1 2

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(),
  );

• Selected Answer
  

  jmikrut

  Payload Team

  8 months ago

  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!

  2 replies
• 

  samtietjen

  8 months ago

  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

  6 months ago

  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

  8 months ago

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

  7 replies
  

  samtietjen

  8 months ago

  Hm. When I add "&draft=true" my query fetches the most recent draft instead of the current published version of the page. This is the case for everyone visiting the site (logged in or not).

  

  iamprompt

  8 months ago

  Did you add the read access control to allow only published content for the one who didn't login and always return the content if the person who requested is logged in?

  

  samtietjen

  8 months ago

  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

  8 months ago

  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

  8 months ago

  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

  8 months ago

  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

  8 months ago

  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!