Datenaktualisierungen in Echtzeit mit dem React Query-Datenbank-Plugin

Verwenden Sie das React Query-Datenbank-Plugin für Datenaktualisierungen in Echtzeit.

React Query ist ein leistungsstarkes Datenverwaltungstool, das uns dabei helfen kann, den Prozess der Datenverarbeitung in React-Anwendungen zu vereinfachen. Es bietet elegante Lösungen für Vorgänge wie Datenabruf, Caching und Aktualisierung. In diesem Artikel wird erläutert, wie Sie mit dem React Query-Plug-in die Echtzeit-Datenaktualisierungsfunktion implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Um diesen Prozess besser zu verstehen, nehmen wir als Beispiel eine einfache Aufgabenverwaltungsanwendung. Nehmen wir an, dass die Anwendung eine Aufgabenliste enthält. Wenn der Benutzer eine Aufgabe abschließt, müssen wir den Status der Aufgabe in Echtzeit aktualisieren.

Zuerst müssen wir das React Query-Plugin installieren. Führen Sie den folgenden Befehl im Terminal aus:

npm install react-query

Nachdem die Installation abgeschlossen ist, können wir React Query in die Stammkomponente der Anwendung einführen und eine globale QueryClient-Instanz erstellen. Der Code lautet wie folgt:

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
    </QueryClientProvider>
  );
}

export default App;

Als nächstes erstellen Sie in der Komponente, in der wir Daten in Echtzeit aktualisieren müssen, einen Datenaktualisierungsvorgang, indem Sie den von React Query bereitgestellten useMutation-Hook verwenden. Wir können die Aktualisierungslogik im Click-Event-Handler der Schaltfläche zum Abschluss der Aufgabe definieren. Der spezifische Code lautet wie folgt:

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

function TaskItem({ task }) {
  const queryClient = useQueryClient();

  const completeTaskMutation = useMutation(async () => {
    // 发送异步请求完成任务
    await fetch(`/api/tasks/${task.id}`, { method: 'PUT', body: JSON.stringify({ completed: true }) });

    // 手动更新缓存
    queryClient.setQueryData(['tasks', task.id], { ...task, completed: true });
  });

  const handleCompleteClick = () => {
    completeTaskMutation.mutate();
  }

  return (
    <div>
      <p>{task.name}</p>
      <button onClick={handleCompleteClick}>完成</button>
    </div>
  );
}

In diesem Code erstellen wir zunächst eine Variable mit dem Namen CompleteTaskMutation, indem wir useMutation aufrufen. Es handelt sich um ein Objekt, das eine Mutate-Funktion enthält, die zum Auslösen von Datenaktualisierungsvorgängen verwendet wird.

Im Click-Event-Handler der Schaltfläche rufen wir CompleteTaskMutation.mutate() auf, um die Datenaktualisierung auszulösen. Dadurch wird die asynchrone Funktion aufgerufen, die wir in useMutation übergeben haben, und nach Abschluss der asynchronen Anforderung werden die Daten im Cache manuell aktualisiert. Hier verwenden wir die setQueryData-Methode, um die Aufgabendaten im Cache zu aktualisieren, und übergeben ['tasks', task.id] als ersten Parameter, um anzugeben, dass es sich um einen Abfragevorgang für die Aufgabenliste handelt.

Schließlich verwenden wir in der Aufgabenlistenkomponente den useQuery-Hook, um Aufgabendaten abzurufen. Der Code lautet wie folgt:

import { useQuery } from 'react-query';

function TaskList() {
  const { data } = useQuery('tasks', async () => {
    const response = await fetch('/api/tasks');
    const data = await response.json();
    return data;
  });

  return (
    <div>
      {data && data.map(task => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
}

In diesem Code rufen wir useQuery('tasks', ...) auf, um einen Abfragevorgang zu initiieren. Der erste Parameter ist der Schlüssel zur Identifizierung der Abfrage, hier verwenden wir „Aufgaben“. Der zweite Parameter ist eine asynchrone Funktion, die zum Abrufen von Aufgabenlistendaten verwendet wird. Mit dieser Funktion können wir asynchrone Anfragen senden und Antwortdaten zurückgeben. React Query speichert diese Daten automatisch zwischen und aktualisiert sie bei Bedarf.

Durch die obigen Codebeispiele haben wir das React Query-Plug-in erfolgreich verwendet, um die Echtzeit-Datenaktualisierungsfunktion zu implementieren. Unabhängig davon, ob es darum geht, neue Daten zu erstellen, Daten zu aktualisieren oder Daten zu löschen, kann React Query uns bei der Verwaltung des Datenerfassungs- und Aktualisierungsprozesses unterstützen und so die Komplexität der Datenverarbeitung in der Anwendung erheblich vereinfachen. Ich hoffe, dieser Artikel hilft Ihnen beim Erlernen der Verwendung von React Query!

Das obige ist der detaillierte Inhalt vonDatenaktualisierungen in Echtzeit mit dem React Query-Datenbank-Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!