How to test with the draft preview page

How to use the draft preview page and a simple useFetch pattern for list, article, and draftKey.

Preview with the draft page

To preview an article before publishing, use the /news/draft/[id] route. The preview URL from the microCMS dashboard includes a draftKey; pass it to this page to display the draft content.

Simple fetch pattern

Fetch the list and the detail like this for clarity and draft support:

// Fetch News List
const { data: newsList, pending: newsPending } = await useFetch("/api/list", {
  query: { endpoint: "news", limit: "3", orders: "-publishedAt" },
})

// Fetch News Detail (draftKey from URL query)
const { data: newsDetail, pending: newsDetailPending } = useFetch("/api/article", {
  query: {
    endpoint: "news",
    contentId: route.params.id,
    draftKey: route.query.draftKey,
  },
})

Notes

  • Pass route.params.id as contentId
  • Pass route.query.draftKey as draftKey (from the microCMS preview link)
  • Use await useFetch for the list; for the detail, use useFetch with a computed query so it refetches when the route changes

You can reuse this pattern for both the published article page and the draft preview page.

← Back to News