react query זאת ספריית javascript שבאה לספק לנו אלטרנטיבית פשוטה לניהול דאטה א-סינכרונית בממשק המשתמש שלנו (UI),
ומספקת שליטה בשליחה, קבלה , ושמירת הבקשה בעזרת שימוש במגוון פיצ'רים built in בקלות.

למה להשתמש בreact query

כדי לנהל דאטה אסינכורנית אפשר להשתמש בהרבה דרכים, אחת הדרכים זה פשוט לשלוח fetch אל השרת ולטפל בבקשה.
אבל שאנו מנהלים דאטה אסינכרונית אנו זקוקים לדברים נוספים, שהופכים את הבקשה למורכבת ומסובכת.

לדוגמא: כדי לשפר את הuser experience בהמתנה לבקשה, אנו נרצה לתת לו אינדיקטור שהמשתמש ידע שהבקשה שלו
נשלחה בהצלחה ומעובדת ברגעים אלו (Loading).
ואם חזר לנו שגיאה בבקשה אז אנו נרצה להודיע על כך למשתמש ולאפיין שגיאה שהמשתמש ידע את סיבת השגיאה(error).
ובמידה והבקשה הושלמה בהצלחה נרצה לעדכן את הסטייט שלנו שיציג את המידע אל המשתמשים,
ונשתמש בstate נוסף להצגת המידע.

זהו רק חלק מהstate שאנו צריכים לנהל בבקשה שלכאורה פשוטה,
כל הstates האלה שאנו מנהלים כדי לעבוד עם דאטה א-סינכרונית יוצרים לנו את הקוד הבא.

const [data,setData] = useState([]);
const [isLoading,setIsLoading] = useState(false);
const [error,setError] = useState('');

async function fetchData() {
    try{
    setIsLoading(true)
    const { data } = await axios.get(url);
    setData(data);
    }catch(err){
     setIsLoading(false)
     setError(err?.message)
     console.log(err);
    }
    finaly{
        setIsLoading(false)
    }
}

איך react-query מפשט ומשפר ביצועים

אז בעזרת react-query אפשר לייעל את הקוד ולספק מגוון states רחב בק ל ו ת!!.
אז אחרי שהטמענו את הספרייה בפרוייקט נחקור מגוון states בספרייה.

בקשת get אל השרת באיתחול הקומפוננטה

const {isLoading , isError , data} = useQuery({
    queryKey:['todos'],
    queryFn:async() => await axios.get(url);
})

הבקשה הזו מקבילה לבקשה שעשינו למעלה, כבר אפשר לראות את הקוד הפשוט והקצר. אבל הדבר המשמעותי יותר שהבקשה שלנו מקבלת queryKey, reactQuery - שומרת בcache את כל הבקשות שנשלחות אל השרת , ובדרך זו היא מספקת לנו שליטה
וחיסכון בשליחת בקשות הבאות אל השרת מה שגורם לשיפור ביצועים.

בקשות CRUD לאחר האיתחול

כדי לבצע את שאר בקשות הCRUD אל השרת, נצטרך להשתמש בHook נוסף מהספרייה, בשם useMutation,
useMutation מחזיר לנו אובייקט שמכיל פונקציה mutate, הפונקציה משגרת טריגר להפעלת אירוע שמפעיל את mutationFn,
שבו נמצאת הפונקציה ששולחת את הבקשה אל השרת.

לאחר שביצענו שינוי במסד נתונים נרצה להציג את השינויים בUI, של המשתמש.
לשם כך react query מספקת לנו גישה אל הclient האובייקט שמכיל את כל הבקשות get שנשלחו אל השרת,
אנו יכולים לגשת אליו באמצעות Hook ששמו זה useQueryClient,
והוא מספק לנו מגוון פיצ'רים כגון גישה אל הבקשות שנשמרות בcache, בעזרת הKey שנשמר בcache
אנו יכולים לסמן את הבקשה כinvalidate, וreact query ישלח את הבקשה פעם נוספת אל השרת כדי להביא את המידע העדכני.

זהו פיצ'ר מדהים שחוסך לנו עבודה בניהול הבקשות.

const queryClient = useQueryClient();

const { mutate } = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // לפסול ולשלוח בקשה חוזרת
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
    onError:(err) => {
      console.log(err)
    }
  })

cacheTime and staleTime

staleTime

reactQuery מספקת לנו גם מגוון פיצ'רים ששווה להכיר בשמירה בcache.
staleTime - מייצג את אורך הזמן שהבקשה תיהיה בתוקף בClient האובייקט ממקודם ששומר את הבקשות.

לstaleTime יש 2 מצבים או שהבקשה בתוקף (Fresh) או שהבקשה לא בתוקף (Stale).
מתי שהבקשה במצב של Stale ברגע הצגת הקומפוננטה, תשלח בקשה לקבלת מידע חדש והמידע השמור לנו בcache התעדכן.
וכמובן במצב ההפוך שהבקשה Fresh לא תשלח בקשה, והמידע יחזור אלינו ישירות מהcache דבר שיחסוך זמן.
המצב הDefault הוא staleTime:0, כלומר תמיד בהצגת הקומפוננטה תשלח בקשה חדשה.

הקו המנחה בבחירת זמן תוקף הבקשה, נובע מהשאלה האם המידע מהשרת מתעדכן לעיתים קרובות?
אם המידע באתר בעיקר סטטי ניתן זמן גבוה לתוקף הבקשה אם לאו נקטין את זמן השמירה.
דוגמא לשמירת תוקף בקשה:

cconst {isLoading , isError , data} = useQuery({
    queryKey:['todos'],
    queryFn:async() => await axios.get(url);
    staleTime: 5 * (60 * 1000), // 5 mins 
})

cacheTime

בעוד StaleTime בודק לנו את תוקף הבקשה(query), cacheTime מתייחס אל אקטיביות המידע בcache.
אורך הזמן שאנו מכים (hit)את הcache, להכות את הcache זה אומר שהבקשה מביאה לנו את המידע מהcache ולא מהserver.
במילים פשוטות, אם המידע שהגיע אלינו הוא מהcache אז המידע Active.
אם לא הבאנו מידע מהcache בזמן שקבענו אז המידע inActive ונמחק אוטומטית מהcache.
המצב הDefault הוא cacheTime:300000,כלומר 5 דקות אם לא נכה (hit) את הcache המידע יעלם.

מה התועלת מאחורי הזמן הארוך הדיפולטיבי של הcacheTime לעומת הstaleTime?
במידה והquery stale , אז בזמן שליחת הבקשה יוצג לנו המידע השמור בcache.

בגלל הסיבה הזאת תמיד אנחנו נצטרך לדאוג שהcacheTime יהיה גדול מהstaleTime,
כי במידה והstaleTime יהיה גדול יותר עדין נצטרך לשלוח בקשה כי המידע בcache ימחק אוטומטית.

cconst {isLoading , isError , data} = useQuery({
    queryKey:['todos'],
    queryFn:async() => await axios.get(url);
    staleTime: 5 * (60 * 1000), // 5 mins 
    cacheTime: 10 * (60 * 1000), // 10 mins 
})