[JavaScript] contentfulで特定のタグのエントリー一覧を取得する方法

contentful でブログを作る際のお話です。

記事ページに関連記事を表示したいですね。このブログでは記事のタグと同じタグを含むエントリーを引っ張ってきて表示しています。

その方法をご紹介します。このブログは Nuxt.js で作っていますがご自身の環境にあわせて適当なところにファイルを置いてください。

また、contentful についての詳細については省きます。

サンプル

javascript

// /plugins/contentful.js
const contentful = require('contentful')

const client = contentful.createClient({
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
})

export { client }

client はこんな感じで作成しているものとします。client がなんだかわからない場合はチュートリアルをご覧ください。簡単にいえば記事を取得するものです。

space と accessToken の値は環境変数で定義していますがなんとなくお試しでやるなら直書きでも別にいいと思います。

つぎに任意のタグを含むエントリー一覧の取得です。取得には client の getEntries() メソッドを使用します。

javascript

import { client } from '@/plugins/contentful';

const entries = await client.getEntries({
  skip: 0, 
  limit: 10,
  'fields.tags[in]': 'タグA,タグB', // ← ここでタグを指定する！カンマ区切りの String!
  content_type: 【取得したいコンテンツの content type を指定してください】
});

// console.log(entries)

fields.tags[in] に配列を指定することで『配列内のタグを含んだエントリー一覧』が取得できます。超簡単！