React Query でデータベースの即時レプリケーションを実現するにはどうすればよいですか?

React Query でデータベースのインスタント レプリケーションを実装するにはどうすればよいですか?

はじめに:
最新のアプリケーションの開発では、データベースのリアルタイム レプリケーションが頻繁に行われます。インスタント レプリケーションとは、データベースで追加、削除、変更が発生したときに、最新のデータをアプリケーションに自動的に同期できることを意味します。 React Query はアプリケーション データを管理するための強力なツールであり、データのフェッチ、更新、キャッシュを処理するための多くの便利な機能を提供します。この記事では、React Query を使用してデータベースの即時レプリケーションを実現する方法を紹介し、具体的なコード例を示します。

ステップ 1: React Query のインストールとセットアップ
まず、React Query をインストールしてセットアップする必要があります。ターミナルで次のコマンドを実行します。

npm install react-query

次に、アプリケーションのエントリ ファイルに React Query をインポートし、QueryClientProvider コンポーネントを使用してグローバル QueryClient オブジェクトを提供します。サンプル コードは次のとおりです。

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

ステップ 2: クエリ関数と更新関数を定義する
次に、クエリ関数と更新関数を定義する必要があります。クエリ関数はデータベースから最新のデータを取得するために使用され、更新関数はデータベースへのデータの挿入、更新、または削除に使用されます。サンプル コードは次のとおりです。

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

// 查询函数
const fetchItems = async () => {
  const response = await fetch('/api/items');
  return response.json();
};

// 更新函数
const updateItem = async (item) => {
  const response = await fetch(`/api/items/${item.id}`, {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(item),
  });
  return response.json();
};

ステップ 3: useQuery および useMutation を使用する
これで、コンポーネント内で useQuery フックと useMutation フックを使用してデータを取得および更新できるようになります。サンプル コードは次のとおりです。

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

const ItemList = () => {
  // 获取最新的数据
  const { data: items } = useQuery('items', fetchItems);

  // 创建更新函数
  const mutation = useMutation(updateItem, {
    onSuccess: () => {
      queryClient.invalidateQueries('items');
    },
  });

  // 提交数据更新
  const handleSubmit = () => {
    const item = {
      id: 1,
      name: 'New Item',
    };
    mutation.mutate(item);
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={handleSubmit}>添加新项目</button>
    </div>
  );
};

上記のサンプル コードでは、useQuery フックを使用して最新データを取得し、useMutation フックを使用して更新関数を作成します。データが正常に更新されると、クエリが無効になり、queryClient.invalidateQueries('items') を呼び出してデータの再取得がトリガーされます。

概要:
React Query を使用すると、データベースのインスタント レプリケーションを簡単に実現できます。まず、React Query をインストールして設定し、クエリ関数と更新関数を定義する必要があります。次に、コンポーネント内で useQuery フックと useMutation フックを使用してデータを取得および更新できます。データベースのインスタント レプリケーションは、更新関数の onSuccess コールバックで queryClient.invalidateQueries メソッドを呼び出すことで実現できます。このようにして、データの即時同期と更新を簡単に実現できます。

上記は、React Query でデータベースのインスタント レプリケーションを実装する方法の詳細な紹介とコード例です。この記事が読者の皆様の React Query の理解を深め、データベースのインスタント レプリケーション機能を実現するために応用できることを願っています。

以上がReact Query でデータベースの即時レプリケーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。