Hey all,
I am working on integrating live preview. I have it to the point that in the admin/pages panel, I can see the page output, I have autosave + drafts enabled. Whenever I am making changes, it's not pulling the draft version for the preview but the published/live version of the data.
I've reviewed the example repo for live-preview and everything looks to be right. Not sure what I'm missing...
updated config
collections: ['pages'],
url: ({ data }) => {
const isHomePage = data.slug === undefined
console.log(JSON.stringify(data, null, 2))
return `${process.env.NEXT_PUBLIC_SERVER_URL}${!isHomePage ? `/${data.slug}` : '/'}?draft=${data._status === 'draft' ? true : false}`
},
},
refresh route on save file
import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
import { useRouter } from 'next/navigation.js'
import React from 'react'
export const RefreshRouteOnSave: React.FC = () => {
const router = useRouter()
return (
<PayloadLivePreview
refresh={() => router.refresh()}
serverURL={process.env.NEXT_PUBLIC_PAYLOAD_URL || 'https://localhost:3000'}
/>
)
}
and both page.tsx files have the Refresh component.