ניהול נתונים אופטימלי עם TanStack Query

TanStack Query היא ספרייה שמייעלת את שליפת הנתונים וניהול הסטייט באפליקציות פרונט. למעשה היא מספקת דרך נוחה לנהל נתונים שחוזרים מהשרת ושמירתם במטמון.

במאמר זה, נחקור כמה מהיתרונות של TanStack Query, ונספק דוגמאות קוד כדי להדגים את השימוש בה יחד עם React.

פשוט לשלוף מידע

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

הנה דוגמה לאופן שבו אתם יכולים להשתמש ב-TanStack Query כדי להביא נתונים מ-API בקומפוננטת React:

function UsersList() {
  const { isLoading, error, data } = useQuery('users', async () => {
    const response = await fetch('/api/users');
    return response.json();
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

בדוגמה זו, אנו משתמשים ב-useQuery hook כדי להביא רשימה של משתמשים. אנו מעבירים פרמטר מפתח לזיהוי שאילתה זו, ופונקציה אסינכרונית שמחזירה את הנתונים. TSQ דואגת לבצע את בקשת ה-HTTP, אחסון הנתונים במטמון וטיפול במצבי טעינה ושגיאה.

מיטוב שליפת הנתונים

שליפת נתונים לפעמים עלולה להיות גם לא יעילה, במיוחד אם אותם נתונים מתבקשים מספר פעמים. TanStack Query מייעלת את שליפת הנתונים על ידי שמירתם במטמון ועדכונם בעת ​​הצורך. הנה דוגמה לאופן שבו תוכלו להשתמש ב- TSQ כדי לייעל את שליפת הנתונים בקומפוננטת React:

import { useQuery, useMutation } from 'react-query'; function TodoList() { const { isLoading, error, data } = useQuery('todos', async () => { const response = await fetch('/api/todos'); return response.json(); }); const [addTodo] = useMutation(async text => { const response = await fetch('/api/todos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }), }); return response.json(); }, { onSuccess: () => { queryClient.invalidateQueries('todos'); }, }); if (isLoading) return <div>Loading…</div>; if (error) return <div>Error: {error.message}</div>; return ( <div> <ul> {data.map(todo => ( <li key={todo.id}>{todo.text}</li> ))} </ul> <form onSubmit={event => { event.preventDefault(); addTodo(event.target.elements.text.value); event.target.reset(); }}> <input name="text" /> <button type="submit">Add Todo</button> </form> </div> ); }

בדוגמה זו, אנו משתמשים ב-useQuery hook כדי להביא רשימת todo, וב- useMutation hook כדי להכניס פריטים חדשים לרשימה. אנו מעבירים callback של onSuccess ל-hook שבעזרת פונקציית invalidateQueries מבטל את תוקפם של הנתונים במטמון כאשר מתווספת מטלה חדשה. זה מבטיח שהרשימה המעודכנת תאוחזר בפעם הבאה שהיא תידרש, במקום להסתמך על נתונים מאוחסנים במטמון שעלולים להיות מיושנים.

Optimistic UI עם Cache

בנוסף לפשטות שבניהול הנתונים ואופטימיזציית הביצועים, TanStack Query מספקת גם תמיכה ב Optimistic UI. זה אומר שאתם יכולים לעדכן את ה- UI מיד לאחר פעולת המשתמש, עוד לפני שהשרת מגיב עם הנתונים המעודכנים.

על ידי הטמעת Optimistic UI,תוכלו לספק חווית משתמש המשנה את התחושה בנוגע לזמן עיבוד ואיחזור נתונים של האפליקציה. הנה דוגמה לאופן שבו תוכלו להשתמש ב- Optimistic UI עם TanStack Query:

import { useMutation, useQueryClient } from 'react-query';
import { updateTodo } from './api';

function TodoItem({ todo }) {
  const queryClient = useQueryClient();

  const { mutate } = useMutation(updateTodo, {
    onSuccess: (data) => {
      // Update the cache with the updated todo
      queryClient.setQueryData(['todo', data.id], data);
    },
    // Use optimistic updates
    onMutate: (updatedTodo) => {
      // Update the cache immediately with the updated todo
      queryClient.setQueryData(['todo', updatedTodo.id], updatedTodo);
      // Return the previous todo so we can revert if needed
      return { previousTodo: todo };
    },
    onError: (error, updatedTodo, context) => {
      // If there was an error, revert to the previous todo
      queryClient.setQueryData(['todo', updatedTodo.id], context.previousTodo);
    },
  });

  const handleToggleCompleted = () => {
    // Optimistically update the todo's completed status
    const updatedTodo = { ...todo, completed: !todo.completed };
    mutate(updatedTodo);
  };

  return (
    <div>
      <input type="checkbox" checked={todo.completed} onChange={handleToggleCompleted} />
      <span>{todo.text}</span>
    </div>
  );
}

בדוגמה זו, אנו משתמשים ב- useMutation כדי לעדכן פריט מתוך רשימת todo. אנחנו מעבירים פונקציה בשם updateTodo שמעדכנת את פריט ה- todo בשרת. נשתמש ב- callback של onMutate כדי לעדכן מיד את המטמון עם פריט ה-todo המעודכן, ולהחזיר את פריט ה-todo הקודם במידת הצורך אם נתקלנו בשגיאה.

עם גישה זו, ממשק המשתמש מתעדכן מיד לאחר שהמשתמש לוחץ על תיבת הסימון, ומעניק למשתמש משוב מיידי. אם השרת מגיב בשגיאה, נוכל לחזור לפריט ה- todo הקודם במטמון כדי לשמור על עקביות ממשק המשתמש.

לסיכום

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

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

בסך הכל, אם אתם מחפשים דרך לפשט ולייעל את ניהול הנתונים באפליקציית הפרונט שלכם, TanStack Query היא ספריה שבהחלט שווה לשקול שימוש בה.