自社のヘッドレスCMSでブログを作る ― GraphQL・アイキャッチ・ページング

このブログは、Tessera自身——つまり自社のヘッドレスCMSで動いています。ドッグフーディングとして、どう作ったかを見せます。

データ取得：GraphQLで1リクエスト

ブログ一覧では、各記事に紐づく著者とカテゴリも一緒に表示したい。RESTだと「記事一覧を取る→著者を取る→カテゴリを取る」と往復が増えますが、GraphQLなら1リクエストでまとめて取得できます。

{
  blogPosts(limit: 6, sort: CREATED_AT_DESC) {
    title
    slug
    excerpt
    author { name }
    category { name slug }
    coverImage { url }
  }
}

記事・著者・カテゴリ・アイキャッチが、これだけで一度に返ってきます。

同一アプリなら、APIキーもHTTPも要らない

このブログの表示側はTessera本体と同じアプリなので、公開GraphQL APIをHTTPで自分に叩き返すのではなく、同じスキーマ導出・リゾルバをプロセス内で直接実行しています。APIキー不要・HTTP往復なし・自分の読み取り枠も消費しない。もちろん外部サイトから使うときは、読み取り専用のAPIキーで同じクエリを投げれば同じ結果が返ります。

アイキャッチ（coverImage）とOGP

記事には coverImage（media型）を持たせ、一覧のサムネイル・記事のヘッダー、そしてOGP画像に使っています。SNSでシェアされたとき、カード画像としてアイキャッチが出ます。カバー画像自体は、サイトのデザインに合わせたものをブラウザで描画して生成し、MCP経由でアップロードしました。

ページング

記事が増えても大丈夫なように、一覧は番号ページング（?page=N）にしています。GraphQL側に総数（blogPostsCount）と limit / offset があるので、サーバー側で素直に実装できます。ページごとに自己参照のcanonicalを付けて、SEOにも配慮しました。

まとめ

• リレーションを含むデータはGraphQLで1リクエスト
• 同一アプリならプロセス内でGraphQLを直接実行（キー・HTTP不要）
• アイキャッチはOGPと兼用、ページングは総数＋limit/offsetで素直に

「AIがCMSの構造を理解する」がTesseraのコンセプトですが、その構造を素直に引き出せるAPI（GraphQL）があると、表示側もシンプルに書けます。