Uprość zarządzanie danymi w React dzięki React Query

React Query to biblioteka upraszczająca zarządzanie danymi w aplikacjach React. Zapewnia zestaw haków i narzędzi, dzięki którym pobieranie, buforowanie i aktualizowanie danych jest łatwe i wydajne. Dzięki React Query możesz zmniejszyć ilość kodu standardowego potrzebnego do obsługi danych w komponentach React i zwiększyć wydajność aplikacji.

Pobieranie danych za pomocą React Query

React Query udostępnia hak o nazwie useQuery, który ułatwia pobieranie danych z serwera. Hak useQueryprzyjmuje funkcję, która zwraca Obietnicę, która rozwiązuje się z danymi. Gdy wywołasz haka, React Query automatycznie zarządza stanami ładowania i błędami za Ciebie.

import { useQuery } from 'react-query';

function MyComponent() {
  const { isLoading, error, data } = useQuery('myData', fetchData);

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

React Query automatycznie buforuje dane zwrócone przez fetchDatafunkcję. Jeśli ponownie wywołasz useQueryhak z tym samym kluczem zapytania, React Query zwróci dane z pamięci podręcznej zamiast pobierania ich ponownie.

Aktualizowanie danych za pomocą React Query

React Query zapewnia również hak o nazwie useMutation, który ułatwia aktualizację danych na serwerze. Hak useMutationprzyjmuje funkcję, która zwraca Obietnicę, która rozwiązuje się ze zaktualizowanymi danymi. Gdy wywołasz haka, React Query automatycznie zarządza stanami ładowania i błędami za Ciebie.

import { useMutation } from 'react-query';

function MyComponent() {
  const [mutate, { isLoading, error, data }] = useMutation(updateData);

  const handleButtonClick = () => {
    mutate({ id: 123, name: 'New Name' });
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return (
    <div>
      <button onClick={handleButtonClick}>Update Data</button>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

Gdy mutatefunkcja zostanie wywołana z obiektem, React Query wyśle ​​żądanie do serwera ze zaktualizowanymi danymi. Jeśli żądanie się powiedzie, React Query zaktualizuje pamięć podręczną o nowe dane.

Wniosek

React Query to potężna biblioteka, która upraszcza zarządzanie danymi w aplikacjach React. Dzięki React Query możesz z łatwością pobierać i aktualizować dane, jednocześnie zmniejszając ilość kodu standardowego potrzebnego do obsługi danych w komponentach React. Niezależnie od tego, czy tworzysz prostą, czy złożoną aplikację, React Query może pomóc Ci uczynić aplikację bardziej wydajną i łatwiejszą w utrzymaniu.

Dzięki!!!