Vereinfachen Sie die Datenverwaltung in React mit React Query

React Query ist eine Bibliothek, die die Verwaltung von Daten in React-Anwendungen vereinfacht. Es bietet eine Reihe von Hooks und Dienstprogrammen, die das Abrufen, Zwischenspeichern und Aktualisieren von Daten einfach und effizient machen. Mit React Query können Sie die Menge an Boilerplate-Code reduzieren, der für die Verarbeitung von Daten in Ihren React-Komponenten erforderlich ist, und Ihre Anwendung leistungsfähiger machen.

Abrufen von Daten mit React Query

React Query stellt einen Hook namens bereit useQuery, der es einfach macht, Daten von einem Server abzurufen. Der useQueryHook übernimmt eine Funktion, die ein Promise zurückgibt, das mit den Daten aufgelöst wird. Wenn Sie den Hook aufrufen, verwaltet React Query automatisch die Lade- und Fehlerzustände für Sie.

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 speichert automatisch die von der fetchDataFunktion zurückgegebenen Daten. Wenn Sie den useQueryHook erneut mit demselben Abfrageschlüssel aufrufen, gibt React Query die zwischengespeicherten Daten zurück, anstatt sie erneut abzurufen.

Aktualisieren von Daten mit React Query

React Query bietet auch einen Hook namens useMutation, der es einfach macht, Daten auf einem Server zu aktualisieren. Der useMutationHook übernimmt eine Funktion, die ein Promise zurückgibt, das mit den aktualisierten Daten aufgelöst wird. Wenn Sie den Hook aufrufen, verwaltet React Query automatisch die Lade- und Fehlerzustände für Sie.

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>
  );
}

Wenn die mutateFunktion mit einem Objekt aufgerufen wird, sendet React Query eine Anfrage mit den aktualisierten Daten an den Server. Wenn die Anfrage erfolgreich ist, aktualisiert React Query den Cache mit den neuen Daten.

Abschluss

React Query ist eine leistungsstarke Bibliothek, die die Verwaltung von Daten in React-Anwendungen vereinfacht. Mit React Query können Sie Daten einfach abrufen und aktualisieren und gleichzeitig die Menge an Boilerplate-Code reduzieren, die für die Handhabung von Daten in Ihren React-Komponenten erforderlich ist. Egal, ob Sie eine einfache oder eine komplexe Anwendung erstellen, React Query kann Ihnen dabei helfen, Ihre Anwendung leistungsfähiger und wartungsfreundlicher zu machen.

Beifall!!!