Melaksanakan penguncian teragih untuk pertanyaan pangkalan data dalam React Query

Melaksanakan penguncian teragih untuk pertanyaan pangkalan data dalam React Query

Pengenalan:
Dalam aplikasi web moden, selalunya perlu berinteraksi dengan pangkalan data bahagian belakang. Masalah konkurensi berlaku apabila berbilang pengguna mengakses pangkalan data pada masa yang sama dan mengubah suai data yang sama. Untuk mengelakkan isu konkurensi, penguncian teragih ialah penyelesaian biasa. Artikel ini akan memperkenalkan cara menggunakan penguncian teragih dalam React Query untuk melaksanakan pertanyaan pangkalan data.

React Query ialah perpustakaan pengurusan data yang berkuasa yang memudahkan untuk mendapatkan, mengemas kini dan mengurus data dalam aplikasi React. Ia menggunakan konsep yang dipanggil "rujukan pertanyaan", yang memudahkan untuk melaksanakan berbilang pertanyaan dan operasi kemas kini seperti yang diperlukan dengan menggabungkan pelbagai jenis pertanyaan ke dalam satu "pertanyaan".

Untuk melaksanakan penguncian teragih pertanyaan pangkalan data dalam React Query, kami boleh menggunakan cangkuk pertanyaan tersuai dan mekanisme penguncian optimistik pangkalan data.

1. Cangkuk pertanyaan tersuai
Pertama, kita perlu mencipta cangkuk pertanyaan tersuai untuk melaksanakan operasi pertanyaan pangkalan data. Cangkuk ini akan bertanggungjawab untuk menghantar permintaan rangkaian dan mengembalikan data.

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;

Dalam kod di atas, kami telah menggunakan perpustakaan Axios untuk menghantar permintaan rangkaian. Anda perlu membuat perubahan yang sesuai berdasarkan konfigurasi API bahagian belakang anda dan konfigurasi pangkalan data.

2. Gabungkan operasi pertanyaan
Seterusnya, kita boleh menggunakan mekanisme rujukan pertanyaan React Query untuk menggabungkan berbilang operasi pertanyaan ke dalam pertanyaan komposit. Ini memastikan bahawa keputusan berbilang pertanyaan diperoleh secara serentak dalam pertanyaan kompaun.

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;

Dalam kod di atas, kami menggunakan cangkuk pertanyaan tersuai useDatabaseQuery untuk membuat tiga pertanyaan berasingan. Kami kemudian meletakkannya ke dalam fungsi useQueries untuk melaksanakan semua operasi pertanyaan sekaligus. 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. Pelaksanaan penguncian teragih

Untuk melaksanakan penguncian teragih untuk pertanyaan pangkalan data, kami boleh menggunakan mekanisme penguncian optimistik pangkalan data. Penguncian optimistik ialah strategi kawalan serentak optimistik yang membolehkan berbilang pengguna membaca data yang sama pada masa yang sama, tetapi hanya seorang pengguna boleh mengubah suai dan menyimpan data.

Mula-mula, tambahkan medan kunci tambahan pada jadual pangkalan data yang menandakan baris tertentu sebagai terkunci atau tidak berkunci.

rrreee

Kemudian, sebelum melakukan operasi pertanyaan, kita perlu mendapatkan dan mengunci baris data yang sepadan. 🎜rrreee🎜Dalam kod di atas, kami mencipta dua fungsi mutasi tak segerak lockQuery dan unlockQuery, yang masing-masing digunakan untuk mengunci dan membuka kunci baris data tertentu. Kemudian, kami menggunakan fungsi useMutation untuk mengisytiharkan kedua-dua mutasi ini. 🎜🎜Akhir sekali, kami memperkenalkan cangkuk useLockQuery dalam cangkuk pertanyaan tersuai untuk mendapatkan data dan mengunci baris data tertentu. Pada masa yang sama, apabila anda perlu membuka kunci baris data, anda boleh membuka kunci baris data dengan memanggil fungsi unlock. 🎜🎜4. Pertanyaan menggunakan penguncian teragih🎜Kini, kita boleh menggunakan useCombinedQueries cangkuk pertanyaan tersuai dan cangkuk useLockQuery dalam komponen React. 🎜rrreee🎜Dalam kod di atas, kami menggunakan cangkuk pertanyaan tersuai useCombinedQueries untuk mendapatkan data dalam pangkalan data. Kami kemudian menggunakan cangkuk useLockQuery untuk mengunci dan membuka kunci baris data tertentu. Akhir sekali, kami memaparkan UI yang sepadan berdasarkan status pertanyaan dan sama ada baris data telah dikunci. 🎜🎜Ringkasan: 🎜Dengan menggunakan React Query dan cangkuk pertanyaan tersuai, kami boleh melaksanakan penguncian teragih pertanyaan pangkalan data dengan mudah. Kaedah ini menggabungkan idea penguncian optimistik untuk memastikan ketekalan data dan kawalan konkurensi apabila mengakses pangkalan data secara serentak. 🎜🎜Perlu diambil perhatian bahawa dalam penggunaan sebenar, anda perlu membuat pengubahsuaian dan pelarasan yang sepadan berdasarkan keperluan perniagaan khusus anda dan pelaksanaan API bahagian belakang. Contoh kod yang disediakan dalam artikel ini adalah untuk rujukan sahaja. 🎜

Atas ialah kandungan terperinci Melaksanakan penguncian teragih untuk pertanyaan pangkalan data dalam React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!