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

3. Implémentation du verrouillage distribué

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.

Tout d'abord, ajoutez un champ de verrouillage supplémentaire à la table de base de données qui marque des lignes spécifiques comme verrouillées ou déverrouillées.

rrreee

Ensuite, avant d'effectuer l'opération de requête, nous devons obtenir et verrouiller les lignes de données correspondantes. 🎜rrreee🎜Dans le code ci-dessus, nous avons créé deux fonctions de mutation asynchrones lockQuery et unlockQuery, qui sont utilisées respectivement pour verrouiller et déverrouiller des lignes de données spécifiques. Ensuite, nous utilisons la fonction useMutation pour déclarer ces deux mutations. 🎜🎜Enfin, nous introduisons le hook useLockQuery dans le hook de requête personnalisé pour obtenir des données et verrouiller des lignes de données spécifiques. Dans le même temps, lorsque vous devez déverrouiller une ligne de données, vous pouvez déverrouiller la ligne de données en appelant la fonction unlock. 🎜🎜4. Requête à l'aide du verrouillage distribué🎜Maintenant, nous pouvons utiliser le hook de requête personnalisé useCombinedQueries et le hook useLockQuery dans le composant React. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons le hook de requête personnalisé useCombinedQueries pour obtenir les données dans la base de données. Nous utilisons ensuite le hook useLockQuery pour verrouiller et déverrouiller des lignes de données spécifiques. Enfin, nous affichons l'interface utilisateur correspondante en fonction de l'état de la requête et si la ligne de données a été verrouillée. 🎜🎜Résumé : 🎜En utilisant React Query et des hooks de requête personnalisés, nous pouvons facilement implémenter le verrouillage distribué des requêtes de base de données. Cette méthode combine l'idée du verrouillage optimiste pour garantir la cohérence des données et le contrôle de la concurrence lors de l'accès simultané à la base de données. 🎜🎜Il convient de noter qu'en utilisation réelle, vous devez apporter les modifications et ajustements correspondants en fonction des besoins spécifiques de votre entreprise et de la mise en œuvre de l'API back-end. Les exemples de code fournis dans cet article sont uniquement à titre de référence. 🎜

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!