gatsby plugin meilisearch
v0.3.1 ?
Um plugin para indexar seu conteúdo Gatsby para Meilisearch com base em consultas graphQL
Para entender o Meilisearch e como ele funciona, consulte a documentação do Meilisearch.
Para entender Gatsby e como ele funciona, consulte a documentação de Gatsby.
Diga adeus à implantação de servidores e às atualizações manuais com Meilisearch Cloud. Comece com um teste gratuito de 14 dias! Não é necessário cartão de crédito.
Dentro do seu aplicativo Gatsby, adicione o pacote:
Com npm :
npm install gatsby-plugin-meilisearch Com yarn :
yarn add gatsby-plugin-meilisearchExistem muitas maneiras fáceis de baixar e executar uma instância do Meilisearch.
Por exemplo, se você 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 Com este comando, o host da sua instância Meilisearch é http://localhost:7700 e sua chave mestra é masterKey
Se você não possui um Gatsby em execução, você pode iniciar o [playground presente neste projeto)(./playground/README.md) ou criar um projeto Gatsby.
Execute seu aplicativo se ele ainda não estiver em execução:
gatsby developAgora que seu aplicativo Gatsby está em execução, você tem acesso aos seguintes URLs:
http://localhost:8000/ URL do seu aplicativo web.http://localhost:8000/___graphql : URL para a ferramenta GraphiQL onde você pode criar consultas graphQL no playground e solicitá-las. Agora você deve ter um aplicativo Gatsby em execução com gatsby-plugin-meilisearch instalado e uma instância Meilisearch em execução.
Vamos configurar nosso plugin para que funcione! Neste exemplo, iremos buscar o URL de cada página do nosso site Gatsby e indexá-los no Meilisearch.
Para fazer o plugin funcionar, abra o arquivo de configuração gatsby-config.js localizado na raiz do seu projeto Gatsby. Toda a configuração ocorre nesse arquivo.
Primeiro, você precisa adicionar suas credenciais Meilisearch.
As credenciais são compostas por:
host : o URL da sua instância Meilisearch em execução.api_key : A chave master ou outra key com permissão para adicionar documentos no MeiliSearch. Mais sobre permissões e chaves de API aqui.search nunca devem ser usadas em seu front-end. Para pesquisar, use a chave Default Search Key disponível na rota key ou crie uma chave de API personalizada apenas com direitos de pesquisa.
Adicione as credenciais da seguinte maneira em seu arquivo gatsby-config.js :
{
plugins : [
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
} ,
} ,
]
}Consulte esta seção se você não souber quais são suas credenciais.
O próximo passo é definir quais dados queremos adicionar no Meilisearch e como. Isso acontece no campo indexes .
O campo indexes é uma matriz que pode ser composta por vários objetos de índice. Cada objeto de índice contém as seguintes informações:
indexUid : o nome do índice no qual os dados são adicionados.
Vamos definir o índice uid para pages_url . Na construção, o índice pages_url é criado dentro do Meilisearch.
indexUid: ' pages_url ' se pages_url já existisse, ele será excluído e recriado na construção
query : consulta GraphQL buscando os dados para adicionar no Meilisearch
Vamos fornecer a consulta graphQL que recupera as URL’s das páginas da nossa aplicação.
query : `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` , Após executar esta consulta, recebemos um objeto data contendo o seguinte:
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
} transformer : transforma os dados buscados em um formato compatível com Meilisearch.
Agora que buscamos os dados com o campo query , eles ainda não estão prontos para serem enviados ao Meilisearch.
Usando uma função transformer , podemos transformar os dados buscados em um formato compatível.
O primeiro problema dos dados buscados é que os documentos a serem enviados ao Meilisearch estão aninhados, embora deveriam estar na raiz de um array. Portanto, o conteúdo dos nodes deve estar na raiz.
{
data : {
allSitePages : {
nodes : [
{
'path' : '/404/'
} ,
]
}
}
}deveria se tornar:
[
{
'path' : '/404/'
} ,
{
'path' : '/'
} ,
]O segundo problema é que cada documento no Meilisearch requer um identificador exclusivo chamado chave primária.
Assim, todo documento precisa de um campo exclusivo chamado id . Por exemplo:
{
'id' : 1
'path' : '/404/'
} ,Para fazer isso, precisamos usar o método transformer para criar o array final compatível de objetos:
{
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
} Nesta função, mapeamos data.allSitePage.nodes para retornar um array de objetos que podem ser indexados pelo Meilisearch. Adicionamos um campo id porque o Meilisearch precisa dele para a indexação. Como não temos nenhum campo aqui que possa ser usado como id , usamos o índice do elemento atual no array.
Se quiser saber mais sobre essas opções ( indexUid , query e transformer ) veja opções de índices
Após preencher esses campos, sua configuração do Meilisearch deverá ficar assim:
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
}
}
}
` ,
} ,
] ,
} ,
} ,
] ; O gatsby-plugin-meilisearch busca e adiciona seus dados ao Meilisearch em sua compilação do Gatsby.
gatsby buildApós a compilação, uma mensagem em seu terminal confirma que seu conteúdo foi indexado com sucesso:
success gatsby-plugin-meilisearch - x.xxxs - Documents added to MeilisearchSe você precisar de ferramentas para integrar uma experiência de pesquisa em seu aplicativo, temos ferramentas que podem ajudá-lo:
No arquivo gatsby-config.js, o plugin Meilisearch aceita as seguintes opções:
host (obrigatório) O campo host é o endereço onde sua instância Meilisearch está sendo executada. gatsby-plugin-meilisearch precisa dele para se comunicar com sua instância Meilisearch e enviar seus dados para ela.
apiKey (opcional) O campo apiKey contém a chave API se a instância Meilisearch estiver protegida por senha.
skipIndexing (opcional)Esta opção permite que você construa seu site sem indexar no Meilisearch. Padrão para falso
batchSize (opcional)A quantidade de documentos que devem ser incluídos em cada lote. Padrão para 1000
settings (opcional)Se quiser passar as configurações para sua instância Meilisearch, você pode fazer isso aqui. Leia mais sobre as configurações do Meilisearch
indexes (obrigatório) O campo indexes é uma matriz de objetos, cada um deles representa como adicionar dados a um índice específico
Você pode ter um ou vários objetos index em indexes , o que pode ser útil se você quiser indexar conteúdos diferentes em índices diferentes (ou vários dados diferentes no mesmo índice).
Cada objeto index deve conter os seguintes campos:
indexUid (obrigatório)
Este é o nome do seu índice Meilisearch. Este é um campo obrigatório, pois é onde os dados recuperados são adicionados ao Meilisearch. Por exemplo, se o seu indexUid for pages_url , seu conteúdo será indexado dentro do índice pages_url no Meilisearch. Se você fornecer um nome de índice que já exista, o índice será excluído e recriado.
Exemplo:
indexUid: ' pages_url 'Você pode aprender mais sobre índices em nossa documentação.
query (obrigatório)
Esta é a consulta graphQL que será executada para recuperar seus dados. Sua consulta pode ser muito específica dependendo dos plugins que você está usando. Se não tiver certeza sobre sua consulta, você pode usar a ferramenta GraphiQL (http://localhost:8000/___graphql) fornecida por Gatsby no modo de desenvolvimento para ajudá-lo a construí-la.
Exemplo:
query: `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` , Você também pode verificar o arquivo de configuração do nosso playground para ter um exemplo de consulta graphQL usando o plugin gatsby-plugin-mdx .
transformer (obrigatório)
Esta é uma função que transforma os dados buscados antes de enviá-los ao Meilisearch.
Após executar a consulta graphQL, um objeto de dados é recebido com uma estrutura que pode diferir de um projeto para outro, dependendo da consulta que você forneceu. Como o Meilisearch requer um identificador exclusivo na raiz de cada documento e deve evitar objetos aninhados, você precisará transformar seu objeto de dados de acordo. A função transformer é o local correto para fazer isso.
Exemplo:
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) , Sem usar a função transformer , os dados ficarão assim:
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
} Depois de usar a função transformer como no exemplo acima, os dados ficarão assim e estarão prontos para indexação:
[
{
id : 0 ,
path : '/404/' ,
} ,
{
id : 1 ,
path : '/404.html' ,
} ,
{
id : 2 ,
path : '/' ,
} ,
] ;Se quiser saber mais sobre a estrutura de documentos do Meilisearch, você pode fazê-lo em nossa documentação.
Exemplo 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 : ``
} ,
] ,
} Versões Gatsby suportadas :
(Este plugin pode funcionar com versões mais antigas do Gatsby, mas estas não são testadas nem suportadas oficialmente no momento.)
Versões Meilisearch suportadas :
Este pacote garante compatibilidade com a versão v1.x do Meilisearch, mas alguns recursos podem não estar presentes. Por favor, verifique os problemas para obter mais informações.
Versões de nó/NPM :
Recomendamos sempre usar a versão mais recente do Gatsby para iniciar seus novos projetos .
Qualquer nova contribuição é mais que bem-vinda neste projeto!
Se você quiser saber mais sobre o fluxo de trabalho de desenvolvimento ou contribuir, visite nossas diretrizes de contribuição para obter instruções detalhadas!
