gatsby plugin meilisearch تنزيل - gatsby plugin meilisearch تنزيل كود المصدر

gatsby plugin meilisearch

شفرة المصدر الأخرى

v0.3.1 ?

تنزيل

غاتسبي البرنامج المساعد Meilisearch

ميليسيرتش | ميليسيرتش كلاود | التوثيق | الخلاف | الموقع | التعليمات

مكون إضافي لفهرسة محتوى Gatsby الخاص بك إلى Meilisearch بناءً على استعلامات graphQL

جدول المحتويات

التوثيق
⚡ اشحن تجربة Meilisearch الخاصة بك
؟ تثبيت
؟ ابدء
؟ الاستخدام
؟ التوافق مع Meilisearch وGatsby
تطوير سير العمل والمساهمة

التوثيق

لفهم Meilisearch وكيفية عمله، راجع وثائق Meilisearch.

لفهم غاتسبي وكيفية عمله، راجع وثائق غاتسبي.

⚡ اشحن تجربة Meilisearch الخاصة بك

قل وداعًا لنشر الخادم والتحديثات اليدوية باستخدام Meilisearch Cloud. ابدأ بتجربة مجانية مدتها 14 يومًا! لا حاجة لبطاقة الائتمان.

؟ تثبيت

داخل تطبيق Gatsby، أضف الحزمة:

مع npm :

npm install gatsby-plugin-meilisearch

مع yarn :

yarn add gatsby-plugin-meilisearch

‍♀️ قم بتشغيل Meilisearch

هناك العديد من الطرق السهلة لتنزيل وتشغيل مثيل Meilisearch.

على سبيل المثال، إذا كنت تستخدم 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

باستخدام هذا الأمر، 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 في الملعب وطلبها.

؟ ابدء

الآن يجب أن يكون لديك تطبيق 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 : اسم الفهرس الذي تمت إضافة البيانات إليه.

دعونا نحدد معرف الفهرس إلى 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 : 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 الخاص بك.

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` (اختياري)

عدد المستندات التي يجب تضمينها في كل دفعة. الافتراضي إلى 1000

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

يمكنك أيضًا التحقق من ملف تكوين الملعب الخاص بنا للحصول على مثال لاستعلام 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 : ``
    } ,
  ] ,
}