useQuery useQuery لجلب البيانات

آخر تحديث: 2026-11-03

useQuery useQuery لجلب البيانات

يدير useQuery من TanStack Query كامل «دورة حياة الطلب + الذاكرة»: يُزيل التكرار تلقائيًا، ويجلب في الخلفية، وstaleTime يتحكّم في حداثة البيانات، وinvalidateQueries يُبطل ليعاد الجلب. يُعلن المكوّن فقط «ما البيانات التي أحتاجها» ويترك الباقي للمكتبة، فلا يُجلب ذات الاستعلام مرتين لمكوّنين.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { useQuery } from '@tanstack/react-query'

const { data, isPending, isError, error, refetch } = useQuery({
  queryKey: ['todo', id],          // cache key: a change switches to or refetches the query
  queryFn: () => fetch('/api/todos/' + id).then(r => r.json()),
  staleTime: 30_000                // fresh for 30 seconds, no refetch needed
})
// isPending: first load without a cache; isFetching: any background refetch

⚙️ المعاملات

القيمة المرجعة：يُعيد حالة الاستعلام مثل { data, isPending, isError, error, refetch, isFetching }: يحمل data أحدث البيانات، وrefetch يُبطل القيد ويعيد الجلب يدويًا.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

أول قراءة تنتظر 0.8 ثانية؛ وبعدها «اقرأ» يظهر لحظيًا لإصابة ذاكرة Map؛ و«refetch» يفرض طلبًا جديدًا ويحدّث الذاكرة — الأفكار الجوهرية خلف staleTime والإبطال (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من البيانات والهندسة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

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

من نحن