Implementieren verteilter Sperren für Datenbankabfragen in React Query-js-Tutorial-php.cn

在 React Query 中实现数据库查询的分布式锁定

Implementieren verteilter Sperren für Datenbankabfragen in React Query

Einführung:
In modernen Webanwendungen ist es häufig notwendig, mit der Backend-Datenbank zu interagieren. Parallelitätsprobleme treten auf, wenn mehrere Benutzer gleichzeitig auf die Datenbank zugreifen und dieselben Daten ändern. Um Parallelitätsprobleme zu vermeiden, ist verteiltes Sperren eine gängige Lösung. In diesem Artikel wird erläutert, wie Sie verteiltes Sperren in React Query verwenden, um Datenbankabfragen zu implementieren.

React Query ist eine leistungsstarke Datenverwaltungsbibliothek, die das Abrufen, Aktualisieren und Verwalten von Daten in React-Anwendungen erleichtert. Es verwendet ein Konzept namens „Abfragereferenz“, das es einfach macht, bei Bedarf mehrere Abfrage- und Aktualisierungsvorgänge durchzuführen, indem verschiedene Arten von Abfragen in einer „Abfrage“ kombiniert werden.

Um die verteilte Sperrung von Datenbankabfragen in React Query zu implementieren, können wir benutzerdefinierte Abfrage-Hooks und den optimistischen Sperrmechanismus der Datenbank verwenden.

1. Benutzerdefinierter Abfrage-Hook
Zuerst müssen wir einen benutzerdefinierten Abfrage-Hook erstellen, um Datenbankabfragevorgänge durchzuführen. Dieser Hook ist für das Senden von Netzwerkanfragen und die Rückgabe von Daten verantwortlich.

import { useQuery } from 'react-query';
import axios from 'axios';

const useDatabaseQuery = (query) => {
  const fetchQuery = async () => {
    const response = await axios.get('/api/database', { params: { query } });
    return response.data;
  };

  return useQuery(query, fetchQuery);
};

export default useDatabaseQuery;

Nach dem Login kopieren

Im obigen Code haben wir die Axios-Bibliothek zum Senden von Netzwerkanfragen verwendet. Sie müssen basierend auf Ihrer Backend-API-Konfiguration und Datenbankkonfiguration entsprechende Änderungen vornehmen.

2. Abfrageoperationen zusammenführen
Als nächstes können wir den Abfragereferenzmechanismus von React Query verwenden, um mehrere Abfrageoperationen zu einer zusammengesetzten Abfrage zusammenzuführen. Dadurch wird sichergestellt, dass die Ergebnisse mehrerer Abfragen gleichzeitig in einer zusammengesetzten Abfrage abgerufen werden.

import { useQueries } from 'react-query';
import useDatabaseQuery from './useDatabaseQuery';

const useCombinedQueries = () => {
  const query1 = useDatabaseQuery('SELECT * FROM table1');
  const query2 = useDatabaseQuery('SELECT * FROM table2');
  const query3 = useDatabaseQuery('SELECT * FROM table3');

  return useQueries([query1, query2, query3]);
};

export default useCombinedQueries;

Nach dem Login kopieren

Im obigen Code haben wir den benutzerdefinierten Abfrage-Hook useDatabaseQuery verwendet, um drei separate Abfragen zu erstellen. Anschließend fügen wir sie in die Funktion useQueries ein, um alle Abfragevorgänge auf einmal auszuführen. useDatabaseQuery自定义查询钩子来创建三个独立的查询。然后，我们将它们放入useQueries函数中，以便一次执行所有查询操作。

三、分布式锁定的实现
为了实现数据库查询的分布式锁定，我们可以利用数据库的乐观锁定机制。乐观锁定是一种乐观的并发控制策略，它允许多个用户同时读取同一数据，但只有一个用户能够修改并保存数据。

首先，在数据库表中添加一个额外的锁定字段，用于将特定的行标记为已锁定或未锁定。

-- 创建表
CREATE TABLE my_table (
  id SERIAL PRIMARY KEY,
  content TEXT,
  is_locked BOOLEAN DEFAULT FALSE
);

Nach dem Login kopieren

然后，在进行查询操作之前，我们需要获取并锁定相应的数据行。

import { useMutation, queryCache } from 'react-query';
import axios from 'axios';

const lockQuery = async (id) => {
  const response = await axios.post('/api/database/lock', { id });
  return response.data;
};

const unlockQuery = async (id) => {
  const response = await axios.post('/api/database/unlock', { id });
  return response.data;
};

const useLockQuery = (query) => {
  const mutation = useMutation(lockQuery);
  const unlockMutation = useMutation(unlockQuery);

  const lock = async (id) => {
    await mutation.mutateAsync(id);
    queryCache.invalidateQueries(query); // 清理缓存
  };

  const unlock = async (id) => {
    await unlockMutation.mutateAsync(id);
    queryCache.invalidateQueries(query); // 清理缓存
  };

  return { lock, unlock, isLocked: mutation.isLoading };
};

export default useLockQuery;

Nach dem Login kopieren

在上面的代码中，我们创建了两个异步的mutatation函数lockQuery和unlockQuery，它们分别用于锁定和解锁特定的数据行。然后，我们使用useMutation函数来声明这两个mutation。

最后，我们在自定义查询钩子中引入useLockQuery钩子来获取数据并锁定特定的数据行。同时，在需要解锁数据行时，可以通过调用unlock函数来解锁数据行。

四、使用分布式锁定的查询
现在，我们可以在React组件中使用useCombinedQueries自定义查询钩子和useLockQuery钩子。

import useCombinedQueries from './useCombinedQueries';
import useLockQuery from './useLockQuery';

const MyComponent = () => {
  const combinedQueries = useCombinedQueries();
  const { lock, unlock, isLocked } = useLockQuery('SELECT * FROM my_table');

  const handleLockClick = (id) => {
    lock(id);
  };

  const handleUnlockClick = (id) => {
    unlock(id);
  };

  return (
    <div>
      {combinedQueries.map((query, index) => (
        <div key={index}>
          {query.isFetching ? (
            <p>Loading...</p>
          ) : query.error ? (
            <p>Error: {query.error.message}</p>
          ) : (
            <>
              <p>Data: {query.data}</p>
              <button onClick={() => handleLockClick(query.data.id)} disabled={isLocked}>Lock</button>
              <button onClick={() => handleUnlockClick(query.data.id)}>Unlock</button>
            </>
          )}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

Nach dem Login kopieren

在上面的代码中，我们使用了useCombinedQueries自定义查询钩子来获取数据库中的数据。然后，我们使用useLockQuery

3. Implementierung verteilter Sperren

Um verteilte Sperren für Datenbankabfragen zu implementieren, können wir den optimistischen Sperrmechanismus der Datenbank verwenden. Optimistisches Sperren ist eine optimistische Strategie zur Parallelitätskontrolle, die es mehreren Benutzern ermöglicht, dieselben Daten gleichzeitig zu lesen, aber nur ein Benutzer kann die Daten ändern und speichern.

Fügen Sie zunächst ein zusätzliches Sperrfeld zur Datenbanktabelle hinzu, das bestimmte Zeilen als gesperrt oder entsperrt markiert.

rrreee

Dann müssen wir vor dem Ausführen der Abfrageoperation die entsprechenden Datenzeilen abrufen und sperren. 🎜rrreee🎜Im obigen Code haben wir zwei asynchrone Mutationsfunktionen lockQuery und unlockQuery erstellt, die zum Sperren bzw. Entsperren bestimmter Datenzeilen verwendet werden. Dann verwenden wir die Funktion useMutation, um diese beiden Mutationen zu deklarieren. 🎜🎜Abschließend führen wir den Hook useLockQuery im benutzerdefinierten Abfrage-Hook ein, um Daten abzurufen und bestimmte Datenzeilen zu sperren. Wenn Sie gleichzeitig eine Datenzeile entsperren müssen, können Sie die Datenzeile entsperren, indem Sie die Funktion unlock aufrufen. 🎜🎜4. Abfrage mit verteilten Sperren🎜Jetzt können wir den benutzerdefinierten Abfrage-Hook useCombinedQueries und den Hook useLockQuery in der React-Komponente verwenden. 🎜rrreee🎜Im obigen Code verwenden wir den benutzerdefinierten Abfrage-Hook useCombinedQueries, um die Daten in der Datenbank abzurufen. Anschließend verwenden wir den Hook useLockQuery, um bestimmte Datenzeilen zu sperren und zu entsperren. Abschließend zeigen wir die entsprechende Benutzeroberfläche basierend auf dem Status der Abfrage und der Frage an, ob die Datenzeile gesperrt wurde. 🎜🎜Zusammenfassung: 🎜Durch die Verwendung von React Query und benutzerdefinierten Abfrage-Hooks können wir problemlos verteilte Sperren von Datenbankabfragen implementieren. Diese Methode kombiniert die Idee des optimistischen Sperrens, um Datenkonsistenz und Parallelitätskontrolle beim gleichzeitigen Zugriff auf die Datenbank sicherzustellen. 🎜🎜Es ist zu beachten, dass Sie bei der tatsächlichen Verwendung entsprechende Änderungen und Anpassungen basierend auf Ihren spezifischen Geschäftsanforderungen und der Back-End-API-Implementierung vornehmen müssen. Die in diesem Artikel bereitgestellten Codebeispiele dienen nur als Referenz. 🎜

Das obige ist der detaillierte Inhalt vonImplementieren verteilter Sperren für Datenbankabfragen in React Query. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!