Tanstack Query ، AKA React Query ، هي مكتبة شائعة لجلب البيانات في تطبيقات React. يبسط React Query عملية جلب البيانات وتخزينها في ذاكرة التخزين المؤقت وتحديثها في تطبيقات الويب. ستناقش هذه المقالة استخدام React Query للتعامل مع جلب البيانات في تطبيق React.

تثبيت وإعداد استعلام رد الفعل

يمكنك تثبيت React Query باستخدام npm أو الغزل. لتثبيته باستخدام npm ، قم بتشغيل الأمر التالي في جهازك الطرفي:

npm أنا @ tanstack / رد فعل الاستعلام

لتثبيته باستخدام الغزل ، قم بتشغيل الأمر التالي في جهازك الطرفي:

إضافة الغزل @ tanstack / رد فعل الاستعلام

بعد تثبيت مكتبة React Query ، تقوم بلف التطبيق بأكمله في ملف QueryClientProvider عنصر. ال QueryClientProvider يقوم المكون بتغليف التطبيق بالكامل ويوفر مثيلاً لملف QueryClient لجميع مكوناتها الفرعية.

ال QueryClient هي القطعة المركزية في React Query. ال QueryClient يدير كل منطق جلب البيانات والتخزين المؤقت. ال QueryClientProvider المكون يأخذ QueryClient كدعم وإتاحته لبقية التطبيق الخاص بك.

للاستفادة من QueryClientProvider و ال QueryClient في التطبيق الخاص بك ، يجب عليك استيرادها من ملف @ tanstack / رد فعل الاستعلام مكتبة:

يستورد تتفاعل من'تتفاعل';
يستورد رد فعل من"رد فعل دوم / العميل";
يستورد برنامج من'./برنامج';
يستورد {QueryClientProvider ، QueryClient} من"@ tanstack / رد-استعلام";
مقدار ثابت queryClient = جديد QueryClient () ،
ReactDOM.createRoot (وثيقة.getEementd ('جذر')).يجعل(



 </QueryClientProvider>
 </React.StrictMode>
)

فهم useQuery Hook

ال useQuery hook هي وظيفة توفرها مكتبة React Query ، والتي تجلب البيانات من خادم أو واجهة برمجة تطبيقات. يقبل كائنًا بالخصائص التالية: مفتاح الاستعلام (مفتاح الاستعلام) و الاستعلام (وظيفة ترجع وعدًا يحل البيانات التي تريد جلبها).

ال مفتاح الاستعلام يحدد الاستعلام ؛ يجب أن يكون فريدًا لكل استعلام في التطبيق الخاص بك. يمكن أن يكون المفتاح أي قيمة ، مثل سلسلة أو كائن أو مصفوفة.

لجلب البيانات باستخدام ملف useQuery هوك ، تحتاج إلى استيراده من ملف @ tanstack / رد فعل الاستعلام مكتبة تمرير أ مفتاح الاستعلام واستخدم الاستعلام لجلب البيانات من API.

على سبيل المثال:

يستورد تتفاعل من'تتفاعل';
يستورد أكسيوس من"أكسيوس";
يستورد {useQuery} من"@ tanstack / رد-استعلام";
وظيفةبيت() {
مقدار ثابت postQuery = useQuery ({
 مفتاح الاستعلام: ['دعامات'],
 الاستعلام: غير متزامن () => {
مقدار ثابت استجابة = انتظر axios.get (' https://jsonplaceholder.typicode.com/posts');
مقدار ثابت البيانات = انتظر استجابة البيانات ؛
يعود بيانات؛
 }
 })
لو(postQuery.isLoading) يعود ( <h1>تحميل...h1>)
لو(postQuery.isError) يعود (<h1>خطأ في تحميل البيانات !!!h1>)

يعود (



الصفحة الرئيسية </h1>
 {postQuery.data.map ( (غرض) => ( <صمفتاح={item.id}>{عنوان البند}ص>)) }
 </div>
 )
}
يصدّرتقصير بيت؛

ال useQuery يقوم hook بإرجاع كائن يحتوي على معلومات حول الاستعلام. ال postQuery الكائن يحتوي على تحميل, هو خطأ، و هو النجاح تنص على. ال تحميل, هو خطأ، و هو النجاح الدول إدارة دورة حياة عملية استرداد البيانات. ال postQuery.data تحتوي الخاصية على البيانات التي تم جلبها من واجهة برمجة التطبيقات.

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

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

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

لاحظ أنه يمكنك الوصول إلى ملف مفتاح الاستعلام باستخدام الاستعلام. ال الاستعلام يأخذ حجة واحدة. هذه الوسيطة عبارة عن كائن يحتوي على المعلمات المطلوبة لطلب واجهة برمجة التطبيقات. أحد هذه المعلمات هو مفتاح الاستعلام.

على سبيل المثال:

useQuery ({
 مفتاح الاستعلام: ['دعامات'],
 الاستعلام: غير متزامن (obj) => {
وحدة التحكم.log (obj.queryKey) ؛
 }
 })

التعامل مع البيانات القديمة

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

يمكنك التحكم في السرعة التي تصبح بها بياناتك قديمة والفاصل الزمني بين كل طلب جلب تلقائي من خلال استخدام ملف قديم و إعادة إحضار خيارات. ال قديم option هي خاصية تحدد عدد المللي ثانية الذي تكون فيه البيانات المخزنة مؤقتًا صالحة قبل أن تصبح قديمة.

ال إعادة إحضار option هي خاصية تحدد عدد المللي ثانية بين كل طلب جلب تلقائي لمكتبة React Query.

على سبيل المثال:

useQuery ({
 مفتاح الاستعلام: ['...'],
 الاستعلام: () => {...},
 قديم 1000;
})

في هذا المثال ، فإن ملف قديم 1000 مللي ثانية (ثانية واحدة). ستصبح البيانات التي يتم جلبها قديمة بعد ثانية واحدة ، وبعد ذلك ستقدم مكتبة React Query طلب جلب آخر إلى واجهة برمجة التطبيقات.

هنا تستخدم ملف إعادة إحضار خيار للتحكم في الفاصل الزمني بين كل طلب جلب تلقائي:

useQuery ({
 مفتاح الاستعلام: ['...'],
 الاستعلام: () => {...},
 الفاصل الزمني: 6000;
})

ال إعادة إحضار 6000 مللي ثانية (6 ثوان). سيقوم React Query تلقائيًا بتشغيل طلب جلب جديد لتحديث البيانات المخزنة مؤقتًا بعد 6 ثوانٍ.

فهم استخدام خطاف التحول

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

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

يستورد تتفاعل من'تتفاعل'
وظيفةأضف منشورا() {
مقدار ثابت[post، setPost] = React.useState ({
 عنوان: ""
 })
وظيفةالتعامل مع التغيير(حدث) {
 setPost ( (الدولة السابقة) => ({
... prevState ،
 [event.target.name]: event.target.value
 }) )
 }
يعود (



 اكتب ="نص"
 نائب ='أضف عنوانا'
 الاسم ='عنوان'
 onChange = {handleChange} 
 القيمة = {post.title}
 />
إضافة وظيفة </button>
 </form>
 )
}
يصدّرتقصير أضف منشورا؛

داخل أضف منشورا المكون هو دولة بريد التي تعمل ككائن بخاصية واحدة ، عنوان.

ال التعامل مع التغيير وظيفة بتحديث الدولة بريد عندما يكتب المستخدمون في حقول الإدخال. بعد إنشاء ملف أضف منشورا المكون ، نقوم باستيراد ملف استخدام الطفرة ربط واستخدامه لتحديث API.

على سبيل المثال:

يستورد {useMutation} من"@ tanstack / رد-استعلام"
يستورد أكسيوس من"أكسيوس";
مقدار ثابت newPostMutation = useMutation ({
 طفرة Fn: غير متزامن () => {
مقدار ثابت استجابة = انتظر axios.post ('', {
 العنوان: post.title ،
 });
مقدار ثابت البيانات = response.data ؛
يعود بيانات؛
 }
 })

ال استخدام الطفرة يتعامل الخطاف مع طلب HTTP لإنشاء منشور جديد. ال جديد ثابت يمثل وظيفة الطفرة وخيارات التكوين الخاصة بها.

ال طفرة هي وظيفة غير متزامنة ترسل طلب POST إلى نقطة نهاية API. يتضمن الطلب كائنًا يحتوي على عنوان قيمة من بريد هدف.

لتشغيل ملف طفرة، سوف تحتاج إلى الاتصال بـ newPostMutation.mutate () طريقة:

مقدار ثابت مقبض غير متزامن (حدث) => { 
 event.preventDefault () ،
 newPostMutation.mutate () ،
}
يعود (


 اكتب ="نص"
 نائب ='أضف عنوانا'
 الاسم ='عنوان'
 onChange = {handleChange} 
 القيمة = {post.title}
 />
إضافة وظيفة </button>
 </form>
 )
}

سيؤدي إرسال النموذج إلى تشغيل ملف مقبض وظيفة. ال مقبض الوظيفة هي وظيفة غير متزامنة تطلق وظيفة الطفرة newPostMutation.mutate ().

كفاءة جلب البيانات باستخدام استعلام Tanstack

تستكشف هذه المقالة كيفية التعامل مع جلب البيانات في تطبيق React باستخدام مكتبة tanstack / رد فعل الاستعلام.

توفر مكتبة tanstack / رد فعل الاستعلام أداة قوية ومرنة لجلب البيانات وتخزينها مؤقتًا في تطبيقات React. إنه سهل الاستخدام ، وقدرات التخزين المؤقت الخاصة به تجعله فعالاً وسريع الاستجابة.

سواء كنت تبني مشروعًا شخصيًا صغيرًا أو تطبيقًا مؤسسيًا واسعًا ، يمكن أن تساعدك مكتبة tanstack / رد فعل الاستعلام على إدارة البيانات وعرضها بفعالية وكفاءة. إلى جانب React ، يوفر Next.js أيضًا العديد من العمليات المضمنة ومكتبات الجهات الخارجية للتعامل مع جلب البيانات.