gatsby plugin meilisearch ดาวน์โหลด - gatsby plugin meilisearch ดาวน์โหลดซอร์สโค้ด

gatsby plugin meilisearch

ซอร์สโค้ดอื่น ๆ

v0.3.1 ?

ดาวน์โหลด

ปลั๊กอิน Gatsby Meilisearch

Meilisearch | Meilisearch Cloud | เอกสารประกอบ | ไม่ลงรอยกัน | เว็บไซต์ | คำถามที่พบบ่อย

ปลั๊กอินสำหรับจัดทำดัชนีเนื้อหา Gatsby ของคุณไปยัง Meilisearch ตามคำสั่ง graphQL

สารบัญ

เอกสารประกอบ
⚡ เติมพลังให้กับประสบการณ์ Meilisearch ของคุณ
- การติดตั้ง
- เริ่มต้นใช้งาน
- การใช้งาน
- ความเข้ากันได้กับ Meilisearch และ Gatsby
ขั้นตอนการพัฒนาและการมีส่วนร่วม

เอกสารประกอบ

เพื่อทำความเข้าใจ Meilisearch และวิธีการทำงาน โปรดดูเอกสารประกอบของ Meilisearch

เพื่อทำความเข้าใจ Gatsby และวิธีการทำงาน โปรดดูเอกสารประกอบของ Gatsby

⚡ เติมพลังให้กับประสบการณ์ Meilisearch ของคุณ

บอกลาการปรับใช้เซิร์ฟเวอร์และการอัปเดตด้วยตนเองด้วย Meilisearch Cloud เริ่มต้นด้วยการทดลองใช้ฟรี 14 วัน! ไม่ต้องใช้บัตรเครดิต

- การติดตั้ง

ภายในแอป Gatsby ให้เพิ่มแพ็คเกจ:

ด้วย npm :

npm install gatsby-plugin-meilisearch

ด้วย yarn :

yarn add gatsby-plugin-meilisearch

?‍♀️ เรียกใช้ Meilisearch

มีวิธีง่ายๆ มากมายในการดาวน์โหลดและเรียกใช้อินสแตนซ์ Meilisearch

ตัวอย่างเช่น ถ้าคุณใช้นักเทียบท่า:

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

ด้วยคำสั่งนี้ host อินสแตนซ์ Meilisearch ของคุณคือ http://localhost:7700 และมาสเตอร์คีย์ของคุณคือ masterKey

วิ่งแกสบี้

หากคุณไม่มี Gatsby ที่ทำงานอยู่ คุณสามารถเปิด [สนามเด็กเล่นที่มีอยู่ในโปรเจ็กต์นี้)(./playground/README.md) หรือสร้างโปรเจ็กต์ Gatsby ก็ได้

เรียกใช้แอปของคุณหากยังไม่ได้ทำงาน:

gatsby develop

ขณะนี้แอป Gatsby ของคุณทำงานอยู่ คุณจะสามารถเข้าถึง URL ต่อไปนี้:

http://localhost:8000/ URL ของเว็บแอปของคุณ
http://localhost:8000/___graphql : URL ไปยังเครื่องมือ GraphiQL ซึ่งคุณสามารถสร้างแบบสอบถาม graphQL บน Playground และขอได้

- เริ่มต้นใช้งาน

ตอนนี้คุณควรมีแอป Gatsby ที่ทำงานอยู่ โดยติดตั้ง gatsby-plugin-meilisearch และอินสแตนซ์ Meilisearch ที่ทำงานอยู่

มากำหนดค่าปลั๊กอินของเราเพื่อให้ใช้งานได้! ในตัวอย่างนี้ เราจะดึง URL ของทุกหน้าของเว็บไซต์ Gatsby ของเรา และจัดทำดัชนีไว้ใน Meilisearch

เพื่อให้ปลั๊กอินใช้งานได้ ให้เปิดไฟล์การกำหนดค่า gatsby-config.js ซึ่งอยู่ที่รากของโปรเจ็กต์ Gatsby ของคุณ การกำหนดค่าทั้งหมดเกิดขึ้นในไฟล์นั้น

กำหนดค่าตัวเลือกปลั๊กอินของคุณ

- เพิ่มข้อมูลรับรอง Meilisearch ของคุณ

ขั้นแรก คุณต้องเพิ่มข้อมูลรับรอง Meilisearch ของคุณ

หนังสือรับรองประกอบด้วย:

host : URL ไปยังอินสแตนซ์ Meilisearch ที่ทำงานอยู่ของคุณ
api_key : คีย์ master หรือ key อื่นที่ได้รับอนุญาตให้เพิ่มเอกสารใน MeiliSearch ข้อมูลเพิ่มเติมเกี่ยวกับการอนุญาตและคีย์ API ที่นี่

ห้ามใช้คีย์ที่มีสิทธิ์อื่นนอกเหนือจาก search ในส่วนหน้าของคุณ สำหรับการค้นหา ให้ใช้คีย์ Default Search Key ที่มีอยู่บนเส้นทาง key หรือสร้างคีย์ API แบบกำหนดเองที่มีสิทธิ์ในการค้นหาเท่านั้น

เพิ่มข้อมูลประจำตัวด้วยวิธีต่อไปนี้ในไฟล์ gatsby-config.js ของคุณ:

 {
  plugins : [
    {
      resolve : 'gatsby-plugin-meilisearch' ,
      options : {
        host : 'http://localhost:7700' ,
        apiKey : 'masterKey' ,
      } ,
    } ,
  ]
}

ดูส่วนนี้หากคุณไม่ทราบว่าข้อมูลรับรองของคุณคืออะไร

? กรอกช่องดัชนี

ขั้นตอนต่อไปคือการกำหนดข้อมูลที่เราต้องการเพิ่มใน Meilisearch และอย่างไร สิ่งนี้เกิดขึ้นในฟิลด์ indexes

ฟิลด์ indexes คืออาร์เรย์ที่สามารถประกอบด้วยออบเจ็กต์ดัชนีหลายรายการได้ แต่ละวัตถุดัชนีประกอบด้วยข้อมูลต่อไปนี้:

indexUid : ชื่อของดัชนีที่มีการเพิ่มข้อมูล

มากำหนดดัชนี uid ให้กับ pages_url ในการสร้าง ดัชนี pages_url จะถูกสร้างขึ้นภายใน Meilisearch

indexUid: ' pages_url '

หากมี pages_url อยู่แล้ว จะถูกลบและสร้างใหม่บนบิลด์

query : แบบสอบถาม GraphQL กำลังดึงข้อมูลเพื่อเพิ่มใน Meilisearch

เรามาจัดเตรียมแบบสอบถาม graphQL ที่ดึง URL ของหน้าแอปพลิเคชันของเรากัน

 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' : '/'
  } ,
]

ปัญหาที่สองคือแต่ละเอกสารใน Meilisearch ต้องมีตัวระบุเฉพาะที่เรียกว่าคีย์หลัก

ดังนั้นเอกสารทุกฉบับจำเป็นต้องมีฟิลด์เฉพาะที่เรียกว่า id ตัวอย่างเช่น:

 {
  'id' : 1
  'path' : '/404/'
} ,

ในการทำเช่นนั้น เราจำเป็นต้องใช้วิธี Transformer เพื่อสร้างอาร์เรย์สุดท้ายของอ็อบเจ็กต์ที่เข้ากันได้:

 {
  transformer : data =>
    data . allSitePage . nodes . map ( ( node , index ) => ( {
      id : index ,
      ... node ,
    } ) ) ,
}

ในฟังก์ชันนี้ เราแมปบน data.allSitePage.nodes เพื่อส่งคืนอาร์เรย์ของออบเจ็กต์ที่ Meilisearch จัดทำดัชนีได้ เราเพิ่มฟิลด์ id เนื่องจาก Meilisearch จำเป็นต้องใช้สำหรับการจัดทำดัชนี เนื่องจากเราไม่มีฟิลด์ใดๆ ที่สามารถใช้เป็น 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 ดึงข้อมูลและเพิ่มข้อมูลของคุณไปยัง Meilisearch บน Gatsby build ของคุณ

gatsby build

หลังจากสร้างแล้ว ข้อความในเทอร์มินัลของคุณจะยืนยันว่าเนื้อหาของคุณได้รับการจัดทำดัชนีเรียบร้อยแล้ว:

success gatsby-plugin-meilisearch - x.xxxs - Documents added to Meilisearch

- บูรณาการองค์ประกอบการค้นหา

หากคุณต้องการเครื่องมือในการผสานรวมประสบการณ์การค้นหาในแอปของคุณ เรามีเครื่องมือที่อาจช่วยคุณได้:

docs-searchbar: เครื่องมือสำหรับแสดงแถบค้นหาบนเว็บไซต์ของคุณ
meilisearch-react: ไลบรารี React UI ที่ให้คุณสร้างอินเทอร์เฟซการค้นหาในแอปพลิเคชันส่วนหน้าของคุณได้อย่างรวดเร็ว

- การใช้งาน

ในไฟล์ gatsby-config.js ปลั๊กอิน Meilisearch ยอมรับตัวเลือกต่อไปนี้:

`host` (จำเป็น)

ฟิลด์ host คือที่อยู่ที่อินสแตนซ์ Meilisearch ของคุณทำงานอยู่ gatsby-plugin-meilisearch จำเป็นต้องใช้เพื่อสื่อสารกับอินสแตนซ์ Meilisearch ของคุณและส่งข้อมูลของคุณไป

`apiKey` (ไม่บังคับ)

ช่อง apiKey มีคีย์ API หากอินสแตนซ์ Meilisearch มีการป้องกันด้วยรหัสผ่าน

`skipIndexing` (ไม่บังคับ)

ตัวเลือกนี้ช่วยให้คุณสร้างเว็บไซต์ของคุณโดยไม่ต้องสร้างดัชนีให้กับ Meilisearch ค่าเริ่มต้นเป็นเท็จ

`batchSize` (ไม่จำเป็น)

จำนวนเอกสารที่ควรรวมในแต่ละชุด ค่าเริ่มต้นคือ 1,000

`settings` (ไม่จำเป็น)

หากคุณต้องการส่งการตั้งค่าไปยังอินสแตนซ์ Meilisearch ของคุณ คุณสามารถทำได้ที่นี่ อ่านเพิ่มเติมเกี่ยวกับการตั้งค่า Meilisearch

`indexes` (จำเป็น)

ช่อง indexes คืออาร์เรย์ของออบเจ็กต์ โดยแต่ละออบเจ็กต์จะแสดงวิธีเพิ่มข้อมูลลงในดัชนีเฉพาะ

คุณสามารถมีออบเจ็กต์ index ได้หนึ่งรายการหรือหลายรายการใน indexes ซึ่งจะมีประโยชน์หากคุณต้องการจัดทำดัชนีเนื้อหาที่แตกต่างกันในดัชนีที่ต่างกัน (หรือข้อมูลที่แตกต่างกันหลายรายการให้เป็นดัชนีเดียวกัน)

แต่ละออบเจ็กต์ index ควรมีฟิลด์ต่อไปนี้:

indexUid (จำเป็น)

นี่คือชื่อของดัชนี Meilisearch ของคุณ นี่เป็นฟิลด์บังคับเนื่องจากเป็นที่ที่ข้อมูลที่ดึงมาถูกเพิ่มเข้าไปใน Meilisearch ตัวอย่างเช่น หาก indexUid ของคุณคือ pages_url เนื้อหาของคุณจะถูกจัดทำดัชนีภายในดัชนี pages_url ใน Meilisearch หากคุณระบุชื่อดัชนีที่มีอยู่แล้ว ดัชนีจะถูกลบและสร้างใหม่

ตัวอย่าง:

indexUid: ' pages_url '

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับดัชนีได้จากเอกสารประกอบของเรา

query (จำเป็น)

นี่คือแบบสอบถาม graphQL ที่จะดำเนินการเพื่อดึงข้อมูลของคุณ ข้อความค้นหาของคุณอาจเจาะจงมากขึ้นอยู่กับปลั๊กอินที่คุณใช้ หากคุณไม่แน่ใจเกี่ยวกับคำถามของคุณ คุณสามารถใช้เครื่องมือ GraphiQL (http://localhost:8000/___graphql) ที่ Gatsby มอบให้ในโหมดการพัฒนาเพื่อช่วยคุณสร้างมัน

ตัวอย่าง:

query: `
  query MyQuery {
    allSitePage {
      nodes {
        path
      }
    }
  }
` ,

คุณยังสามารถตรวจสอบไฟล์การกำหนดค่าของ Playground ของเราเพื่อดูตัวอย่างแบบสอบถาม graphQL โดยใช้ปลั๊กอิน gatsby-plugin-mdx

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 : ``
    } ,
  ] ,
}