كيفية استخدام ReactJS Query لجلب البيانات من واجهات برمجة التطبيقات

في هذه المدونة، سأوضح لك كيفية استخدام ReactJS Query لجلب البيانات من واجهات برمجة التطبيقات وعرضها على موقعك الإلكتروني وكيفية توليد شفرة ReactJS Query باستخدام Apidog

ما هو ReactJS Query ولماذا يجب عليك استخدامه؟

ReactJS Query هي مكتبة تساعدك في إدارة جلب البيانات والتخزين المؤقت والتحديث في تطبيقات React الخاصة بك. وهي مبنية على فكرة استعلامات، وهي وظائف لجلب البيانات من واجهة برمجة التطبيقات أو أي مصدر آخر. تتولى ReactJS Query إدارة تحميل واسترجاع والتخزين المؤقت والتعامل مع الأخطاء لهذه الاستعلامات نيابةً عنك، لذا لا داعي للقلق بشأنها.

توفر ReactJS Query أيضًا محولات، وهي وظائف تقوم بتحديث البيانات على الخادم أو أي مصدر آخر. تتولى ReactJS Query إدارة التحديثات المتفائلة، والتراجع، والتعامل مع الأخطاء لهذه المحولات نيابةً عنك، لذا لا داعي للقلق بشأنها أيضًا.

تتكامل ReactJS Query أيضًا بسلاسة مع React، باستخدام hooks ومكونات مخصصة تتيح لك الوصول إلى البيانات والتلاعب بها في مكوناتك. كما تدعم ReactJS Query ميزات مثل الترقيم، والتمرير اللانهائي، وجلب البيانات في الخلفية، والاستعلامات المعتمدة، والمزيد.

فلماذا يجب عليك استخدام ReactJS Query؟ إليك بعض فوائد استخدام ReactJS Query في تطبيقات React الخاصة بك:

• تبسيط الشفرة الخاصة بك: تقلل ReactJS Query من كمية الشفرة التي تحتاج إلى كتابتها لجلب وتخزين وتحديث البيانات في تطبيقاتك. لا تحتاج إلى استخدام Redux أو Axios أو SWR أو أي مكتبة أخرى لإدارة البيانات. يمكنك فقط استخدام ReactJS Query وhooks والمكونات الخاصة بها، وستكون جاهزًا للمضي قدمًا.
• تحسين الأداء الخاص بك: تعمل ReactJS Query على تحسين أداء تطبيقاتك من خلال تخزين البيانات مؤقتًا وتجنب الطلبات غير الضرورية. كما تتيح لك السيطرة على متى وكم مرة يتم استرجاع البيانات، وكيفية التعامل مع البيانات القديمة. تدعم ReactJS Query أيضًا ميزات مثل suspense، ووضع التزامن، والتجهيز المسبق، مما يمكن أن يعزز المزيد أداء تطبيقك.
• تعزيز تجربة المستخدم الخاصة بك: تعمل ReactJS Query على تحسين تجربة المستخدم في تطبيقاتك من خلال توفير تحميل وتحديث البيانات بسلاسة وثبات. كما تتيح لك تخصيص حالات التحميل، والخطأ، والنجاح لبياناتك، وتوفير ملاحظات لمستخدميك. تدعم ReactJS Query أيضًا ميزات مثل التحديثات المتفائلة، مما يمكن أن يجعل تطبيقك يشعر بمزيد من الاستجابة والتفاعل.

كيفية تثبيت وإعداد ReactJS

ReactJS هي مكتبة جافا سكريبت لبناء واجهات المستخدم. لتثبيت وإعداد ReactJS على جهاز الكمبيوتر الخاص بك، يمكنك اتباع هذه الخطوات:

• الخطوة 1: قم بتثبيت Node.js، وهو بيئة تشغيل جافا سكريبت، على جهاز الكمبيوتر الخاص بك. يمكنك تنزيل مثبت Node.js مجانًا من الموقع الرسمي. يُوصى بالإصدار طويل الأمد (LTS) حتى لو كان الإصدار الحالي يحتوي على أحدث الميزات.
• الخطوة 2: قم بتثبيت ReactJS باستخدام create-react-app، وهو أداة تثبت جميع التبعيات لبناء وتشغيل تطبيق ReactJS كامل. يمكنك استخدام npm أو yarn، وهما مدراء الحزم لـ Node.js، للقيام بذلك. على سبيل المثال، يمكنك تشغيل هذا الأمر في terminal الخاص بك:

npx create-react-app my-app

سيقوم هذا الأمر بإنشاء دليل يسمى my-app داخل المجلد الحالي، وتوليد هيكل المشروع الأولي وتثبيت التبعيات الانتقالية.

• الخطوة 3: ابدأ خادم التطوير وافتح تطبيقك في المتصفح. يمكنك استخدام npm أو yarn للقيام بذلك. على سبيل المثال، يمكنك تشغيل هذه الأوامر في terminal الخاص بك:

cd my-app
npm start

ستبدأ هذه الأوامر خادم التطوير وتفتح تطبيقك في المتصفح على http://localhost:3000/. يمكنك تعديل الملفات في مجلد src ورؤية التغييرات في المتصفح.

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

كيفية إنشاء واستخدام الاستعلامات باستخدام ReactJS Query

الآن بعد أن عرفت كيفية تثبيت وإعداد ReactJS Query، دعنا نرى كيفية إنشاء واستخدام الاستعلامات باستخدام ReactJS Query. الاستعلامات هي المفهوم الأساسي لـ ReactJS Query، وهي الطريقة الرئيسية لجلب وعرض البيانات من واجهات برمجة التطبيقات.

كما رأينا في القسم السابق، يمكنك استخدام useQuery hook لإنشاء واستخدام الاستعلامات في مكونات React الخاصة بك. يأخذ useQuery hook وسيطين: مفتاح استعلام ودالة استعلام. مفتاح الاستعلام هو معرف فريد لاستعلامك، ودالة الاستعلام هي دالة جلب البيانات من نقطة نهاية واجهة برمجة التطبيقات وإرجاع وعد.

يُرجع useQuery hook كائنًا يحتوي على الخصائص التالية:

• data: البيانات التي تم جلبها من نقطة نهاية واجهة برمجة التطبيقات. تكون undefined عندما تكون الاستعلام قيد التحميل أو بها خطأ.
• status: حالة الاستعلام. يمكن أن تكون واحدة من القيم التالية: 'idle'، 'loading'، 'error'، أو 'success'.
• error: الخطأ الذي يتم إلقاؤه بواسطة دالة الاستعلام. تكون undefined عندما تكون الاستعلام قيد التحميل أو بها نجاح.
• isIdle: قيمة منطقية تشير إلى ما إذا كانت الاستعلام في حالة خمول. تكون true عندما لا تكون الاستعلام مفعلة أو لم تبدأ بعد في جلب البيانات.
• isLoading: قيمة منطقية تشير إلى ما إذا كانت الاستعلام قيد التحميل. تكون true عندما تكون الاستعلام تجلب البيانات من نقطة نهاية واجهة برمجة التطبيقات.
• isError: قيمة منطقية تشير إلى ما إذا كانت الاستعلام بها خطأ. تكون true عندما تقوم دالة الاستعلام بإلقاء خطأ أو رفض الوعد.
• isSuccess: قيمة منطقية تشير إلى ما إذا كانت الاستعلام بها نجاح. تكون true عندما تحل دالة الاستعلام الوعد وترجع البيانات.

كيفية جلب البيانات باستخدام ReactJS Query

الميزة الأساسية لـ ReactJS Query هي جلب البيانات باستخدام الاستعلامات. الاستعلامات هي وظائف تجلب البيانات من واجهة برمجة التطبيقات أو أي مصدر آخر. توفر ReactJS Query لك خاصية hook مخصصة تسمى useQuery، والتي تتيح لك استخدام الاستعلامات في مكوناتك.

يأخذ useQuery hook وسيطين: مفتاح استعلام ودالة استعلام. مفتاح الاستعلام هو معرف فريد لاستعلامك، والذي يمكن أن يكون سلسلة نصية أو مصفوفة. ودالة الاستعلام هي دالة تُرجع وعدًا يُحل مع البيانات التي تريد جلبها.

على سبيل المثال، لنفترض أنك تريد جلب قائمة من المنشورات من واجهة برمجة تطبيقات وهمية باستخدام ReactJS Query. يمكنك إنشاء دالة استعلام تستخدم واجهة برمجة التطبيقات لجلب البيانات:

// تعريف دالة استعلام تجلب المنشورات
const fetchPosts = async () => {
  // استخدام واجهة برمجة التطبيقات لجلب البيانات
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  // تحليل الاستجابة على شكل JSON
  const data = await response.json()
  // إرجاع البيانات
  return data
}

ثم، يمكنك استخدام useQuery hook في مكونك، مع تمرير مفتاح الاستعلام ‘posts’ ودالة الاستعلام fetchPosts:

// استخدام useQuery hook لجلب المنشورات
const { data, isLoading, isError, error } = useQuery('posts', fetchPosts)

تُرجع useQuery hook كائنًا يحتوي على العديد من الخصائص التي يمكنك استخدامها للوصول إلى البيانات والتلاعب بها. أهم ما يميزها:

• data: البيانات التي ترجعها دالة الاستعلام، أو undefined إذا كانت الاستعلام قيد التحميل أو بها خطأ.
• isLoading: قيمة منطقية تشير إلى ما إذا كانت الاستعلام قيد التحميل أم لا.
• isError: قيمة منطقية تشير إلى ما إذا كانت الاستعلام بها خطأ أم لا.
• error: كائن الخطأ الذي ترجعها دالة الاستعلام، أو undefined إذا كانت الاستعلام قيد التحميل أو ليس بها خطأ.

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

// عرض المكون بناءً على حالة الاستعلام
return (
  <div>
    {isLoading && <div>جاري التحميل...</div>}
    {isError && <div>خطأ: {error.message}</div>}
    {data && (
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    )}
  </div>
)

هكذا تقوم بجلب البيانات باستخدام ReactJS Query. ستقوم ReactJS Query تلقائيًا بتخزين البيانات مؤقتًا لك، وستعيد جلبها عندما يتم تركيب المكون أو فك تركيبه أو يتغير مفتاح الاستعلام. يمكنك أيضًا تخصيص سلوك الاستعلام باستخدام خيارات مختلفة، مثل staleTime، وrefetchOnWindowFocus، وretry، والمزيد. يمكنك العثور على القائمة الكاملة من الخيارات ووصفها في وثائق ReactJS Query.

كيفية استخدام Apidog لتوليد شفرة عميل ReactJS Query

Apidog هي منصة قائمة على الويب تساعدك في اكتشاف واختبار ودمج واجهات برمجة التطبيقات بسهولة. واحدة من الميزات التي يقدمها Apidog هي القدرة على توليد شفرة عميل Fetch بنقرة واحدة، بناءً على مواصفات واجهة برمجة التطبيقات التي تقدمها أو تختارها.

• انقر على زر " واجهة برمجة التطبيقات جديدة" على لوحة المعلومات أو اختر واجهة برمجة تطبيقات موجودة من القائمة.

• انقر على "توليد شفرة العميل". سيستخدم Apidog محرك OpenAPI Generator لتوليد شفرة عميل Fetch لواجهة برمجة التطبيقات الخاص بك، مطابقة النقاط النهائية وهياكل البيانات التي حددتها أو اخترتها.

• سترى نافذة منبثقة تحتوي على الشفرة المولدة، التي يمكنك نسخها إلى الحافظة الخاصة بك.

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

الخاتمة

ReactJS Query هي مكتبة قوية ومتعددة الاستخدامات يمكن أن تجعل تجربة جلب البيانات لدينا أسهل وأفضل بكثير. يمكن أن تعمل مع أي نقطة نهاية واجهة برمجة تطبيقات ترجع بيانات JSON، ويمكن أن تتكامل مع أي مكون أو مكتبة React.

في هذه المدونة، تعلمنا كيفية استخدام ReactJS Query لجلب البيانات من واجهات برمجة التطبيقات وعرضها على موقعنا الإلكتروني. رأينا كيف تبسط ReactJS Query جلب البيانات والتخزين المؤقت لتطبيقات React، وكيفية توليد شفرة ReactJS Query باستخدام Apidog. شكرًا لقراءتك وتمنياتنا لك بالتوفيق في البرمجة!