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

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

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

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

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

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

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

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

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

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

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

npx create-react-app my-app

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

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

cd my-app
npm start

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

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

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

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

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

يعيد useQuery كائنًا يحتوي على الخصائص التالية:

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

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

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

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

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

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

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

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

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

• 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 بنقرة واحدة، استنادًا إلى مواصفات واجهة برمجة التطبيقات التي تقدمها أو تختارها.

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

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

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

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

الخاتمة

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

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