下書きプレビューページでテストする方法

Draft ページでプレビューする

公開前の記事を確認するには、/news/draft/[id] のルートを使います。microCMS の管理画面から「プレビュー」で取得できる URL には draftKey が付いているので、そのままこのページに渡すと下書きの内容が表示されます。

シンプルな fetch の書き方

一覧と詳細を次のように書くと読みやすく、プレビューにも対応できます。

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

// Fetch News Detail（draftKey は URL のクエリから）
const { data: newsDetail, pending: newsDetailPending } = useFetch("/api/article", {
  query: {
    endpoint: "news",
    contentId: route.params.id,
    draftKey: route.query.draftKey,
  },
})

ポイント

• contentId に route.params.id を渡す
• draftKey に route.query.draftKey を渡す（microCMS のプレビューリンクに含まれる）
• 一覧は await useFetch で取得し、詳細は useFetch でクエリを computed にするとルート変更時に再取得される

これで、通常の記事ページと下書きプレビューページの両方で同じパターンを使い回せます。