Tanstack Query, AKA React Query, היא ספרייה פופולרית לאיסוף נתונים ביישומי React. React Query מפשט את תהליך האחזור, האחסון במטמון ועדכון נתונים ביישומי אינטרנט. מאמר זה ידון בשימוש ב-React Query לטיפול באחזור נתונים באפליקציית React.

התקנה והגדרה של React Query

אתה יכול להתקין את React Query באמצעות npm או חוט. כדי להתקין אותו באמצעות npm, הפעל את הפקודה הבאה בטרמינל שלך:

npm i @tanstack/react-query

כדי להתקין אותו באמצעות חוט, הפעל את הפקודה הבאה בטרמינל שלך:

yarn הוסף @tanstack/react-query

לאחר התקנת ספריית React Query, אתה עוטף את כל האפליקציה ב- QueryClientProvider רְכִיב. ה QueryClientProvider רכיב עוטף את כל היישום שלך ומספק מופע של QueryClient לכל מרכיבי הילד שלה.

ה QueryClient הוא החלק המרכזי של React Query. ה QueryClient מנהל את כל ההיגיון של אחזור ושמירה במטמון. ה QueryClientProvider רכיב לוקח את QueryClient כאביזר והופך אותו לזמין לשאר היישום שלך.

כדי לעשות שימוש ב QueryClientProvider וה QueryClient ביישום שלך, עליך לייבא אותם מה- @tanstack/react-query סִפְרִיָה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא ReactDOM מ'react-dom/client';
יְבוּא אפליקציה מ'./אפליקציה';
יְבוּא { QueryClientProvider, QueryClient } מ'@tanstack/react-query';
const queryClient = חָדָשׁ QueryClient();
ReactDOM.createRoot(מסמך.getEementd('שורש')).לְדַקלֵם(



 </QueryClientProvider>
 </React.StrictMode>
)

הבנת השימוש ב-Query Hook

ה useQuery hook היא פונקציה המסופקת על ידי ספריית React Query, אשר שואבת נתונים משרת או API. הוא מקבל אובייקט עם המאפיינים הבאים: queryKey (המפתח של השאילתה) ו queryFn (פונקציה שמחזירה הבטחה שפותרת את הנתונים שאתה רוצה להביא).

ה queryKey מזהה את השאילתה; זה חייב להיות ייחודי עבור כל שאילתה ביישום שלך. המפתח יכול להיות כל ערך, כגון מחרוזת, אובייקט או מערך.

כדי להביא נתונים באמצעות ה useQuery הוק, אתה צריך לייבא אותו מה- @tanstack/react-query ספריה, לעבור א queryKey ולהשתמש ב queryFn כדי להביא את הנתונים מ-API.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא אקסיוס מ'אקסיות';
יְבוּא { useQuery } מ'@tanstack/react-query';
פוּנקצִיָהבית() {
const postQuery = useQuery({
 queryKey: ['פוסטים'],
 queryFn: אסינכרון () => {
const תגובה = לְהַמתִין axios.get(' https://jsonplaceholder.typicode.com/posts');
const נתונים = לְהַמתִין response.data;
לַחֲזוֹר נתונים;
 }
 })
אם( postQuery.isLoading ) לַחֲזוֹר ( <h1>טוען...h1>)
אם( postQuery.isError ) לַחֲזוֹר (<h1>שגיאה בטעינת נתונים!!!h1>)

לַחֲזוֹר (



בית</h1>
 { postQuery.data.map( (פריט) => ( <עמַפְתֵחַ={מספר זיהוי של הפריט}>{כותרת פריט}ע>)) }
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל בית;

ה useQuery hook מחזיר אובייקט המכיל מידע על השאילתה. ה postQuery האובייקט מכיל את טוען, isError, ו הוא הצלחה מדינות. ה טוען, isError, ו הוא הצלחה מדינות מנהלות את מחזור החיים של תהליך אחזור הנתונים. ה postQuery.data המאפיין מכיל את הנתונים שנלקחו מה-API.

ה טוען state הוא ערך בוליאני המציין אם השאילתה טוענת נתונים כעת. כאשר טוען המצב נכון, השאילתה בעיצומה והנתונים המבוקשים אינם זמינים.

ה isError state הוא גם ערך בוליאני המציין אם אירעה שגיאה במהלך אחזור הנתונים. מתי isError נכון, השאילתה לא הצליחה לאחזר נתונים.

ה הוא הצלחה state הוא ערך בוליאני המציין אם השאילתה אחזרה נתונים בהצלחה. מתי הוא הצלחה נכון, אתה יכול להציג את הנתונים שאוחזרו ביישום שלך.

שים לב שאתה יכול לגשת ל queryKey משתמש ב queryFn. ה queryFn לוקח טיעון בודד. ארגומנט זה הוא אובייקט המכיל את הפרמטרים הנדרשים עבור בקשת ה-API. אחד מהפרמטרים הללו הוא queryKey.

לדוגמה:

useQuery({
 queryKey: ['פוסטים'],
 queryFn: אסינכרון (obj) => {
לְנַחֵם.log( obj.queryKey );
 }
 })

התמודדות עם נתונים מיושנים

שאילתת React מספקת דרכים רבות להתמודד עם נתונים מיושנים. ספריית ה-React Query מבטיחה לבצע אוטומטית בקשת אחזור חדשה ל-API שלך כשהנתונים המאוחזרים מיושנים. זה מבטיח שאתה מציג ללא הרף את הנתונים המעודכנים ביותר.

אתה יכול לשלוט באיזו מהירות הנתונים שלך הופכים מיושנים ואת מרווח הזמן בין כל בקשת אחזור אוטומטית על ידי שימוש ב staleTime ו retchInterval אפשרויות. ה staleTime option הוא מאפיין המציין את מספר האלפיות השניות שהנתונים המאוחסנים בקובץ השמור תקפים לפני שהם מיושנים.

ה retchInterval option הוא מאפיין שמציין את מספר האלפיות השניות בין כל בקשת אחזור אוטומטית של ספריית React Query.

לדוגמה:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 staleTime: 1000;
})

בדוגמה זו, ה staleTime הוא 1000 מילישניות (שנייה אחת). הנתונים שיאוחזרו יהפכו מיושנים לאחר שנייה אחת, ואז ספריית React Query תבצע בקשת אחזור נוספת ל-API.

כאן אתה משתמש ב- retchInterval אפשרות לשלוט במרווח הזמן בין כל בקשת אחזור אוטומטית:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 refetchInterval: 6000;
})

ה retchInterval הוא 6000 אלפיות שניות (6 שניות). שאילתת React תפעיל אוטומטית בקשת אחזור חדשה לעדכון הנתונים המאוחסנים במטמון לאחר 6 שניות.

הבנת השימוש ב-Mutation Hook

ה useMutation hook הוא כלי רב עוצמה בספריית React Query. זה מבצע פעולה אסינכרונית מוטציות, כגון יצירה או עדכון נתונים בשרת. משתמש ב useMutation hook, אתה יכול בקלות לעדכן את מצב היישום וממשק המשתמש שלך בהתבסס על התגובה של המוטציה.

להלן, יצרנו AddPost רכיב שהופך את א טופס עם שדה קלט וכפתור שלח. רכיב טופס זה ישתמש ב-useMutation hook כדי לעדכן את המצב:

יְבוּא לְהָגִיב מ'לְהָגִיב'
פוּנקצִיָהAddPost() {
const[post, setPost] = React.useState({
 כותרת: ""
 })
פוּנקצִיָהhandleChange(מִקרֶה) {
 setPost( (prevState) => ({
 ...prevState,
 [event.target.name]: event.target.value
 }) )
 }
לַחֲזוֹר (



 סוג="טֶקסט"
 מציין מיקום='הוסף כותרת'
 שם='כותרת'
 onChange={handleChange} 
 value={post.title}
 />
הוסף פוסט</button>
 </form>
 )
}
יְצוּאבְּרִירַת מֶחדָל AddPost;

בתוך ה AddPost המרכיב הוא מדינה הודעה המשמש כאובייקט בעל תכונה אחת, כותרת.

ה handleChange הפונקציה מעדכנת את המצב הודעה בכל פעם שמשתמשים מקלידים בשדות הקלט. לאחר יצירת ה AddPost רכיב, אנו מייבאים את useMutation הוק והשתמש בו כדי לעדכן את ה-API.

לדוגמה:

יְבוּא { useMutation } מ'@tanstack/react-query'
יְבוּא אקסיוס מ'אקסיות';
const newPostMutation = useMutation({
 mutationFn: אסינכרון () => {
const תגובה = לְהַמתִין axios.post('', {
 כותרת: post.title,
 });
const data = response.data;
לַחֲזוֹר נתונים;
 }
 })

ה useMutation hook מטפל בבקשת HTTP ליצירת פוסט חדש. ה newPostMutation קבוע מייצג את פונקציית המוטציה ואת אפשרויות התצורה שלה.

ה mutationFn היא פונקציה אסינכרונית ששולחת בקשת POST לנקודת הקצה של ה-API. הבקשה כוללת אובייקט המכיל את כותרת ערך מה הודעה לְהִתְנַגֵד.

כדי להפעיל את mutationFn, תצטרך להתקשר ל newPostMutation.mutate() שיטה:

const handleSubmit = אסינכרון (אירוע) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
לַחֲזוֹר (


 סוג="טֶקסט"
 מציין מיקום='הוסף כותרת'
 שם='כותרת'
 onChange={handleChange} 
 value={post.title}
 />
הוסף פוסט</button>
 </form>
 )
}

שליחת הטופס תפעיל את handleSubmit פוּנקצִיָה. ה handleSubmit פונקציה היא פונקציה אסינכרונית שמפעילה את פונקציית המוטציה newPostMutation.mutate().

אחזור נתונים יעיל עם שאילתת Tanstack

מאמר זה בוחן כיצד לטפל באחזור נתונים באפליקציית React באמצעות ספריית ה-tanstack/react-query.

ספריית ה-tanstack/react-query מספקת כלי רב עוצמה וגמיש לאחזור ושמירה במטמון ביישומי React. זה קל לשימוש, ויכולות המטמון שלו הופכות אותו ליעיל ומגיב.

בין אם אתה בונה פרויקט אישי קטן או יישום ארגוני נרחב, ספריית ה-tanstack/react-query יכולה לעזור לך לנהל ולהציג נתונים בצורה יעילה ויעילה. יחד עם React, Next.js מספקת גם מספר תהליכים מובנים וספריות צד שלישי לטיפול באחזור נתונים.