السابق

التالي

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

مكتمل

تتيح لك إمكانيات الاستعلام في Gatsby إمكانية بناء موقع ثابت من البيانات التي تم جمعها من العديد من المصادر المختلفة.

هنا، ستقوم ببناء استعلام لالتقاط بعض البيانات من ملف تكوين وتقديمها إلى إحدى الصفحات.

إضافة بيانات إلى المكون الخاص بك

طريقة تعاملك مع البيانات في Gatsby تمنحك قوة التحكم. Gatsby يمكنه الاستعلام عن البيانات من أي مكان تقريبًا، من ملفاتك، ومن البيانات الثابتة، وحتى البيانات من نقاط النهاية في واجهة برمجة التطبيقات وقواعد البيانات. للاستعلام عن البيانات، سنستخدم GraphQL.

gatsby-config.js هو المكان الذي تقوم فيه بتخزين بيانات التعريف لموقعك جنبًا إلى جنب مع تكوينات المكونات الإضافية في كائن JavaScript. هناك خاصية في كائن JavaScript سالف الذكر تسمى siteMetadata. تتم قراءة هذه الخاصية مع قيمها في الرسم البياني للبيانات كجزء من عملية البناء ويتم تخزينها في عقدة تسمى site. سترى كيف يتم الاستعلام عن البيانات عن طريق إنشاء مكون About للاستعلام عن العنوان والوصف.

فيما يلي تصوير لما تبدو عليه الخاصية siteMetadata:

siteMetadata: {
  title: `Gatsby Default Starter`,
  description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
  author: `@gatsbyjs`,
}

يمكننا إنشاء استعلام بالنظر إلى ما سبق، وقراءة البيانات وجعل أحد المكونات يعرضه.

بدء تشغيل خادم التطوير

يمكنك بدء تشغيل خادم التطوير بكتابة الأمر التالي في جذر مشروعك:

gatsby develop

يجب أن يكون لديك الآن مساران جاهزان ويعملان:

• http://localhost:8000/، حيث يتم تقديم تطبيقك
• http://localhost:8000/___graphql، حيث يتم عرض الرسم البياني للبيانات المضمنة باستخدام GraphQL

إنشاء استعلام

انتقل إلى http://localhost:8000/___graphql في المستعرض لديك حتى تتمكن من الحصول على المساعدة في إنشاء الاستعلام.

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

ارجع إلى محرر VS Code وحدد موقع الملف about.js في pages/ الدليل. قم بتغيير محتواه إلى التعليمات البرمجية التالية:

import React from 'react';
import { Link, graphql } from 'gatsby';

export default ({ data }) => (
  <React.Fragment>
    <h2>{data.site.siteMetadata.title}</h2>
    <div>{data.site.siteMetadata.description}</div>
    <Link to="/">Back to home</Link>
  </React.Fragment>
)

export const query = graphql `
  query {
    site {
      siteMetadata {
        author,
        description,
        title
      }
    }
  }
`

هنا تقوم باستدعاء الدالة graphql باستخدام الاستعلام كوسيطة وتعيينها إلى المتغير query. من المهم أن يسمى query حتى يتمكن Gatsby من معالجته ووضع النتيجة في المكون ووقت البناء.

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

احفظ الملف واستعرض إلى http://localhost:8000/about وسترى ما يلي:

لقد أضفت بيانات إلى المكون الخاص بك باستخدام استعلام GraphQL! عليك أيضا استخدام أداة استعلام GraphQL وخادم تطوير Gatsby في العملية.

متابعة