Datenverwaltung mit React Query und Datenbanken: Ein Best Practices-Leitfaden

Datenverwaltung mit React Query und Datenbank: Best Practice Guide

Zitat:
In der modernen Frontend-Entwicklung ist die Verwaltung von Daten eine sehr wichtige Aufgabe. Da die Anforderungen der Benutzer an hohe Leistung und Stabilität immer weiter steigen, müssen wir darüber nachdenken, wie wir Anwendungsdaten besser organisieren und verwalten können. React Query ist ein leistungsstarkes und benutzerfreundliches Datenverwaltungstool, das eine einfache und flexible Möglichkeit zum Abrufen, Aktualisieren und Zwischenspeichern von Daten bietet. In diesem Artikel werden Best Practices für die Datenverwaltung mithilfe von React Query und einer Datenbank erläutert und spezifische Codebeispiele bereitgestellt.

1. React Query und zugehörige Abhängigkeiten installieren
Zuerst müssen wir React Query und zugehörige Abhängigkeiten installieren. Diese Pakete können mit npm oder Yarn installiert werden.

$ npm install react-query react-router-dom

2. React QueryProvider konfigurieren
In der Eintragsdatei müssen wir React QueryProvider zur Anwendung hinzufügen. Der React QueryProvider ist für die Bereitstellung von datenverwaltungsbezogenem Kontext für Komponenten in Ihrer Anwendung verantwortlich.

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

3. Eine Abfrageanfrage initiieren
In React Query können wir den useQuery-Hook verwenden, um eine Abfrageanfrage zu initiieren. Der erste Parameter des useQuery-Hooks ist eine Zeichenfolge, die den Schlüssel der abzurufenden Daten darstellt. Der zweite Parameter ist eine asynchrone Funktion, die zum tatsächlichen Abrufen der Daten verwendet wird.

import { useQuery } from 'react-query';

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

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

4. Daten aktualisieren
Zusätzlich zum Abrufen von Daten bietet React Query auch den useMutation-Hook zur Verarbeitung von Datenaktualisierungen. Der useMutation-Hook akzeptiert eine asynchrone Funktion, die zum tatsächlichen Aktualisieren der Daten verwendet wird. Es wird ein Array zurückgegeben, bei dem das erste Element eine Funktion ist, die den Aktualisierungsvorgang auslöst. Darüber hinaus können wir einige Optionen verwenden, um das Verhalten beim Initiieren einer Update-Anfrage zu steuern.

import { useMutation } from 'react-query';

function UpdateUserForm({ user }) {
  const mutation = useMutation(updatedUser => {
    return fetch(`/api/users/${user.id}`, {
      method: 'PUT',
      body: JSON.stringify(updatedUser),
    });
  });

  const handleSubmit = event => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const updatedUser = {
      name: formData.get('name'),
      age: formData.get('age'),
    };
    mutation.mutate(updatedUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="number" name="age" defaultValue={user.age} />
      <button type="submit">Update</button>
    </form>
  );
}

5. Daten zwischenspeichern
React Query speichert die abgefragten Daten standardmäßig automatisch zwischen und aktualisiert sie bei Bedarf. Wir können den Hook „useQueryClient“ und die Methode „queryClient.setQueryData“ verwenden, um die Daten manuell zu aktualisieren. Identifizieren und aktualisieren Sie Daten anhand abgefragter Schlüssel.

import { useQuery, useQueryClient } from 'react-query';

function UserList() {
  const queryClient = useQueryClient();

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

  const handleUpdateUser = user => {
    // update the data in the cache
    queryClient.setQueryData('users', old => {
      const updatedData = old.map(u => {
        if (u.id === user.id) {
          return {
            ...u,
            name: user.name,
            age: user.age,
          };
        }
        return u;
      });
      return updatedData;
    });
  };

  // ...
}

6. Die Verwendung der Datenbank
React Query schränkt die Methode, die wir zum Abrufen von Daten verwenden, nicht ein. Wenn unsere Daten in der Datenbank gespeichert sind, müssen wir nur den entsprechenden Code in die Abfragefunktion schreiben, um die Datenbank zu betreiben.

import { useQuery } from 'react-query';
import { db } from 'path/to/database';

function UserList() {
  const { isLoading, data, error } = useQuery('users', async () => {
    const users = await db.get('users');
    return users;
  });

  // ...
}

Sieben. Durch die Verwendung von React Query und der Datenbank können wir die Daten in der Anwendung besser organisieren und verwalten und eine gute Benutzererfahrung bieten. Dieser Artikel bietet Best-Practice-Anleitungen für die Datenverwaltung mit React Query sowie konkrete Codebeispiele. Ich hoffe, das hilft dir!

Das obige ist der detaillierte Inhalt vonDatenverwaltung mit React Query und Datenbanken: Ein Best Practices-Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!