Настройка версионирования контента Payload CMS

Версионирование контента в Payload CMS

Payload поддерживает versioning из коробки: история изменений документа, черновики (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,  // в режиме превью игнорировать access control
  })

  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: [/* ... */],
}

Хуки для версий

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 дня.