gatsby plugin meilisearch
v0.3.1 ?
Sebuah plugin untuk mengindeks konten Gatsby Anda ke Meilisearch berdasarkan kueri graphQL
Untuk memahami Meilisearch dan cara kerjanya, lihat dokumentasi Meilisearch.
Untuk memahami Gatsby dan cara kerjanya, lihat dokumentasi Gatsby.
Ucapkan selamat tinggal pada penerapan server dan pembaruan manual dengan Meilisearch Cloud. Mulailah dengan uji coba gratis 14 hari! Tidak diperlukan kartu kredit.
Di dalam aplikasi Gatsby Anda, tambahkan paket:
Dengan npm :
npm install gatsby-plugin-meilisearch Dengan yarn :
yarn add gatsby-plugin-meilisearchAda banyak cara mudah untuk mengunduh dan menjalankan instance Meilisearch.
Misalnya, jika Anda menggunakan 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 Dengan perintah ini, host instance Meilisearch Anda adalah http://localhost:7700 dan kunci master Anda adalah masterKey
Jika Anda belum menjalankan Gatsby, Anda dapat meluncurkan [taman bermain yang ada di proyek ini)(./playground/README.md) atau membuat proyek Gatsby.
Jalankan aplikasi Anda jika belum berjalan:
gatsby developSekarang setelah aplikasi Gatsby Anda berjalan, Anda memiliki akses ke URL berikut:
http://localhost:8000/ URL aplikasi web Anda.http://localhost:8000/___graphql : URL ke alat GraphiQL tempat Anda dapat membuat kueri graphQL di taman bermain dan memintanya. Sekarang Anda seharusnya sudah menjalankan aplikasi Gatsby dengan gatsby-plugin-meilisearch terinstal dan instance Meilisearch yang sedang berjalan.
Mari konfigurasikan plugin kita agar berfungsi! Dalam contoh ini, kami akan mengambil URL setiap halaman situs web Gatsby kami, dan mengindeksnya ke Meilisearch.
Agar plugin berfungsi, buka file konfigurasi gatsby-config.js yang terletak di root proyek Gatsby Anda. Semua konfigurasi terjadi di file itu.
Pertama, Anda perlu menambahkan kredensial Meilisearch Anda.
Kredensial terdiri dari:
host : Url ke instance Meilisearch Anda yang sedang berjalan.api_key : Kunci master atau key lain dengan izin untuk menambahkan dokumen di MeiliSearch. Lebih lanjut tentang izin dan kunci API di sini.search tidak boleh digunakan di front end Anda. Untuk pencarian, gunakan kunci Default Search Key yang tersedia di rute key atau buat kunci API khusus dengan hanya hak pencarian.
Tambahkan kredensial dengan cara berikut di file gatsby-config.js Anda:
{
plugins : [
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
} ,
} ,
]
}Lihat bagian ini jika Anda tidak tahu kredensial Anda.
Langkah selanjutnya adalah menentukan data mana yang ingin kita tambahkan di Meilisearch dan caranya. Hal ini terjadi di bidang indexes .
Bidang indexes adalah larik yang dapat terdiri dari beberapa objek indeks. Setiap objek indeks berisi informasi berikut:
indexUid : Nama indeks tempat data ditambahkan.
Mari kita tentukan indeks uid menjadi pages_url . Saat dibangun, indeks pages_url dibuat di dalam Meilisearch.
indexUid: ' pages_url ' jika pages_url sudah ada, itu akan dihapus dan dibuat ulang di build
query : Kueri GraphQL mengambil data untuk ditambahkan di Meilisearch
Mari berikan kueri graphQL yang mengambil URL halaman aplikasi kita.
query : `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` , Setelah menjalankan query ini, kami menerima objek data yang berisi berikut ini:
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
} transformer : Mengubah data yang diambil ke format yang kompatibel dengan Meilisearch.
Sekarang kita telah mengambil data dengan kolom query , data tersebut belum siap untuk dikirim ke Meilisearch.
Dengan menggunakan fungsi transformer , kita dapat mengubah data yang diambil ke format yang kompatibel.
Masalah pertama dari data yang diambil adalah dokumen yang akan dikirim ke Meilisearch bertumpuk, padahal dokumen tersebut harus berada di root dalam sebuah array. Jadi isi dari nodes harus berada di root.
{
data : {
allSitePages : {
nodes : [
{
'path' : '/404/'
} ,
]
}
}
}seharusnya menjadi:
[
{
'path' : '/404/'
} ,
{
'path' : '/'
} ,
]Masalah kedua adalah setiap dokumen di Meilisearch memerlukan pengenal unik yang disebut kunci primer.
Jadi setiap dokumen memerlukan bidang unik yang disebut id . Misalnya:
{
'id' : 1
'path' : '/404/'
} ,Untuk melakukannya, kita perlu menggunakan metode transformator untuk membuat array objek akhir yang kompatibel:
{
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) ,
} Dalam fungsi ini, kami memetakan data.allSitePage.nodes untuk mengembalikan array objek yang dapat diindeks oleh Meilisearch. Kami menambahkan bidang id karena Meilisearch membutuhkannya untuk indeksasi. Karena kami tidak memiliki bidang apa pun di sini yang dapat digunakan sebagai id , kami menggunakan indeks elemen saat ini dalam array.
Jika Anda ingin mempelajari lebih lanjut tentang opsi ini ( indexUid , query dan transformer ) lihat opsi indeks
Setelah mengisi kolom tersebut, konfigurasi Meilisearch Anda akan terlihat seperti ini:
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 mengambil dan menambahkan data Anda ke Meilisearch di build Gatsby Anda.
gatsby buildSetelah pembuatan, sebuah pesan di terminal Anda mengonfirmasi bahwa konten Anda berhasil diindeks:
success gatsby-plugin-meilisearch - x.xxxs - Documents added to MeilisearchJika Anda memerlukan alat untuk mengintegrasikan pengalaman penelusuran di aplikasi Anda, kami memiliki alat yang mungkin dapat membantu Anda:
Dalam file gatsby-config.js, plugin Meilisearch menerima opsi berikut:
host (wajib) Bidang host adalah alamat tempat instans Meilisearch Anda berjalan. gatsby-plugin-meilisearch membutuhkannya untuk berkomunikasi dengan instance Meilisearch Anda, dan mengirimkan data Anda ke sana.
apiKey (opsional) Bidang apiKey berisi kunci API jika instance Meilisearch dilindungi kata sandi.
skipIndexing (opsional)Opsi ini memungkinkan Anda membangun situs web Anda tanpa mengindeks ke Meilisearch. Standarnya salah
batchSize (opsional)Jumlah dokumen yang harus disertakan dalam setiap batch. Defaultnya adalah 1000
settings (opsional)Jika Anda ingin meneruskan pengaturan ke instance Meilisearch Anda, Anda dapat melakukannya di sini. Baca lebih lanjut tentang pengaturan Meilisearch
indexes (wajib) Bidang indexes adalah larik objek, yang masing-masing mewakili cara menambahkan data ke indeks tertentu
Anda dapat memiliki satu atau beberapa objek index di indexes , yang dapat berguna jika Anda ingin mengindeks konten berbeda dalam indeks berbeda (atau beberapa data berbeda ke indeks yang sama).
Setiap objek index harus berisi bidang berikut:
indexUid (wajib)
Ini adalah nama indeks Meilisearch Anda. Ini adalah bidang yang wajib diisi karena ini adalah tempat data yang diambil ditambahkan di dalam Meilisearch. Misalnya jika indexUid Anda adalah pages_url , konten Anda akan diindeks di dalam indeks pages_url di Meilisearch. Jika Anda memberikan nama indeks yang sudah ada, indeks tersebut akan dihapus dan dibuat ulang.
Contoh:
indexUid: ' pages_url 'Anda dapat mempelajari lebih lanjut tentang indeks di dokumentasi kami.
query (wajib)
Ini adalah kueri graphQL yang akan dijalankan untuk mengambil data Anda. Kueri Anda bisa sangat spesifik bergantung pada plugin yang Anda gunakan. Jika Anda tidak yakin dengan kueri Anda, Anda dapat menggunakan alat GraphiQL (http://localhost:8000/___graphql) yang disediakan oleh Gatsby pada mode pengembangan untuk membantu Anda membuatnya.
Contoh:
query: `
query MyQuery {
allSitePage {
nodes {
path
}
}
}
` , Anda juga dapat memeriksa file konfigurasi taman bermain kami untuk mendapatkan contoh kueri graphQL menggunakan plugin gatsby-plugin-mdx .
transformer (wajib)
Ini adalah fungsi yang mengubah data yang diambil sebelum mengirimkannya ke Meilisearch.
Setelah menjalankan kueri graphQL, objek data diterima dengan struktur yang dapat berbeda dari satu proyek ke proyek lainnya, bergantung pada kueri yang Anda berikan. Karena Meilisearch memerlukan pengidentifikasi unik di akar setiap dokumen dan harus menghindari objek bertumpuk, Anda perlu mengubah objek data Anda sesuai dengan itu. Fungsi transformer adalah tempat yang tepat untuk melakukannya.
Contoh:
transformer : data =>
data . allSitePage . nodes . map ( ( node , index ) => ( {
id : index ,
... node ,
} ) ) , Tanpa menggunakan fungsi transformer maka datanya akan terlihat seperti ini:
{
data : {
allSitePage : {
nodes : [
{
path : '/404/'
} ,
{
path : '/404.html'
} ,
{
path : '/'
}
]
}
}
} Setelah menggunakan fungsi transformer seperti contoh di atas, maka data akan terlihat seperti ini, dan siap untuk diindeks:
[
{
id : 0 ,
path : '/404/' ,
} ,
{
id : 1 ,
path : '/404.html' ,
} ,
{
id : 2 ,
path : '/' ,
} ,
] ;Jika Anda ingin mempelajari lebih lanjut tentang struktur dokumen Meilisearch, Anda dapat melakukannya di dokumentasi kami.
Contoh penggunaan lengkap:
{
resolve : 'gatsby-plugin-meilisearch' ,
options : {
host : 'http://localhost:7700' ,
apiKey : 'masterKey' ,
skipIndexing : false ,
batchSize : 1000 ,
options : {
settings : {
searchableAttributes : [ "*" ] ,
} ,
} ,
indexes : [
{
indexUid : 'my_index' ,
transformer : ( ) => { } ,
query : ``
} ,
] ,
} Versi Gatsby yang didukung :
(Plugin ini mungkin berfungsi dengan versi Gatsby yang lebih lama, namun plugin ini belum diuji atau didukung secara resmi saat ini.)
Versi Meilisearch yang didukung :
Paket ini menjamin kompatibilitas dengan Meilisearch versi v1.x, tetapi beberapa fitur mungkin tidak ada. Silakan periksa masalahnya untuk informasi lebih lanjut.
Versi simpul/NPM :
Kami menyarankan untuk selalu menggunakan Gatsby versi terbaru untuk memulai proyek baru Anda .
Setiap kontribusi baru sangat kami harapkan dalam proyek ini!
Jika Anda ingin tahu lebih banyak tentang alur kerja pengembangan atau ingin berkontribusi, silakan kunjungi pedoman kontribusi kami untuk petunjuk detailnya!
