React Query とデータベースを使用したデータのバージョン管理

React Query とデータベースを使用したデータ バージョン管理の実装

フロントエンド アプリケーションの複雑さが増すにつれて、データ バージョン管理の重要性がますます高まっています。複数の人が共同作業したり、複数の端末が同じアプリケーションを使用したりする場合、データの一貫性と正確性を確保することが重要です。この記事では、React Query とデータベースを使用してデータのバージョン管理を実装する方法を説明し、具体的なコード例を示します。

React Query は、アプリケーション データを簡単に管理できる強力なデータ管理ライブラリです。データ キャッシュ、自動更新、キャッシュ更新などの多くの機能を提供します。データベースと組み合わせることで、データのバージョン管理が可能になります。以下は、React Query とデータベースに基づくデータのバージョン管理の例です。

まず、データとそのバージョン情報を保存するデータベース テーブルを作成する必要があります。ストレージは、MySQL、MongoDB、またはその他のデータベースを使用して実行できます。この記事では MySQL を例に挙げます。次の構造を持つ「data」という名前のテーブルがあるとします:

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

次に、React Query を使用してデータの取得と更新を行い、それをデータベースと結合して、データのバージョン管理を実装します。まず、React Query をインストールする必要があります:

npm install react-query

次に、アプリケーションのエントリ ファイルに React Query 関連モジュールをインポートします:

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

const queryClient = new QueryClient();

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

次に、データを取得し、データを更新するコンポーネントを定義できます。 。このコンポーネントでは、useQuery フックと useMutation フックを使用して、データの取得と更新を処理できます。

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 は、データベースからデータを取得するために使用される非同期関数です。 updateData は、データを更新し、データベースにデータを書き戻す非同期関数です。データが更新されるたびに、データのバージョン番号を更新する必要があることに注意してください。

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;
}

サーバー側では、データを取得および更新するためのインターフェイスを提供する必要があります。インターフェイスは、Express、Koa、またはその他のフレームワークを使用して実装できます。インターフェイスの実装方法は特定のニーズに応じて異なるため、ここでは詳しく説明しません。

最後に、サーバー側でデータのバージョンの検証と制御を実装する必要があります。データを更新するときは、クライアントが要求したバージョン番号がデータベース内のバージョン番号と一致しているかどうかを確認する必要があります。不一致の場合は、他の端末によってデータが変更されたことを意味し、更新要求は拒否されます。

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' });
  }
});

上記は、React Query とデータベースを使用してデータ バージョン管理を実装する基本的な例です。 React Query を使用してデータを管理し、データベースと組み合わせてデータのバージョン検証と制御を実装することで、データの一貫性と正確性を確保できます。複数の端末が同じデータを操作する場合、データのバージョン番号を使用してデータに矛盾があるかどうかを判断し、タイムリーに対処できます。

この記事では、React Query とデータベースを使用してデータのバージョン管理を実装する方法を示す簡単な例を示します。具体的な実装方法は特定のニーズに応じて異なり、読者は実際の状況に応じて調整および拡張できます。この記事が読者のお役に立てば幸いです、読んでいただきありがとうございます!

以上がReact Query とデータベースを使用したデータのバージョン管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。