Налаштування версіонування контенту Payload CMS

Версіонування контенту в Payload CMS

Payload підтримує версіонування з коробки: історія змін документа, чорновики (drafts), автозбереження. Версії зберігаються в окремій таблиці _назва_колекції_versions. Інтерфейс порівняння версій вбудований в admin panel.

Включення версіонування

// collections/Posts.ts
const Posts: CollectionConfig = {
  slug: 'posts',
  versions: {
    maxPerDoc: 50,        // максимум версій на документ
    retainDeleted: true,  // зберігати версії видалених документів
    drafts: {
      autosave: {
        interval: 3000,   // автозбереження чорновика кожні 3 секунди
      },
    },
  },
  // ...
}

З включеними чорновиками документ має статус _status: draft або published. Чорновики не видні публічному API без явного запиту.

Публікація чорновиків

// Створити чорновик
const draft = await payload.create({
  collection: 'posts',
  draft: true,
  data: { title: 'Нова стаття', content: '...', _status: 'draft' },
})

// Опублікувати
const published = await payload.update({
  collection: 'posts',
  id: draft.id,
  data: { _status: 'published' },
  // draft: false — зберегти як опубліковану версію
})

// Отримати тільки опубліковані (для публічного фронтенду)
const posts = await payload.find({
  collection: 'posts',
  where: { _status: { equals: 'published' } },
})

// Отримати чорновик з превью (для next-previewing)
const draftPost = await payload.findByID({
  collection: 'posts',
  id: postId,
  draft: true,
})

Live Preview в Next.js

Payload 2.x має вбудовану інтеграцію з Next.js Live Preview:

// payload.config.ts
export default buildConfig({
  admin: {
    livePreview: {
      breakpoints: [
        { label: 'Mobile', name: 'mobile', width: 375, height: 667 },
        { label: 'Desktop', name: 'desktop', width: 1280, height: 900 },
      ],
    },
  },
  collections: [
    {
      slug: 'posts',
      admin: {
        livePreview: {
          url: ({ data, locale }) =>
            `${process.env.NEXT_PUBLIC_FRONTEND_URL}/posts/${data.slug}${locale ? `?locale=${locale.code}` : ''}`,
        },
      },
    },
  ],
})

// app/(frontend)/posts/[slug]/page.tsx
import { draftMode } from 'next/headers'
import { getPayload } from 'payload'

export default async function PostPage({ params }: { params: { slug: string } }) {
  const { isEnabled: isDraft } = draftMode()

  const payload = await getPayload({ config })

  const result = await payload.find({
    collection: 'posts',
    where: { slug: { equals: params.slug } },
    draft: isDraft,
    overrideAccess: isDraft,  // в режимі превью ігнорувати контроль доступу
  })

  return <PostComponent post={result.docs[0]} />
}

Робота з історією версій

// Отримати всі версії документа
const versions = await payload.findVersions({
  collection: 'posts',
  where: { parent: { equals: postId } },
  sort: '-updatedAt',
  limit: 20,
})

// Отримати конкретну версію
const version = await payload.findVersionByID({
  collection: 'posts',
  id: versionId,
})

// Відновити версію
await payload.restoreVersion({
  collection: 'posts',
  id: versionId,
})

Версіонування Globals

const HomePage: GlobalConfig = {
  slug: 'home-page',
  versions: {
    max: 20,
    drafts: {
      autosave: true,
    },
  },
  fields: [/* ... */],
}

Hooks для версій

const Posts: CollectionConfig = {
  hooks: {
    afterChange: [
      async ({ doc, previousDoc, operation }) => {
        // Сповіщення при публікації
        if (
          operation === 'update' &&
          doc._status === 'published' &&
          previousDoc?._status === 'draft'
        ) {
          await notifySubscribers(doc)
        }
      },
    ],
  },
}

Часові рамки

Налаштування версіонування з чорновиками, автозбереженням і live preview — 1–2 дні.