البداية · فصل ٢

أول Query والمفتاح

useQuery · queryKey · queryFn
🎯 الهدف: تجيب قائمة بمفتاح ثابت، وطالب واحد بمفتاح فيه الرقم.

useQuery للقراءة. بتديله مفتاح، ودالة بترجع الطلب.

StudentsList.jsx
import { useQuery } from "@tanstack/react-query";function getStudents() {  return fetch("/api/students").then((res) => res.json());}function StudentsList() {  const { data, isPending, isError, error } = useQuery({    queryKey: ["students"],    queryFn: getStudents,  });  if (isPending) return <p>جاري التحميل...</p>;  if (isError) return <p>خطأ: {error.message}</p>;  return (    <ul>      {data.map((s) => (        <li key={s.id}>{s.name}</li>      ))}    </ul>  );}

المفتاح هو عنوان الرف

queryKey معرّف الداتا دي في الكاش. لو مكوّنين نادوا نفس المفتاح، المكتبة تشاركهم الداتا ونفس الجلب. مش طلب مرتين.

المفتاح مصفوفة. حط جواها اللي بيغيّر النتيجة.

one-student.jsx
useQuery({  queryKey: ["student", studentId],  queryFn: () => getStudent(studentId),});

كل ما studentId يتغير، دي استعلام تاني، وجلب جديد. الداتا القديمة تفضل تحت مفتاحها.

خلّصت الفصل لما

🧠 اختبر نفسك
١) مكونين استخدموا المفتاح students. كام طلب؟
طلب واحد متشارك، مش طلب لكل مكوّن.
٢) studentId بقى ٧ بدل ٣. المكتبة تعمل إيه؟
تعتبره مفتاح تاني وتجلب الطالب الجديد.
٣) حطيت الفلتر في الدالة بس ونسيته في المفتاح. إيه العطل؟
الكاش مش هيعرف إن الطلب اتغير، فالداتا المعروضة متتحدثش مع الفلتر.