こんにちは、柴田です。
Gatsbyにおけるプレビュー画面の作成方法を紹介します。
プレビュー画面を表示する方法はいくつかありますが、今回は/draftというプレビュー用のURLを用意する方法をご紹介します。

そもそものmicroCMSとGatsbyでアプリケーションを作成する方法についてはこちらの記事を参考にしてください。

GatsbyJS + microCMSでJamstackなオウンドメディアを作ろう
https://blog.microcms.io/gatsby-microcms-media/

前提

プレビュー画面とは下書き状態のコンテンツを閲覧する画面です。
microCMSではコンテンツが「下書き中」ステータスの場合、draftKeyが発行されます。

コンテンツ取得のAPIリクエスト時にクエリパラメータとしてdraftKeyを与えることで下書き中のコンテンツを取得することができます。
また、microCMSにはプレビュー機能があります。
API設定 > 画面プレビューで、「画面プレビュー」ボタンをクリックした際の遷移先URLを指定することができます。

遷移先URLには記事のcontentIdとdraftKeyを動的に埋め込むことが可能です。
この仕組みを利用し、フロントエンド側でURLからcontentIdとdraftKeyを受け取り、microCMSに対してAPIリクエストを行うことで下書き中のコンテンツを取得し、プレビュー画面を表示します。

環境

gatsby: v3.1.0
typescript: v4.2.3

※ 本記事ではgatsby v2.26から追加されたFile System Route APIを使用しています。

実装方法

今回はすでに/pages/newsにお知らせ一覧画面があり、/pages/news/{contentId}がお知らせ詳細画面であるという想定で進めます。
まずはプレビュー用に（/pages/news/draft/index.tsx）を用意します。
（TypeScript環境でない場合はjsxで記述し、適宜内容もご調整ください）

GatsbyではmicroCMSから事前にデータを取得し、GraphQLでデータを整形してページを生成します。
しかし、プレビュー画面も同様にビルドしてページが生成するのを待っていては体験がよくありません。（下書き保存をしてから数分待たないとプレビューできないなんて使い物になりません）
そこでプレビューページにおいては、URLからアクセスされたタイミングでクライアントサイドからAPIリクエストを行います。

// pages/draft.tsx

import React, { useEffect, useState } from "react"
import { PageProps } from "gatsby"
import queryString from "query-string"

import Layout from "../../../components/layout"
import SEO from "../../../components/seo"
import NewsPost from "../../../components/newsPost"

const NewsPage: React.FC<PageProps<GatsbyTypes.NewsQuery>> = ({ location }) => {
  const { contentId, draftKey } = queryString.parse(location.search);
  const [data, setData] = useState<GatsbyTypes.NewsQuery | null>(null);

  useEffect(() => {
    fetch(`https://your-service-id.microcms.io/api/v1/news/${contentId}?draftKey=${draftKey}`, {
      headers: {
        'X-MICROCMS-API-KEY' : "your-api-key",
      },
    })
      .then(res => res.json())
      .then(res => setData({ microcmsNews: res }));  // ※1
  }, []);  // ※2

  if (data === null) {
    return null;
  }

  return (
    <Layout>
      <SEO
        title={data.microcmsNews?.title}
        description={data.microcmsNews?.description}
        ogimage={data.microcmsNews?.ogimage?.url}
      />
      <NewsPost data={data} />  // ※3
    </Layout>
  )
}

export default NewsPage

処理の流れとしては以下のようになります。

１. URLから/news/draft?contentId=XXXXXXXX&draftKey=YYYYYYYYのようにアクセスする
２. location.searchからcontentIdとdraftKeyを受け取る
３. microCMSに対してcontentIdとdraftKeyを用いてAPIリクエストを行う
４. 取得したデータを描画する

※1: すでにお知らせ詳細画面にて生成されている型定義をそのまま利用するために、microCMSからレスポンスを受け取ってsetDataするタイミングでオブジェクトの形を合わせています。
※2: useEffectの第二引数には空配列を指定します。そうすることで初回アクセス時のみ処理が動作します。
※3: 表示部分は別コンポーネントに切り出しており、ここでは省略します。実際のニュース詳細画面と共通化しておくと今後の開発がスムーズになるのでオススメです。

microCMSの設定

Gatsby側の準備はできたので、次にmicroCMS側の設定を行います。
API設定 > 画面プレビュー で以下のようにURLを設定しましょう。

https://your-service-domain/news/draft?contentId={CONTENT_ID}&draftKey={DRAFT_KEY}

これでmicroCMS側の設定も完了です。
コンテンツ編集画面で「画面プレビュー」ボタンをクリックすればプレビューを表示できるようになります。

おわりに

Gatsby × microCMSの構成におけるプレビューの実装方法について解説しました。
ヘッドレスCMSの場合でも自前で実装すれば、一般的なCMSのようにプレビュー環境を構築することが可能です。
プレビューができるだけで、編集者の運用フローがだいぶ良くなるので是非実装してみてください。

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、メールからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！