Is there a working example of the preview button?

default discord avatar
samtietjen
8 months ago
1 2

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.

  • discord user avatar
    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
  • default discord avatar
    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.

  • default discord avatar
    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?

  • default discord avatar
    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
    default discord avatar
    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).

    default discord avatar
    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?

    default discord avatar
    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.

    default discord avatar
    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.

    default discord avatar
    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.

    default discord avatar
    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.

    default discord avatar
    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!

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.