السابق

التالي

إضافة بيانات إلى تطبيق Gatsby الخاص بك

مكتمل

Gatsby لديه نظام من المكونات الإضافية التي تفحص مصادر البيانات المختلفة وتضع البيانات الناتجة في كائن داخل الذاكرة، الرسم البياني للبيانات. ويقوم بكل ذلك في وقت البناء، لذلك عندما تقوم بصياغة صفحة جديدة، يمكنك افتراض أن البيانات من هذا الرسم البياني متوفرة.

الأدوات

الرسم البياني للبيانات هو شيء يمكنك التفاعل معه. بمجرد بدء تشغيل خادم التطوير، سيتم توفير الرسم البياني للبيانات على http://localhost:8000/___graphql. وسيُعرض هذا الرسم البياني للبيانات في أداة تسمى GraphiQL.

تسمح لك GraphiQL بالقيام بما يلي:

• التنقل: انتقل لأسفل ضمن الرسم البياني للبيانات ومحتواه من خلال توسيع العقد للعثور على البيانات التي تحتاج إليها تمامًا.
• إنشاء الاستعلامات: أثناء التنقل لأسفل ضمن الرسم البياني، ستقوم الأداة بصياغة استعلام من أجلك. يمكنك أيضًا تحرير نص الاستعلام كما تراه مناسبًا لمشاهدة النتائج.
• استعراض النتائج: قم بتشغيل الاستعلام الذي تقوم بإنشائه لمشاهدته يعرض في الأداة. ستعرف بالضبط ما الاستجابة التي يعرضها الاستعلام قبل المجازفة لتضمينه في أي مكون.

استخدام البيانات في مكون صفحة

عند إنشاء مكون صفحة يريد استخدام البيانات من الرسم البياني المذكور أعلاه، هناك ثلاثة أمور عليك القيام بهما:

1. تعريف استعلام. قم بصياغة استعلام بلغة الاستعلام GraphQL يطلب موردًا وبعض الأعمدة على ذلك المورد.

2. اكتب التعليمات البرمجية لتنفيذ الاستعلام. في ملف .js لصفحتك، قم باستدعاء الدالة graphql() باستخدام الاستعلام كإدخال وتخزين النتيجة في متغير يسمى query. وفيما يلي مثال على ذلك:

   export const query = graphql ("query {} ");
   

   تسمية المتغير query هو اصطلاح هام: سيقوم Gatsby تلقائيًا بمعالجة المتغير query، وجلب البيانات وإدراجها في مكون React في نفس الملف.

3. إنشاء مكون ذي معلمات يستخدم البيانات. إنشاء مكون React باستخدام معلمة data. عند بناء التطبيق، ستتم تعبئة data بالإجابة من الاستعلام لديك. شكل النتيجة يشبه تمامًا الاستعلام الذي ألفته. داخل مقطع العرض في المكون الخاص بك يمكنك الآن القراءة من الخاصية data وتخطيط بياناتها في القالب بالطريقة التي تجدها مناسبة.

مثال على مكون إضافي: تحميل الصور من الملفات

يمكن أن تكون البيانات أي شيء تقريبًا. يساعدك Gatsby على سحب البيانات ووضعها في الرسم البياني للبيانات الخاص بها باستخدام المكونات الإضافية. المكون الإضافي gatsby-source-filesystem يطلع على نظام الملفات الخاص بك ويملأ الرسم البياني للبيانات الخاص به استنادا إلى ذلك. ما يفعله هو أنه يبحث في نظام الملفات، في مكان نحدده، ويجعل النتائج متاحة في Graph. دعونا نتعرف على طريقة تكوين هذا المكون الإضافي في gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
},

الخاصية path تخبرنا أين يجب على هذا المكون الإضافي أن يبحث عن الملفات. في حالتنا، فإنه يبحث عن __dirname، وهو دليل العمل الحالي وعلى وجه التحديد الدليل الفرعي /images. في وقت ما قبل التحويل البرمجي، سوف يفحص Gatsby الآن الدليل image/ ويجمع المعلومات حول الملفات. كما سيضيف هذه المعلومات إلى الرسم البياني للبيانات في الذاكرة من Gatsby.

إذًا، كيف يمكننا استخدام المعلومات حول الصور التي قمنا بتكوينها عبر المكون الإضافي gatsby-source-filesystem؟ بينما يقوم المكون الإضافي بفحص الدليل images/، فإنه يجمع معلومات، مثل المسار والنوع والحجم والأبعاد. ثم يمكننا الاستعلام عن هذه المعلومات من الرسم البياني للبيانات في الذاكرة واستخدامها لعرض الصورة عبر مسارها المخزن في الرسم البياني. بالإضافة إلى ذلك، يمكننا تنفيذ مختلف التلاعبات بالصورة قبل عرضها، مثل التحجيم على سبيل المثال. وظيفة التلاعب بالصورة مضمنة في Gatsby ولا يقدمها المكون الإضافي. ومع ذلك، فإن الوظيفة المضمنة وهذا المكون الإضافي يعملان بالفعل جنبًا إلى جنب لجعلها تجربة رائعة للتعامل مع أصول الصور.

أي مكونات إضافية تقوم بإضافتها إلى Gatsby تتبع هذا النمط:

1. يمكنك تنزيل المكونات الإضافية عبر NPM.
2. قم بتكوين المكون الإضافي عن طريق الملف gatsby-config.js.

متابعة