Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう

2022.01.08に公開

ブログ構築TS
5. Nuxt.js×Contentfulセットアップ
No.2 / 3

今回達成すること

前回セットアップしたモジュールcontentfulを使って、Contentfulのコンテンツを取得し、Vueファイルに表示します。

2022-01-08 18-33-48

プラグイン contentful.tsをインポートする

ContentfulへAPIリクエストを投げるには、前回作成したプラグインファイルcontentful.tsをimportします。

pages/index.vueの<script>タグ下にimportを追加しましょう。

pages/index.vue

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
// 追加
import client from '~/plugins/contentful'
</script>

asyncDataからAPI リクエストを行う

開発環境では、asyncData()を使用すればサーバーサイドでAPIリクエストを行うことができます。

Contentfulの複数のコンテンツを取得する場合は、getEntries()メソッドを使用します。

<script lang="ts">
@Component
export default class IndexPage extends Vue {  
  // 追加
  async asyncData (): Promise<{ entries: object }> {
    let entries: object = {}

    if (process.server) {
      await client.getEntries({
        content_type: 'blogPost',
        limit: 200,
        order: '-fields.publishDate'
      })
        .then((entry: object) => {
          entries = entry
        })
        .catch((error: object) =>
          console.log(error)
        )
    }

    return {
      entries
    }
  }
}
</script>

content_type ... 取得したいモデル名を指定する。

ここの値は、Contentful上のモデル名ではなく、Content type idを指定する。
Content type id ... Contentful管理画面 > 「Content model」 > 「該当のモデルを選択」 > 右サイドバーの「CONTENT TYPE ID」より確認できる。
limit ... 取得するコンテンツ数を指定する。デフォルトは100。

100以上のコンテンツを作成した場合、デフォルト値のままだと全てのコンテンツが取得できない。ここはよくハマるので覚えておく。
order ... API取得時のコンテンツの並び順を文字列で指定する。

-をつければ降順となり、つけなければ昇順となる。
-fields.publishDate ... 公開日の新しい順にコンテンツを取得する。（降順）

コンテンツはブラウザをリロードした時のみに表示される

今回の設計はAPI Keyの漏洩を防ぐため、Keyをクライアントに登録していません。

開発環境のasyncData()メソッドは、クライアントでも実行されるため、Contentfulにリクエストが行われるとAPI Keyが不正なエラーを吐きます。

そのエラーを回避するためにprocess.serverを使用し、サーバーサイドでのみリクエストを行うように分岐処理をしています。

if (process.server) {
  // server only
}

コンテンツは

ホットリロード時やnuxt-linkのページ遷移（クライアントリクエスト）には表示されず、
ブラウザをリロードしたタイミング（サーバーリクエスト）のみ表示されます。

目的のコンテンツはitemsに格納されている

Contentfulから取得したentryオブジェクトには、itemsという配列を返すプロパティが存在します。

その配列内にcontent_typeで指定したモデルのコンテンツリストが格納されています。

contentful レスポンス

entry: {
  items: [/* Content model items */]
}

このitemsをHTMLに表示します。

pages/index.vue

<template>
      <!-- 追加 -->
      <h2>
        Contentful API test
      </h2>
      <template
        v-if="Object.keys(entries).length"
      >
        <b>
          Post
        </b>
        <ul>
          <li
            v-for="(post, i) in entries.items"
            :key="`post-${i}`"
          >
            id: {{ post.sys.id }}
            <ul>
              <li>
                title: {{ post.fields.title }}
              </li>
              <li>
                publishDate: {{ post.fields.publishDate }}
              </li>
              <li>
                updatedAt: {{ post.sys.updatedAt }}
              </li>
            </ul>
          </li>
        </ul>
      </template>
    </v-container>
  </div>
</template>

sysプロパティはContentfulが用意しているもの

sysプロパティには

コンテンツID
コンテンツタイプ
コンテンツ作成時間、更新時間

など、Contentfulが用意している値が格納されています。

fieldsプロパティは自分で用意した値が入っている

fieldsプロパティは、モデルに追加したフィールドの値が格納されています。

1対多の関連付けモデルのプロパティ

tagsなどの1対多の関連付がある場合は配列が返されます。

pages/index.vue

<!-- 追加 -->
<ul
  v-if="post.fields.tags"
>
  <li
    v-for="(tag, tagI) in post.fields.tags"
    :key="`tag-${tagI}`"
  >
    tagId: {{ tag.sys.id }}<br>
    tagTitle: {{ tag.fields.title }}
  </li>
</ul>

画像やファイルなどのメディアの格納場所

メディア（画像やファイル）は、Contentfulが用意しているプロパティで取得します。

該当のデータは、<フィールド名>.fieldsに格納されています。

例えば、アイキャッチ画像はimageフィールドで登録しているので、取得するには以下のようになります。

image.fields.title ... メディアタイトル。
image.fields.file ... メディアデータ。imageファイルのURLはfields.file.urlに保存されている。
image.fields.file.details ... メディアの詳細データ。imageファイルのサイズなどが格納されている。

pages/index.vue

<!-- 追加 -->
<li>
  <img
    :src="`https://${post.fields.image.fields.file.url}`"
    :alt="post.fields.image.fields.title"
    :width="post.fields.image.fields.file.details.image.width / 10"
    :height="post.fields.image.fields.file.details.image.height / 10"
  >
</li>