Contentfulを使い倒したくてContentful芸を磨く【検索・絞り込み編】

2019.08.10

Headless CMSとしても有名なContentfulですが、ブログ記事を見ているとそこまで使い倒している記事を見たことはない気がしたので、一歩踏み込んだ使い方を書いてみようかと思います。（実際にやってみながら少しずつ追記します）

タグ付けとタグでの絞り込み

まずタグの作り方ですが、 Contentでブログ以外にTagなどを作成します。
Authorと同じですね。
そして、Blog記事のContent modelを編集し、
Referencesを追加します。
この時、1個のみでも複数でも構いません。

Contentでタグをいくつか作成し、記事に紐づけてみましょう。（Authorを選択するのと同じ要領です）
それだけで記事にはタグ付けができた状態になります。

あとは、ブログ記事を表示する際に、指定のタグで絞り込めば完了です。
下記の例にもありますが、 fields に作成したcontentが入ってきますので、
そこを対象のIDで指定してやれば一致する内容を取得してくれます。

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      'fields.tags.sys.id': '絞り込みたいタグID',
    })
  },

参照
Links to a specific item
If you want to retrieve all items linked to a specific entry, the query URL should filter entries on their specific content_type, linking_field (field to link items) and entry_id from the target entry.
Contentful Document links/links-to-a-specific-item

除外

例えば記事に紐づく関連記事として、同じタグの他の記事を引っ張りたいなどのニーズがあるとします。
その時に、対象となる記事を関連記事のリストから除外したいというケースがあるかと思うのですが、
その際には[ne]を利用します。

下記の例だと、対象のslug以外のブログ記事を新着順に引っ張るということをしております。

  async fetch() {
    const limit = 5
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      order: '-sys.createdAt',
      'fields.slug[ne]': 'slug',
    })
  },

参照
Inequality operator
Uses the [ne] parameter to exclude items matching a certain pattern.
Contentful Document search-parameters/inequality-operator

全文検索

全文検索機能まで用意してくれています！
getEntriesにqueryを追加してあげるだけで、Contentの内容を全文検索してくれるようです。
至れり尽くせりって感じですね！

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      query: '全文検索したいテキスト',
    })
  },

参照
Full-text search
It’s possible to perform a full-text search across all text and symbol fields with the query parameter.
Note: Full-text search is case insensitive and might return more results than expected. A query will only take values with more than 1 character.
Contentful Document search-parameters/full-text-search

ちなみに、fieldsを指定しての検索も可能なようです。
例えば、記事のタイトルに対して検索したい場合はこんな感じでしょうか？

  async fetch() {
    const limit = 10
    const skip = 0
    const client = contentful.createClient(config)
    const posts = await client.getEntries({
      content_type: process.env.CTF_BLOG_POST_TYPE_ID,
      limit,
      skip,
      order: '-sys.createdAt',
      'fields.title[match]': 'Nuxt', // Content Type BLOG_POSTの記事タイトルにNuxtを含むものを検索したい
    })
  },

参照
Full-text search on a field
You can perform a full-text search on a specific field with the [match] operator.
Note: Full-text search is case insensitive and might return more results than expected. A query will only take values with more than 1 character.
Contentful Document search-parameters/full-text-search-on-a-field