React Query データベース プラグインを使用して自動データ同期を実現する

React Query データベース プラグインを使用して自動データ同期を実現する

フロントエンド開発がますます複雑になるにつれて、データ管理の重要性がますます高まっています。 React Query は、便利なデータ状態管理と自動同期機能を提供する強力なデータベース プラグインです。この記事では、React Query を活用して自動データ同期を行う方法を検討し、具体的なコード例を示します。

1. React Query を理解する

React Query はデータ管理と同期に焦点を当てたライブラリであり、React に基づいて構築されており、使いやすい API と強力な機能を提供します。 React Query の中心的な概念はクエリであり、クエリはリモート データをリクエストし、データをローカルに保存し、データのロード、キャッシュ、同期を自動的に処理できます。同時に、React Query は明確なデータステータス管理とエラー処理メカニズムも提供します。これらにより、データをより簡単かつ効率的に処理できるようになります。

2. 自動データ同期の実装

1. React Query のインストール

まず、プロジェクトに React Query をインストールする必要があります。 npm または Yarn を通じてインストールできます:

npm install react-query
# 或者
yarn add react-query

インストールが完了したら、React Query をアプリケーションのルート コンポーネントにインポートします:

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

2. Create QueryClient

データ リクエストとステータスを管理するためにアプリケーションで QueryClient インスタンスを作成します:

const queryClient = new QueryClient();

そしてそれを QueryClientProvider でラップして、アプリケーション全体で QueryClient によって提供される関数にアクセスします:

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

3. クエリの宣言

データを使用する必要があるコンポーネントでは、useQuery フックを使用してクエリを宣言できます。 useQuery は、クエリ キーと、リモート サーバーからデータを取得するための非同期関数を受け取ります:

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos);

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

async function fetchTodos() {
  const response = await fetch('/api/todos');
  const data = await response.json();
  return data;
}

この例では、「todos」という名前のクエリを宣言します。このクエリは、 fetchTodos 関数を呼び出して、サーバーから To-Do データを取得します。 。データの読み込み中は読み込みスピナーが表示され、読み込みが完了すると To-Do リストが表示されます。

4. データの更新

React Query はデータのロードとキャッシュを自動的に処理できますが、データをリアルタイムに維持するにはデータ更新の手動処理が必要です。 useMutation フックを使用すると、データ更新操作を簡単に実装できます。

import { useMutation } from 'react-query';

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos);
  const mutation = useMutation(updateTodo);

  async function handleUpdate(id, status) {
    await mutation.mutateAsync({ id, status });
  }

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>
          {todo.title}
          <button onClick={() => handleUpdate(todo.id, 'completed')}>
            完成
          </button>
        </li>
      ))}
    </ul>
  );
}

async function updateTodo({ id, status }) {
  await fetch(`/api/todos/${id}`, {
    method: 'PUT',
    body: JSON.stringify({ status }),
    headers: { 'Content-Type': 'application/json' },
  });
}

この例では、useMutation フックを使用して、データの更新時に呼び出される関数を含む mutation という変数を宣言します。ボタンをクリックして handleUpdate 関数をトリガーし、対応する To-Do 項目を完了して、更新リクエストをサーバーに送信します。

5. データを自動的に同期する

React Query は自動同期機能も提供しており、データが変更されたときにインターフェースを自動的に更新できます。 useQuery 構成項目の refetchOnMount および refetchInterval オプションを使用して、データのクエリと更新を自動的にトリガーできます。

function MyComponent() {
  const { data, isLoading } = useQuery('todos', fetchTodos, {
    refetchOnMount: true,
    refetchInterval: 3000, // 每 3 秒自动更新一次数据
  });

  // ...
}

この例では、refetchOnMount を true に設定します。これは、コンポーネントが初めてマウントされたときにデータ クエリがトリガーされることを意味します。同時に、refetchInterval を 3000 に設定します。これは、データの自動更新を実現するためにデータ クエリが 3 秒ごとにトリガーされることを意味します。

3. まとめ

React Query データベースプラグインを利用することで、データの自動同期機能を簡単に実現できます。この記事では、React Query の基本的な使用法を簡単に紹介し、具体的なコード例を示します。この記事が React Query の理解と使用を深め、実際のプロジェクトで役割を果たすのに役立つことを願っています。

以上がReact Query データベース プラグインを使用して自動データ同期を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。