Implémentation du verrouillage distribué pour les requêtes de base de données dans React Query

Implémentation du verrouillage distribué pour les requêtes de base de données dans React Query

Introduction :
Dans les applications Web modernes, il est souvent nécessaire d'interagir avec la base de données backend. Des problèmes de concurrence se produisent lorsque plusieurs utilisateurs accèdent à la base de données en même temps et modifient les mêmes données. Pour éviter les problèmes de concurrence, le verrouillage distribué est une solution courante. Cet article explique comment utiliser le verrouillage distribué dans React Query pour implémenter des requêtes de base de données.

React Query est une puissante bibliothèque de gestion de données qui facilite l'obtention, la mise à jour et la gestion des données dans les applications React. Il utilise un concept appelé « référence de requête », qui facilite l'exécution de plusieurs opérations de requête et de mise à jour selon les besoins en combinant différents types de requêtes en une seule « requête ».

Pour implémenter le verrouillage distribué des requêtes de base de données dans React Query, nous pouvons utiliser des hooks de requête personnalisés et le mécanisme de verrouillage optimiste de la base de données.

1. Hook de requête personnalisé
Tout d'abord, nous devons créer un hook de requête personnalisé pour effectuer des opérations de requête de base de données. Ce hook sera responsable de l’envoi des requêtes réseau et du renvoi des données.

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;

Dans le code ci-dessus, nous avons utilisé la bibliothèque Axios pour envoyer des requêtes réseau. Vous devez apporter les modifications appropriées en fonction de la configuration de votre API backend et de la configuration de votre base de données.

2. Fusionner les opérations de requête
Ensuite, nous pouvons utiliser le mécanisme de référence de requête de React Query pour fusionner plusieurs opérations de requête dans une requête composite. Cela garantit que les résultats de plusieurs requêtes sont obtenus simultanément dans une requête composée.

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;

Dans le code ci-dessus, nous avons utilisé le hook de requête personnalisé useDatabaseQuery pour créer trois requêtes distinctes. Nous les mettons ensuite dans la fonction useQueries pour effectuer toutes les opérations de requête en même temps. useDatabaseQuery自定义查询钩子来创建三个独立的查询。然后，我们将它们放入useQueries函数中，以便一次执行所有查询操作。

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

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

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

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

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;

在上面的代码中，我们创建了两个异步的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;

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

Afin d'implémenter le verrouillage distribué pour les requêtes de base de données, nous pouvons utiliser le mécanisme de verrouillage optimiste de la base de données. Le verrouillage optimiste est une stratégie de contrôle de concurrence optimiste qui permet à plusieurs utilisateurs de lire les mêmes données en même temps, mais un seul utilisateur peut modifier et enregistrer les données.

rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!