gatsby plugin meilisearch
v0.3.1 ?
Ein Plugin zum Indizieren Ihrer Gatsby-Inhalte für Meilisearch basierend auf graphQL-Abfragen
Informationen zu Meilisearch und seiner Funktionsweise finden Sie in der Dokumentation von Meilisearch.
Um Gatsby und seine Funktionsweise zu verstehen, lesen Sie die Gatsby-Dokumentation.
Verabschieden Sie sich von Serverbereitstellung und manuellen Updates mit Meilisearch Cloud. Beginnen Sie mit einer 14-tägigen kostenlosen Testversion! Keine Kreditkarte erforderlich.
Fügen Sie in Ihrer Gatsby-App das Paket hinzu:
Mit npm :
npm install gatsby-plugin-meilisearch Mit yarn :
yarn add gatsby-plugin-meilisearchEs gibt viele einfache Möglichkeiten, eine Meilisearch-Instanz herunterzuladen und auszuführen.
Wenn Sie beispielsweise Docker verwenden:
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 Mit diesem Befehl ist Ihr Meilisearch- host http://localhost:7700 und Ihr Hauptschlüssel ist masterKey
Wenn Sie kein laufendes Gatsby haben, können Sie entweder den [in diesem Projekt vorhandenen Playground)(./playground/README.md) starten oder ein Gatsby-Projekt erstellen.
Führen Sie Ihre App aus, wenn sie noch nicht ausgeführt wird:
gatsby developDa Ihre Gatsby-App nun ausgeführt wird, haben Sie Zugriff auf die folgenden URLs:
http://localhost:8000/ URL Ihrer Web-App.http://localhost:8000/___graphql : URL zum GraphiQL-Tool, mit dem Sie GraphQL-Abfragen auf dem Playground erstellen und anfordern können. Jetzt sollten Sie eine laufende Gatsby-App mit installiertem gatsby-plugin-meilisearch und eine laufende Meilisearch-Instanz haben.
Lassen Sie uns unser Plugin konfigurieren, damit es funktioniert! In diesem Beispiel rufen wir die URL jeder Seite unserer Gatsby-Website ab und indizieren sie für Meilisearch.
Damit das Plugin funktioniert, öffnen Sie die Konfigurationsdatei gatsby-config.js die sich im Stammverzeichnis Ihres Gatsby-Projekts befindet. Die gesamte Konfiguration findet in dieser Datei statt.
Zuerst müssen Sie Ihre Meilisearch-Anmeldeinformationen hinzufügen.
Die Zeugnisse setzen sich zusammen aus:
host : Die URL zu Ihrer laufenden Meilisearch-Instanz.api_key : Der master oder ein anderer key mit der Berechtigung zum Hinzufügen von Dokumenten in MeiliSearch. Weitere Informationen zu Berechtigungen und API-Schlüsseln finden Sie hier.search sollten niemals in Ihrem Frontend verwendet werden. Verwenden Sie für die Suche den auf der key verfügbaren Default Search Key oder erstellen Sie einen benutzerdefinierten API-Schlüssel mit nur Suchrechten.
Fügen Sie die Anmeldeinformationen wie folgt in Ihre Datei gatsby-config.js ein:
{
plugins : [
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
} ,
} ,
]
}Lesen Sie diesen Abschnitt, wenn Sie Ihre Anmeldeinformationen nicht kennen.
Der nächste Schritt besteht darin, zu definieren, welche Daten wir in Meilisearch hinzufügen möchten und wie. Dies geschieht im Feld indexes .
Das indexes ist ein Array, das aus mehreren Indexobjekten bestehen kann. Jedes Indexobjekt enthält die folgenden Informationen:
indexUid : Der Name des Index, in dem die Daten hinzugefügt werden.
Definieren wir die Index-UID für pages_url . Beim Build wird der Index pages_url in Meilisearch erstellt.
indexUid: ' pages_url ' Wenn pages_url bereits vorhanden war, wird sie beim Erstellen gelöscht und neu erstellt
query : GraphQL-Abfrage, die die Daten abruft, die in Meilisearch hinzugefügt werden sollen
Stellen wir die graphQL-Abfrage bereit, die die URLs der Seiten unserer Anwendung abruft.
query : `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` , Nach der Ausführung dieser Abfrage erhalten wir ein data mit folgendem Inhalt:
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
} transformer : Transformiert die abgerufenen Daten in ein mit Meilisearch kompatibles Format.
Nachdem wir die Daten nun mit dem query abgerufen haben, können sie noch nicht an Meilisearch gesendet werden.
Mithilfe einer transformer können wir die abgerufenen Daten in ein kompatibles Format umwandeln.
Das erste Problem der abgerufenen Daten besteht darin, dass die an Meilisearch zu sendenden Dokumente verschachtelt sind, obwohl sie sich im Stammverzeichnis eines Arrays befinden sollten. Daher sollte der Inhalt der nodes im Stammverzeichnis liegen.
{
data : {
allSitePages : {
nodes : [
{
'path' : '/404/'
} ,
]
}
}
}sollte werden:
[
{
'path' : '/404/'
} ,
{
'path' : '/'
} ,
]Das zweite Problem besteht darin, dass jedes Dokument in Meilisearch eine eindeutige Kennung benötigt, die als Primärschlüssel bezeichnet wird.
Daher benötigt jedes Dokument ein eindeutiges Feld namens id . Zum Beispiel:
{
'id' : 1
'path' : '/404/'
} ,Dazu müssen wir die Transformer-Methode verwenden, um das endgültige kompatible Array von Objekten zu erstellen:
{
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
} In dieser Funktion ordnen wir data.allSitePage.nodes zu, um ein Array von Objekten zurückzugeben, die von Meilisearch indiziert werden können. Wir fügen ein id -Feld hinzu, da Meilisearch es für die Indexierung benötigt. Da wir hier kein Feld haben, das als id verwendet werden kann, verwenden wir den Index des aktuellen Elements im Array.
Wenn Sie mehr über diese Optionen ( indexUid , query und transformer ) erfahren möchten, sehen Sie sich die Indexoptionen an
Nachdem Sie diese Felder ausgefüllt haben, sollte Ihre Meilisearch-Konfiguration wie folgt aussehen:
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
}
}
}
` ,
} ,
] ,
} ,
} ,
] ; Das gatsby-plugin-meilisearch ruft Ihre Daten auf Ihrem Gatsby-Build ab und fügt sie zu Meilisearch hinzu.
gatsby buildNach dem Build bestätigt eine Meldung in Ihrem Terminal, dass Ihr Inhalt erfolgreich indiziert wurde:
success gatsby-plugin-meilisearch - x.xxxs - Documents added to MeilisearchWenn Sie Tools benötigen, um ein Sucherlebnis in Ihre App zu integrieren, haben wir Tools, die Ihnen helfen könnten:
In der Datei gatsby-config.js akzeptiert das Meilisearch-Plugin die folgenden Optionen:
host (erforderlich) Das host ist die Adresse, unter der Ihre Meilisearch-Instanz ausgeführt wird. gatsby-plugin-meilisearch benötigt es, um mit Ihrer Meilisearch-Instanz zu kommunizieren und Ihre Daten an diese zu senden.
apiKey (optional) Das Feld apiKey enthält den API-Schlüssel, wenn die Meilisearch-Instanz passwortgeschützt ist.
skipIndexing (optional)Mit dieser Option können Sie Ihre Website ohne Indizierung bei Meilisearch erstellen. Der Standardwert ist „false“.
batchSize (optional)Die Anzahl der Dokumente, die in jedem Stapel enthalten sein sollen. Standardmäßig 1000
settings (optional)Wenn Sie Einstellungen an Ihre Meilisearch-Instanz übergeben möchten, können Sie dies hier tun. Erfahren Sie mehr über die Meilisearch-Einstellungen
indexes (erforderlich) Das indexes ist ein Array von Objekten, von denen jedes darstellt, wie Daten zu einem bestimmten Index hinzugefügt werden
Sie können ein oder mehrere index in indexes haben, was nützlich sein kann, wenn Sie verschiedene Inhalte in verschiedenen Indizes (oder mehrere verschiedene Daten im selben Index) indizieren möchten.
Jedes index sollte die folgenden Felder enthalten:
indexUid (erforderlich)
Dies ist der Name Ihres Meilisearch-Index. Dies ist ein Pflichtfeld, da dort die abgerufenen Daten in Meilisearch hinzugefügt werden. Wenn Ihre indexUid beispielsweise pages_url lautet, wird Ihr Inhalt im Index pages_url in Meilisearch indiziert. Wenn Sie einen Indexnamen angeben, der bereits vorhanden ist, wird der Index gelöscht und neu erstellt.
Beispiel:
indexUid: ' pages_url 'Weitere Informationen zu Indizes finden Sie in unserer Dokumentation.
query (erforderlich)
Dies ist die graphQL-Abfrage, die ausgeführt wird, um Ihre Daten abzurufen. Ihre Anfrage kann je nach den von Ihnen verwendeten Plugins sehr spezifisch sein. Wenn Sie sich bei Ihrer Abfrage nicht sicher sind, können Sie das von Gatsby bereitgestellte GraphiQL-Tool (http://localhost:8000/___graphql) im Entwicklungsmodus verwenden, um Sie bei der Erstellung zu unterstützen.
Beispiel:
query: `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` , Sie können auch die Konfigurationsdatei unseres Spielplatzes überprüfen, um ein Beispiel für eine graphQL-Abfrage mit dem Plugin gatsby-plugin-mdx zu finden.
transformer (erforderlich)
Dies ist eine Funktion, die die abgerufenen Daten transformiert, bevor sie an Meilisearch gesendet wird.
Nach der Ausführung der graphQL-Abfrage wird ein Datenobjekt mit einer Struktur empfangen, die je nach der von Ihnen bereitgestellten Abfrage von Projekt zu Projekt unterschiedlich sein kann. Da Meilisearch eine eindeutige Kennung im Stammverzeichnis jedes Dokuments erfordert und verschachtelte Objekte vermieden werden sollten, müssen Sie Ihr Datenobjekt entsprechend transformieren. Die transformer -Funktion ist der richtige Ort dafür.
Beispiel:
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) , Ohne Verwendung der transformer -Funktion sehen die Daten folgendermaßen aus:
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
} Nach Verwendung der transformer -Funktion wie im obigen Beispiel sehen die Daten wie folgt aus und sind für die Indexierung bereit:
[
{
id : 0 ,
path : '/404/' ,
} ,
{
id : 1 ,
path : '/404.html' ,
} ,
{
id : 2 ,
path : '/' ,
} ,
] ;Wenn Sie mehr über die Dokumentenstruktur von Meilisearch erfahren möchten, können Sie dies in unserer Dokumentation tun.
Vollständiges Anwendungsbeispiel:
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
skipIndexing : false ,
batchSize : 1000 ,
options : {
settings : {
searchableAttributes : [ "*" ] ,
} ,
} ,
indexes : [
{
indexUid : 'my_index' ,
transformer : ( ) => { } ,
query : ``
} ,
] ,
} Unterstützte Gatsby-Versionen :
(Dieses Plugin funktioniert möglicherweise mit den älteren Gatsby-Versionen, diese werden jedoch derzeit weder getestet noch offiziell unterstützt.)
Unterstützte Meilisearch-Versionen :
Dieses Paket garantiert Kompatibilität mit Version v1.x von Meilisearch, einige Funktionen sind jedoch möglicherweise nicht vorhanden. Bitte überprüfen Sie die Probleme für weitere Informationen.
Knoten-/NPM-Versionen :
Wir empfehlen, immer die neueste Version von Gatsby zu verwenden, um Ihre neuen Projekte zu starten .
Jeder neue Beitrag ist in diesem Projekt herzlich willkommen!
Wenn Sie mehr über den Entwicklungsworkflow erfahren oder einen Beitrag leisten möchten, besuchen Sie bitte unsere Beitragsrichtlinien für detaillierte Anweisungen!
