Gatsby هو منشئ مواقع ثابت قوي يعتمد على React والذي يمكّن المطورين من إنشاء مواقع ويب وتطبيقات سريعة وقابلة للتطوير. أحد الجوانب الرئيسية لبناء مواقع ويب فعالة هو عرض البيانات للمستخدمين بكفاءة. في Gatsby، يمكن تحقيق عرض البيانات باستخدام مجموعة من GraphQL ومكونات React ومصادر بيانات الطرف الثالث مثل أنظمة إدارة المحتوى بدون رأس وواجهات برمجة التطبيقات والملفات المحلية.

في هذه المقالة، سنستكشف عملية جلب البيانات وعرضها في تطبيق Gatsby، مع التركيز على المبادئ والاستراتيجيات الأساسية وأفضل الممارسات لتقديم البيانات بشكل فعال.

1. فهم طبقة بيانات غاتسبي

طبقة بيانات Gatsby مبنية على GraphQL، والتي تعمل كلغة استعلام تسمح للمطورين بطلب البيانات التي يحتاجونها بالضبط. يتكامل Gatsby بشكل عميق مع GraphQL، مما يجعل من السهل سحب البيانات من مصادر مختلفة مثل ملفات Markdown أو ملفات JSON أو واجهات برمجة التطبيقات الخارجية وعرضها داخل مكونات React.

تتضمن خطوات عرض البيانات في Gatsby عادةً ما يلي:

• جلب البيانات من مصدر خارجي أو داخلي
• هيكلة البيانات باستخدام استعلامات GraphQL
• عرض البيانات باستخدام مكونات React

2. إعداد استعلامات GraphQL في Gatsby

يأتي Gatsby مزودًا بطبقة GraphQL مدمجة تتيح لك الوصول إلى مصادر البيانات الخاصة بك بسهولة. يمكنك استخدام استعلامات GraphQL لاستخراج البيانات من:

• الملفات المحلية مثل Markdown أو JSON
• منصات CMS مثل Contentful أو Strapi أو WordPress
• واجهات برمجة التطبيقات وقواعد البيانات

المثال 1: الاستعلام عن بيانات تخفيض السعر

لنفترض أنك تقوم بإنشاء مدونة، وقمت بكتابة مشاركاتك في ملفات Markdown. يمكنك الاستعلام عن ملفات Markdown باستخدام البرنامج الإضافي gatsby-transformer-remark الخاص بـ Gatsby وعرض المحتوى في مكونات React الخاصة بك.

export const query = graphql`
  query BlogPostQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            date
          }
          excerpt
        }
      }
    }
  }
`

يمكنك بعد ذلك عرض منشورات المدونة التي تم جلبها في المكون الخاص بك باستخدام JSX:

const Blog = ({ data }) => (
  

    {data.allMarkdownRemark.edges.map(({ node }) => (
      

        
{node.frontmatter.title}
        
{node.excerpt}
        {node.frontmatter.date}
      
    ))}
  
)

المثال 2: الاستعلام عن البيانات من نظام إدارة المحتوى (CMS) (المحتوى)

إذا كنت تستخدم نظام إدارة محتوى بدون رأس مثل Contentful، فيمكنك الاستعلام عن بياناتك عن طريق تثبيت المكون الإضافي gatsby-source-contentful، الذي يدمج Gatsby مع واجهة برمجة تطبيقات Contentful. فيما يلي مثال لجلب منشورات المدونة من Contentful:

export const query = graphql`
  query ContentfulBlogPostQuery {
    allContentfulBlogPost {
      edges {
        node {
          title
          publishedDate(formatString: "MMMM Do, YYYY")
          body {
            childMarkdownRemark {
              excerpt
            }
          }
        }
      }
    }
  }
`

يمكنك الآن عرض البيانات بشكل مشابه لما تفعله مع Markdown:

const Blog = ({ data }) => (
  

    {data.allContentfulBlogPost.edges.map(({ node }) => (
      

        
{node.title}
        
{node.body.childMarkdownRemark.excerpt}
        {node.publishedDate}
      
    ))}
  
)

3. تقديم البيانات الخارجية عبر واجهات برمجة التطبيقات

على الرغم من أن مصادر البيانات الثابتة لـ Gatsby (مثل Markdown وCMS) رائعة، إلا أنه قد تكون هناك حالات تحتاج فيها إلى جلب بيانات خارجية ديناميكيًا من واجهات برمجة التطبيقات. يمكنك استخدام الخطاف useEffect في React لجلب البيانات وعرضها على جانب العميل. على سبيل المثال، إليك كيفية جلب البيانات من واجهة برمجة تطبيقات خارجية مثل نقطة نهاية REST أو خدمة GraphQL:

import React, { useEffect, useState } from "react";

const DataDisplay = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an external API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    

      {data.map(item => (
        

          
{item.name}
          
{item.description}
        
      ))}
    
  );
};

export default DataDisplay;

4. تحسين عرض البيانات باستخدام غاتسبي

يقدم Gatsby عدة طرق لتحسين عرض البيانات وتحسين الأداء:

ترقيم الصفحات

عند عرض مجموعات بيانات كبيرة، من الضروري ترقيم البيانات لتحسين أوقات تحميل الصفحة وجعل المحتوى أكثر قابلية للإدارة. يمكن استخدام واجهة برمجة تطبيقات createPages الخاصة بـ Gatsby لإنشاء صفحات مرقّمة بشكل ديناميكي.

const Blog = ({ pageContext, data }) => {
  const { currentPage, numPages } = pageContext;

  return (
    

      {data.allMarkdownRemark.edges.map(({ node }) => (
        

          
{node.frontmatter.title}
          
{node.excerpt}
        
      ))}

      
  );
};

تحميل كسول

التحميل البطيء هو أسلوب يؤجل تحميل الموارد غير الأساسية، مما يؤدي إلى تحسين الأداء. على سبيل المثال، يمكن لصورة gatsby الخاصة بـ Gatsby تحسين الصور، ويمكن لـ React.lazy أو الواردات الديناميكية تأجيل تحميل المكونات.

import { LazyLoadImage } from 'react-lazy-load-image-component';

إنشاء موقع ثابت

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

5. تصور البيانات مع غاتسبي

يتضمن عرض البيانات بشكل فعال في بعض الأحيان تصورات مثل المخططات والرسوم البيانية. يمكنك دمج مكتبات تصور البيانات، مثل Chart.js أو D3.js، في مشروع Gatsby الخاص بك لتقديم تمثيلات مرئية للبيانات.

import { Line } from "react-chartjs-2";

const data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Sales',
      data: [65, 59, 80, 81, 56],
      fill: false,
      backgroundColor: 'rgb(75, 192, 192)',
      borderColor: 'rgba(75, 192, 192, 0.2)',
    },
  ],
};

const MyChart = () => (
  

    
Sales Over Time
    
);

خاتمة

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