Versi data menggunakan React Query dan pangkalan data

Gunakan React Query dan pangkalan data untuk melaksanakan kawalan versi data

Memandangkan kerumitan aplikasi bahagian hadapan terus meningkat, kawalan versi data menjadi semakin penting. Apabila berbilang orang bekerjasama atau berbilang terminal menggunakan aplikasi yang sama, adalah penting untuk memastikan ketekalan dan ketepatan data. Dalam artikel ini, kami akan membincangkan cara melaksanakan versi data menggunakan React Query dan pangkalan data serta memberikan contoh kod konkrit.

React Query ialah perpustakaan pengurusan data yang berkuasa yang membolehkan kami mengurus data aplikasi dengan mudah. Ia menyediakan banyak ciri, termasuk caching data, muat semula automatik dan kemas kini cache, dsb. Dengan menggabungkan dengan pangkalan data, kami boleh mengawal dan mengurus versi data. Di bawah ialah contoh versi data berdasarkan React Query dan pangkalan data.

Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan data dan maklumat versinya. Penyimpanan boleh dilakukan menggunakan MySQL, MongoDB, atau pangkalan data lain. Artikel ini mengambil MySQL sebagai contoh. Katakan kita mempunyai jadual bernama "data" dengan struktur berikut:

CREATE TABLE data (
  id INT PRIMARY KEY AUTO_INCREMENT,
  value VARCHAR(255) NOT NULL,
  version INT NOT NULL
);

Seterusnya, kita boleh menggunakan React Query untuk mendapatkan data dan mengemas kini data, dan menggabungkannya dengan pangkalan data untuk melaksanakan kawalan versi data . Mula-mula, kita perlu memasang React Query:

npm install react-query

Kemudian, import modul berkaitan React Query dalam fail kemasukan aplikasi:

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <DataComponent />
    </QueryClientProvider>
  );
}

Seterusnya, kita boleh menentukan komponen untuk mendapatkan data dan mengemas kini data. Dalam komponen ini, kita boleh menggunakan cangkuk useQuery dan useMutation untuk mengendalikan pengambilan dan pengemaskinian data:

function DataComponent() {
  const { data, isLoading, error } = useQuery('data', fetchData);
  const updateData = useMutation(updateData);

  const handleUpdate = async (newData) => {
    await updateData.mutateAsync(newData);
    queryClient.invalidateQueries('data');
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <div>Data: {data.value}</div>
      <button onClick={() => handleUpdate('New Data')}>
        Update Data
      </button>
    </div>
  );
}

fetchData ialah fungsi tak segerak yang digunakan untuk mendapatkan data daripada pangkalan data. updateData ialah fungsi tak segerak yang mengemas kini data dan menulis data kembali ke pangkalan data. Perlu diingatkan bahawa setiap kali data dikemas kini, kami perlu mengemas kini nombor versi data.

async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();

  return data;
}

async function updateData(newData) {
  const response = await fetch('/api/data', {
    method: 'PUT',
    body: JSON.stringify({
      value: newData,
      version: data.version + 1, // 更新版本号
    }),
    headers: {
      'Content-Type': 'application/json',
    },
  });

  const updatedData = await response.json();

  return updatedData;
}

Di bahagian pelayan, kami perlu menyediakan antara muka untuk mendapatkan dan mengemas kini data. Antara muka boleh dilaksanakan menggunakan Express, Koa, atau rangka kerja lain. Pelaksanaan antara muka berbeza-beza bergantung pada keperluan khusus, dan tidak akan dibincangkan secara terperinci di sini.

Akhir sekali, kami perlu melaksanakan pengesahan dan kawalan versi data di bahagian pelayan. Semasa mengemas kini data, kita perlu menyemak sama ada nombor versi yang diminta oleh pelanggan adalah konsisten dengan nombor versi dalam pangkalan data. Jika ia tidak konsisten, ini bermakna data telah diubah suai oleh terminal lain, dan permintaan kemas kini akan ditolak.

app.put('/api/data', (req, res) => {
  const { value, version } = req.body;
  const { id } = req.params;

  const data = getFromDatabase(id);

  if (data.version === version) {
    // 更新数据，更新数据版本号
    updateDatabase(id, value, version + 1);
    res.send({ success: true, message: 'Data updated' });
  } else {
    // 数据已被修改，拒绝更新
    res.status(409).send({ success: false, message: 'Data conflict' });
  }
});

Di atas ialah contoh asas menggunakan React Query dan pangkalan data untuk melaksanakan kawalan versi data. Dengan menggunakan React Query untuk mengurus data dan menggabungkannya dengan pangkalan data untuk melaksanakan pengesahan dan kawalan versi data, kami boleh memastikan ketekalan dan ketepatan data. Apabila berbilang terminal beroperasi pada data yang sama, kami boleh menggunakan nombor versi data untuk menentukan sama ada terdapat konflik dalam data dan mengendalikannya tepat pada masanya.

Artikel ini menyediakan contoh mudah untuk menunjukkan cara melaksanakan versi data menggunakan React Query dan pangkalan data. Kaedah pelaksanaan khusus berbeza mengikut keperluan khusus, dan pembaca boleh menyesuaikan dan mengembangkan mengikut keadaan sebenar mereka. Saya harap artikel ini dapat membantu pembaca, terima kasih kerana membaca!

Atas ialah kandungan terperinci Versi data menggunakan React Query dan pangkalan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!