Un complemento para indexar su contenido de Gatsby en Meilisearch basado en consultas de GraphQL
Para comprender Meilisearch y cómo funciona, consulte la documentación de Meilisearch.
Para comprender a Gatsby y cómo funciona, consulte la documentación de Gatsby.
Dígale adiós a la implementación de servidores y a las actualizaciones manuales con Meilisearch Cloud. ¡Empiece con una prueba gratuita de 14 días! No se requiere tarjeta de crédito.
Dentro de tu aplicación Gatsby, agrega el paquete:
Con npm
:
npm install gatsby-plugin-meilisearch
Con yarn
:
yarn add gatsby-plugin-meilisearch
Hay muchas formas sencillas de descargar y ejecutar una instancia de Meilisearch.
Por ejemplo, si usa 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
Con este comando, host
de su instancia de Meilisearch es http://localhost:7700
y su clave maestra es masterKey
Si no tiene un Gatsby en ejecución, puede iniciar el [patio de juegos presente en este proyecto) (./playground/README.md) o crear un proyecto de Gatsby.
Ejecute su aplicación si aún no se está ejecutando:
gatsby develop
Ahora que su aplicación Gatsby se está ejecutando, tiene acceso a las siguientes URL:
http://localhost:8000/
URL de su aplicación web.http://localhost:8000/___graphql
: URL de la herramienta GraphiQL donde puede crear consultas GraphQL en el patio de juegos y solicitarlas. Ahora debería tener una aplicación Gatsby en ejecución con gatsby-plugin-meilisearch
instalado y una instancia de Meilisearch en ejecución.
¡Configuremos nuestro complemento para que funcione! En este ejemplo, buscaremos la URL de cada página de nuestro sitio web de Gatsby y las indexaremos en Meilisearch.
Para que el complemento funcione, abra el archivo de configuración gatsby-config.js
ubicado en la raíz de su proyecto Gatsby. Toda la configuración se realiza en ese archivo.
Primero, debe agregar sus credenciales de Meilisearch.
Las credenciales se componen de:
host
: la URL de su instancia de Meilisearch en ejecución.api_key
: la clave master
u otra key
con permiso para agregar documentos en MeiliSearch. Más información sobre permisos y claves API aquí.search
nunca deben usarse en su interfaz. Para realizar búsquedas, utilice la clave Default Search Key
disponible en la ruta key
o cree una clave API personalizada con solo derechos de búsqueda.
Agregue las credenciales de la siguiente manera en su archivo gatsby-config.js
:
{
plugins : [
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
} ,
} ,
]
}
Consulte esta sección si no sabe cuáles son sus credenciales.
El siguiente paso es definir qué datos queremos añadir en Meilisearch y cómo. Esto sucede en el campo indexes
.
El campo indexes
es una matriz que puede estar compuesta por varios objetos de índice. Cada objeto de índice contiene la siguiente información:
indexUid
: el nombre del índice en el que se agregan los datos.
Definamos el índice uid para pages_url
. Durante la compilación, el índice pages_url
se crea dentro de Meilisearch.
indexUid: ' pages_url '
Si pages_url
ya existía, se elimina y se vuelve a crear en la compilación.
query
: consulta GraphQL que busca los datos para agregar en Meilisearch
Proporcionemos la consulta GraphQL que recupera las URL de las páginas de nuestra aplicación.
query : `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` ,
Después de ejecutar esta consulta, recibimos un objeto data
que contiene lo siguiente:
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
}
transformer
: transforma los datos obtenidos a un formato compatible con Meilisearch.
Ahora que hemos obtenido los datos con el campo query
, aún no están listos para enviarlos a Meilisearch.
Usando una función transformer
, podemos transformar los datos obtenidos a un formato compatible.
El primer problema de los datos recuperados es que los documentos a enviar a Meilisearch están anidados, cuando deberían estar en la raíz de una matriz. Entonces el contenido de nodes
debería estar en la raíz.
{
data : {
allSitePages : {
nodes : [
{
'path' : '/404/'
} ,
]
}
}
}
debería convertirse en:
[
{
'path' : '/404/'
} ,
{
'path' : '/'
} ,
]
El segundo problema es que cada documento en Meilisearch requiere un identificador único llamado clave primaria.
Por tanto, cada documento necesita un campo único llamado id
. Por ejemplo:
{
'id' : 1
'path' : '/404/'
} ,
Para hacerlo, necesitamos usar el método del transformador para crear la matriz final compatible de objetos:
{
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
}
En esta función, asignamos data.allSitePage.nodes
para devolver una matriz de objetos que Meilisearch puede indexar. Agregamos un campo id
ya que Meilisearch lo necesita para la indexación. Como no tenemos ningún campo aquí que pueda usarse como id
, usamos el índice del elemento actual en la matriz.
Si desea obtener más información sobre estas opciones ( indexUid
, query
y transformer
), consulte las opciones de índices.
Después de completar esos campos, su configuración de Meilisearch debería verse así:
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
recupera y agrega sus datos a Meilisearch en su compilación de Gatsby.
gatsby build
Después de la compilación, un mensaje en su terminal confirma que su contenido se indexó correctamente:
success gatsby-plugin-meilisearch - x.xxxs - Documents added to Meilisearch
Si necesita herramientas para integrar una experiencia de búsqueda en su aplicación, tenemos herramientas que pueden ayudarlo:
En el archivo gatsby-config.js, el complemento Meilisearch acepta las siguientes opciones:
host
(requerido) El campo host
es la dirección donde se ejecuta su instancia de Meilisearch. gatsby-plugin-meilisearch
lo necesita para comunicarse con su instancia de Meilisearch y enviarle sus datos.
apiKey
(opcional) El campo apiKey
contiene la clave API si la instancia de Meilisearch está protegida con contraseña.
skipIndexing
(opcional)Esta opción le permite crear su sitio web sin indexarlo en Meilisearch. Por defecto es falso
batchSize
(opcional)El número de documentos que deben incluirse en cada lote. Predeterminado a 1000
settings
(opcional)Si desea pasar la configuración a su instancia de Meilisearch, puede hacerlo aquí. Leer más sobre la configuración de Meilisearch
indexes
(obligatorio) El campo indexes
es una matriz de objetos, cada uno de ellos representa cómo agregar datos a un índice específico.
Puede tener uno o varios objetos index
en indexes
, lo que puede resultar útil si desea indexar contenido diferente en diferentes índices (o varios datos diferentes en el mismo índice).
Cada objeto index
debe contener los siguientes campos:
indexUid
(obligatorio)
Este es el nombre de su índice Meilisearch. Este es un campo obligatorio ya que es donde se agregan los datos recuperados dentro de Meilisearch. Por ejemplo, si su indexUid
es pages_url
, su contenido se indexará dentro del índice pages_url
en Meilisearch. Si proporciona un nombre de índice que ya existe, el índice se eliminará y se volverá a crear.
Ejemplo:
indexUid: ' pages_url '
Puede obtener más información sobre los índices en nuestra documentación.
query
(requerido)
Esta es la consulta GraphQL que se ejecutará para recuperar sus datos. Su consulta puede ser muy específica dependiendo de los complementos que esté utilizando. Si no está seguro de su consulta, puede utilizar la herramienta GraphiQL (http://localhost:8000/___graphql) proporcionada por Gatsby en modo de desarrollo para ayudarle a compilarla.
Ejemplo:
query: `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` ,
También puede consultar el archivo de configuración de nuestro patio de juegos para tener un ejemplo de una consulta GraphQL usando el complemento gatsby-plugin-mdx
.
transformer
(requerido)
Esta es una función que transforma los datos recuperados antes de enviarlos a Meilisearch.
Después de ejecutar la consulta GraphQL, se recibe un objeto de datos con una estructura que puede diferir de un proyecto a otro, dependiendo de la consulta que hayas proporcionado. Como Meilisearch requiere un identificador único en la raíz de cada documento y debe evitar objetos anidados, deberá transformar su objeto de datos en consecuencia. La función transformer
es el lugar correcto para hacerlo.
Ejemplo:
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
Sin utilizar la función transformer
, los datos se verán así:
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
}
Después de usar la función transformer
como en el ejemplo anterior, los datos tendrán este aspecto y estarán listos para la indexación:
[
{
id : 0 ,
path : '/404/' ,
} ,
{
id : 1 ,
path : '/404.html' ,
} ,
{
id : 2 ,
path : '/' ,
} ,
] ;
Si desea obtener más información sobre la estructura de documentos de Meilisearch, puede hacerlo en nuestra documentación.
Ejemplo de uso completo:
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
skipIndexing : false ,
batchSize : 1000 ,
options : {
settings : {
searchableAttributes : [ "*" ] ,
} ,
} ,
indexes : [
{
indexUid : 'my_index' ,
transformer : ( ) => { } ,
query : ``
} ,
] ,
}
Versiones de Gatsby compatibles :
(Este complemento puede funcionar con las versiones anteriores de Gatsby, pero no están probadas ni cuentan con soporte oficial en este momento).
Versiones compatibles de Meilisearch :
Este paquete garantiza la compatibilidad con la versión v1.x de Meilisearch, pero es posible que algunas funciones no estén presentes. Consulte los problemas para obtener más información.
Versiones de nodo/NPM :
Te recomendamos utilizar siempre la última versión de Gatsby para iniciar tus nuevos proyectos .
¡Cualquier nueva contribución es más que bienvenida en este proyecto!
Si desea obtener más información sobre el flujo de trabajo de desarrollo o desea contribuir, visite nuestras pautas de contribución para obtener instrucciones detalladas.