✨

Next.js for DrupalにおけるDrupal Search APIを用いた検索（ファセット検索など）

2023/04/17に公開

Drupal

tech

概要

Next.js for Drupalを試してみました。

https://next-drupal.org/

以下の「Get Started」の通りにすすめることで、Next.jsとDrupalを連携させることができました。

また、以下の記事で、ファセット検索の実装例が紹介されています。

本記事では、特に後者のファセット検索の実現に関する備忘録です。

Search API

以下、Serverとindexを作成します。

公式サイトでは以下が参考になります。

日本語サイトでは以下が参考になります。

Serverの作成

indexの作成

今回、test_index_20230417というインデックスを作成します。

さらに、タイトルをフィールドとして追加しました。

その後、インデクシングを行います。

JSON:API

上記を行ったところで、キャッシュをクリアします。

/admin/config/development/performance

その後、以下のURLからエンドポイントにアクセスできるようになります。

/jsonapi/index/test_index_20230417

以下のようなクエリパラメータによって、検索結果の絞り込みができます。

/jsonapi/index/test_index_20230417?filter[title]=更新したタイトル

{
  "jsonapi": {
    "version": "1.0",
    "meta": {
      "links": {
        "self": {
          "href": "http://jsonapi.org/format/1.0/"
        }
      }
    }
  },
  "data": [
    {
      "type": "node--service",
      "id": "82a34c35-f1b7-49eb-81ac-f15d0deac22c",
      "links": {
        "self": {
          "href": "https://xxx/jsonapi/node/service/82a34c35-f1b7-49eb-81ac-f15d0deac22c?resourceVersion=id%3A5075"
        }
      },
      "attributes": {
        "drupal_internal__nid": 4,
        "drupal_internal__vid": 5075,
        "langcode": "en",
        "revision_timestamp": "2023-04-12T08:19:00+00:00",
        "revision_log": null,
        "status": true,
        "title": "更新したタイトル",
        "created": "2023-04-11T02:09:35+00:00",
        "changed": "2023-04-12T08:19:00+00:00",
        "promote": false,
        "sticky": false,
        "default_langcode": true,
        "revision_translation_affected": true,
	...

以下にアクセスします。

/admin/config/search/facets

「Add facet」を押して、先に作成したインデックスを選択します。

次の画面において、Widgetの「JSON:API Search API」を選択します。

その後、キャッシュをクリアして、先程のエンドポイントにアクセスしてみます。

/jsonapi/index/test_index_20230417

以下のように、facetsという項目が追加されます。これを使って、フロントエンド側からファセット検索を実現することができます。

{
  "jsonapi": {
    "version": "1.0",
    "meta": {
      "links": {
        "self": {
          "href": "http://jsonapi.org/format/1.0/"
        }
      }
    }
  },
  "data": [...],
  "meta": {
    "count": 2,
    "facets": [
      {
        "id": "title_20230417",
        "label": "Title",
        "path": "title_20230417",
        "terms": [
          {
            "url": "https://xxx/jsonapi/index/test_index_20230417?filter%5Btitle_20230417%5D=%E5%B9%B3%E8%B3%80%E8%AD%B2%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96",
            "values": {
              "value": "平賀譲デジタルアーカイブ",
              "label": "平賀譲デジタルアーカイブ",
              "active": false,
              "count": 1
            }
          },
          {
            "url": "https://xxx/jsonapi/index/test_index_20230417?filter%5Btitle_20230417%5D=%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%9F%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB",
            "values": {
              "value": "更新したタイトル",
              "label": "更新したタイトル",
              "active": false,
              "count": 1
            }
          }
        ]
      }
    ]
  },
  "links": {
    "self": {
      "href": "https://xxx/jsonapi/index/test_index_20230417"
    }
  }
}

まとめ

Next.jsとの連携例は、以下のリポジトリでソースコードが公開されています。

自分で設定したインデックスやフィールドに書き換えることで、以下のデモページのような検索ページを作成することができました。

JSON:APIモジュールを用いたファセット検索などで参考になりましたら幸いです。