Zenn
Open5

Contentfulの活用

Contentful
CMS
nabetsunabetsu

JavaScript SDK

基本的なユースケース

指定したContentModelのデータを取得

getEntriesでContentModelを指定してデータの取得ができる。
パラメータで渡しているincludeは他のモデルへのReferenceをどこまで取得するか

const checks = await client.getEntries({
    content_type: 'check',
    include: 2,
  })

特定のContentを取得

getEntryで特定のコンテンツを取得できる。
パラメータとして取得対象のコンテンツのIDを渡す必要がある。

const place = await client.getEntry(id)

ソート

パラメータでorderを指定することでレスポンスで返される項目の順序を指定できる。

const checks = await client.getEntries({
    content_type: 'check',
    include: 2,
    order: 'fields.date',
  })

降順にしたければ項目名の先頭に-をつける。

const checks = await client.getEntries({
    content_type: 'check',
    include: 2,
    order: '-fields.date',
  })

なお、特にorderの指定をしなかった場合、以下2つの条件が上から順に適用される。

  • 最近Publishされたもの(sys.updatedAtが新しいもの)
  • IDが古いもの(sys.idが古いもの)

その他詳細についてはAPI Reference - Orderを参照。

ReferenceでQuery

他のモデルへのReferenceを対象に検索を行うこともできる。

条件一致

以下の例ではavailableからReferenceされているcheckというContentModelの項目を対象に条件に合致するレコードのみを取得している。

const available = await client.getEntries({
    content_type: 'available',
    'fields.check.sys.contentType.sys.id': 'check',
    'fields.check.fields.date': '2021-02-02',
  })

in

[in]を使う。
指定する値は配列ではなく、スペースなしのカンマ区切りにする必要がある。
(スペースを入れなかったら最初の値と一致するものだけが取得された)

const available = await client.getEntries({
    content_type: 'available',
    'fields.check.sys.contentType.sys.id': 'check',
    'fields.check.sys.id[in]': '1XfQFeMgKfpQuthgmiBlRi,6cdPS9Q6gNDLrrIS8DpG0y',
  })

配列から文字列への置換に関しては以下の記事を参考にjoinで実行した。

【javascript】配列と文字列の変換

複数条件の指定

Referenceについても複数条件の指定が可能。

const available = await client.getEntries({
    content_type: 'available',
    include: 2,
    'fields.check.sys.contentType.sys.id': 'check',
    'fields.check.sys.id[in]': checkIDsStr,
    'fields.beer.sys.contentType.sys.id': 'beer',
    'fields.beer.sys.id': id,
  })

Search on references

nabetsunabetsu

Contentful API

API basicsに記載の通り以下の4種類がある

  • Content Delivery API
    • コンテンツの取得を行うためのAPI(read only) 。名前の通り配信を目的にしているので、フロントエンドでコンテンツを取得する場合にはこちらを使う。
  • Content Management API
    • コンテンツの取得や作成、その他の設定を行うためのAPI
  • Content Preview API
    • プレビュー用のAPI
  • Images API
    • Contentfulにアップロードしたイメージの取得用API。画像のサイズ変更やWebP等への変換に対応している
  • GraphQL Content API
    • GraphQL版

SDK

Platformsに記載の通り以下8種類のSDKが提供されている。

  • JavaScript
  • PHP
  • Android
  • iOS
  • Java
  • Python
  • Ruby
  • .NET
nabetsunabetsu

Next.jsでの活用

Contentfulの取得結果でDynamic RoutingのPathを設定

getStaticPathsでContentfulからの取得結果からidを利用する。
(名前とかが変更してもIDは変わらないので、idを使うでいいと思っている)

[id].tsx
export async function getStaticPaths() {
  const { client } = useContentful()

  const data = await client.getEntries({
    content_type: 'lists',
    include: 2,
  })
  const paths = await data.items.map((list) => {
    return {
      params: {
        id: list.sys.id,
      },
    }
  })

  return {
    paths,
    fallback: false,
  }
}

Contentfulからの取得結果をComponentに渡す

paramsからgetStaticPathsで設定したidを取得して対象のコンテンツ情報を取得するケース。

[id].tsx
export async function getStaticProps({ params }) {
  const { client } = useContentful()
  const id = params.id
  const response = await client.getEntry(id)

  return {
    props: {
      list: response,
    },
  }
}

getStaticPropsで渡したパラメータが取得できるので、後はpropsで受け取ってComponent内で利用すればOK

[id].tsx
export default function SampleComponent({ list }) {
  const { name, description, tags, image } = list.fields