graphQLクエリに基づいてGatsbyコンテンツをMeilisearchにインデックス付けするプラグイン
Meilisearch とその仕組みを理解するには、Meilisearch のドキュメントを参照してください。
Gatsby とその仕組みを理解するには、Gatsby のドキュメントを参照してください。
Meilisearch Cloud を使用すれば、サーバーの導入や手動アップデートに別れを告げることができます。 14 日間の無料トライアルを始めましょう!クレジットカードは必要ありません。
Gatsby アプリ内にパッケージを追加します。
npm
の場合:
npm install gatsby-plugin-meilisearch
yarn
付き:
yarn add gatsby-plugin-meilisearch
Meilisearch インスタンスをダウンロードして実行するには、さまざまな簡単な方法があります。
たとえば、Docker を使用する場合:
docker pull getmeili/meilisearch:latest # Fetch the latest version of Meilisearch image from Docker Hub
docker run -it --rm -p 7700:7700 getmeili/meilisearch:latest meilisearch --master-key=masterKey
このコマンドを使用すると、Meilisearch インスタンスのhost
http://localhost:7700
になり、マスター キーはmasterKey
になります。
実行中の Gatsby がない場合は、[このプロジェクトに存在するプレイグラウンド)(./playground/README.md) を起動するか、Gatsby プロジェクトを作成できます。
アプリがまだ実行されていない場合は、実行します。
gatsby develop
Gatsby アプリが実行されるようになったので、次の URL にアクセスできるようになります。
http://localhost:8000/
Web アプリの URL。http://localhost:8000/___graphql
: プレイグラウンド上でgraphQLクエリを構築してリクエストできるGraphiQLツールへのURL。 これで、 gatsby-plugin-meilisearch
がインストールされた Gatsby アプリが実行され、Meilisearch インスタンスが実行されているはずです。
プラグインが機能するように設定してみましょう。この例では、Gatsby Web サイトのすべてのページの URL を取得し、Meilisearch にインデックスを付けます。
プラグインを機能させるには、Gatsby プロジェクトのルートにあるgatsby-config.js
構成ファイルを開きます。すべての構成はそのファイル内で行われます。
まず、Meilisearch 認証情報を追加する必要があります。
資格情報は次のもので構成されます。
host
: 実行中の Meilisearch インスタンスへの URL。api_key
: master
キー、または MeiliSearch にドキュメントを追加する権限を持つ別のkey
。権限と API キーの詳細については、こちらをご覧ください。search
以外の権限を持つキーはフロントエンドでは決して使用しないでください。検索には、 key
ルートで利用可能なDefault Search Key
キーを使用するか、検索権限のみを持つカスタム API キーを作成します。
次の方法で資格情報をgatsby-config.js
ファイルに追加します。
{
plugins : [
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
} ,
} ,
]
}
資格情報がわからない場合は、このセクションを参照してください。
次のステップは、Meilisearch にどのデータをどのように追加するかを定義することです。これはindexes
フィールドで発生します。
indexes
フィールドは、複数のインデックス オブジェクトで構成される配列です。各インデックス オブジェクトには次の情報が含まれます。
indexUid
: データが追加されるインデックスの名前。
pages_url
にインデックス uid を定義しましょう。ビルド時に、Meilisearch 内にpages_url
インデックスが作成されます。
indexUid: ' pages_url '
pages_url
がすでに存在する場合、それは削除され、ビルド時に再作成されます
query
: Meilisearch に追加するデータを取得する GraphQL クエリ
アプリケーションのページの URL を取得するgraphQL クエリを提供しましょう。
query : `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` ,
このクエリを実行すると、次の内容を含むdata
オブジェクトを受け取ります。
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
}
transformer
: 取得したデータを Meilisearch と互換性のある形式に変換します。
query
フィールドを含むデータを取得しましたが、まだ Meilisearch に送信する準備ができていません。
transformer
関数を使用すると、取得したデータを互換性のある形式に変換できます。
取得したデータの最初の問題は、Meilisearch に送信するドキュメントが配列のルートにある必要があるのに、入れ子になっているということです。したがって、 nodes
のコンテンツはルートにある必要があります。
{
data : {
allSitePages : {
nodes : [
{
'path' : '/404/'
} ,
]
}
}
}
になるはずです:
[
{
'path' : '/404/'
} ,
{
'path' : '/'
} ,
]
2 番目の問題は、Meilisearch の各ドキュメントに主キーと呼ばれる一意の識別子が必要であることです。
したがって、すべてのドキュメントにはid
と呼ばれる一意のフィールドが必要です。例えば:
{
'id' : 1
'path' : '/404/'
} ,
そのためには、transformer メソッドを使用して、互換性のある最終的なオブジェクトの配列を作成する必要があります。
{
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
}
この関数では、Meilisearch によってインデックスを作成できるオブジェクトの配列を返すために、 data.allSitePage.nodes
にマップします。 Meilisearch がインデックス作成に必要とするid
フィールドを追加します。ここにはid
として使用できるフィールドがないため、配列内の現在の要素のインデックスを使用します。
これらのオプション ( indexUid
、 query
、 transformer
) について詳しく知りたい場合は、インデックス オプションを参照してください。
これらのフィールドに入力すると、Meilisearch の設定は次のようになります。
plugins: [
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
indexes : [
{
indexUid : 'pages_url' ,
transformer : ( data ) =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
query : `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` ,
} ,
] ,
} ,
} ,
] ;
gatsby-plugin-meilisearch
、データを取得して、Gatsby ビルドの Meilisearch に追加します。
gatsby build
ビルド後、コンテンツのインデックスが正常に作成されたことを確認するメッセージがターミナルに表示されます。
success gatsby-plugin-meilisearch - x.xxxs - Documents added to Meilisearch
アプリに検索エクスペリエンスを統合するためのツールが必要な場合は、次のような役立つツールがあります。
gatsby-config.js ファイルでは、Meilisearch プラグインは次のオプションを受け入れます。
host
(必須) host
フィールドは、Meilisearch インスタンスが実行されているアドレスです。 gatsby-plugin-meilisearch
Meilisearch インスタンスと通信し、データを送信するためにこれを必要とします。
apiKey
(オプション) Meilisearch インスタンスがパスワードで保護されている場合、 apiKey
フィールドには API キーが含まれます。
skipIndexing
(オプション)このオプションを使用すると、Meilisearch にインデックスを作成せずに Web サイトを構築できます。デフォルトは false
batchSize
(オプション)各バッチに含める必要があるドキュメントの数。デフォルトは 1000
settings
(オプション)Meilisearch インスタンスに設定を渡したい場合は、ここで行うことができます。 Meilisearch の設定について詳しく読む
indexes
(必須) indexes
フィールドはオブジェクトの配列であり、それぞれが特定のインデックスにデータを追加する方法を表します。
indexes
には 1 つまたは複数のindex
オブジェクトを含めることができます。これは、異なるインデックス内の異なるコンテンツ (または同じインデックスに対する複数の異なるデータ) のインデックスを作成する場合に便利です。
各index
オブジェクトには次のフィールドが含まれている必要があります。
indexUid
(必須)
これは Meilisearch インデックスの名前です。取得したデータが Meilisearch 内に追加されるため、これは必須フィールドです。たとえば、 indexUid
がpages_url
の場合、コンテンツは Meilisearch のpages_url
インデックス内にインデックス付けされます。すでに存在するインデックス名を指定した場合、インデックスは削除されて再作成されます。
例:
indexUid: ' pages_url '
インデックスについて詳しくは、ドキュメントをご覧ください。
query
(必須)
これは、データを取得するために実行されるgraphQLクエリです。使用しているプラグインによっては、クエリが非常に具体的になる場合があります。クエリが不明な場合は、開発モードで Gatsby が提供する GraphiQL ツール (http://localhost:8000/___graphql) を使用すると、クエリの構築に役立ちます。
例:
query: `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` ,
また、プレイグラウンドの設定ファイルをチェックしてgatsby-plugin-mdx
プラグインを使用したgraphQL クエリの例を確認することもできます。
transformer
(必須)
取得したデータを変換してMeilisearchに送信する機能です。
graphQL クエリを実行すると、指定したクエリに応じて、プロジェクトごとに異なる構造を持つデータ オブジェクトが受信されます。 Meilisearch では各ドキュメントのルートに一意の識別子が必要であり、ネストされたオブジェクトを避ける必要があるため、それに応じてデータ オブジェクトを変換する必要があります。これを行うには、 transformer
関数が適切です。
例:
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
transformer
関数を使用しない場合、データは次のようになります。
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
}
上記の例のようにtransformer
関数を使用すると、データは次のようになり、インデックス付けの準備が整います。
[
{
id : 0 ,
path : '/404/' ,
} ,
{
id : 1 ,
path : '/404.html' ,
} ,
{
id : 2 ,
path : '/' ,
} ,
] ;
Meilisearch のドキュメント構造について詳しく知りたい場合は、ドキュメントを参照してください。
完全な使用例:
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
skipIndexing : false ,
batchSize : 1000 ,
options : {
settings : {
searchableAttributes : [ "*" ] ,
} ,
} ,
indexes : [
{
indexUid : 'my_index' ,
transformer : ( ) => { } ,
query : ``
} ,
] ,
}
サポートされている Gatsby バージョン:
(このプラグインは古い Gatsby バージョンでも動作する可能性がありますが、現時点ではテストも公式サポートも行われていません。)
サポートされているMeilisearchのバージョン:
このパッケージは Meilisearch のバージョン v1.x との互換性を保証しますが、一部の機能が存在しない可能性があります。詳細については、問題を確認してください。
ノード/NPM バージョン:
新しいプロジェクトを開始するときは、常に最新バージョンの Gatsby を使用することをお勧めします。
このプロジェクトでは、どんな新しい貢献も大歓迎です!
開発ワークフローについて詳しく知りたい場合、または貢献したい場合は、詳細な手順について貢献ガイドラインを参照してください。