React Query データベース プラグインを使用したリアルタイム データ更新

React Query データベース プラグインを使用してリアルタイムのデータ更新を行う

React Query は、データ処理プロセスの簡素化に役立つ強力なデータ管理ツールです。 React アプリケーションで。データの取得、キャッシュ、更新などの操作に洗練されたソリューションを提供します。この記事では、React Query プラグインを使用してリアルタイムデータ更新機能を実装する方法と、具体的なコード例を紹介します。

このプロセスをよりよく理解するために、単純なタスク管理アプリケーションを例として取り上げます。アプリケーションにタスク リストがあると仮定すると、ユーザーがタスクを完了したときに、タスクのステータスをリアルタイムで更新する必要があります。

まず、React Query プラグインをインストールする必要があります。ターミナルで次のコマンドを実行します。

npm install react-query

インストールが完了したら、React Query をアプリケーションのルート コンポーネントに導入し、グローバル QueryClient インスタンスを作成できます。コードは次のとおりです。

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
    </QueryClientProvider>
  );
}

export default App;

次に、リアルタイムでデータを更新する必要があるコンポーネントで、React Query が提供する useMutation フックを使用してデータ更新オペレーションを作成します。タスク完了ボタンのクリック イベント ハンドラーで更新ロジックを定義できます。具体的なコードは次のとおりです。

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

function TaskItem({ task }) {
  const queryClient = useQueryClient();

  const completeTaskMutation = useMutation(async () => {
    // 发送异步请求完成任务
    await fetch(`/api/tasks/${task.id}`, { method: 'PUT', body: JSON.stringify({ completed: true }) });

    // 手动更新缓存
    queryClient.setQueryData(['tasks', task.id], { ...task, completed: true });
  });

  const handleCompleteClick = () => {
    completeTaskMutation.mutate();
  }

  return (
    <div>
      <p>{task.name}</p>
      <button onClick={handleCompleteClick}>完成</button>
    </div>
  );
}

このコードでは、まず useMutation を呼び出して completeTaskMutation という名前の変数を作成します。これは、データ更新操作をトリガーするために使用される mutate 関数を含むオブジェクトです。

ボタンのクリック イベント ハンドラーで、completeTaskMutation.mutate() を呼び出してデータ更新をトリガーします。これにより、 useMutation で渡した async 関数が呼び出され、非同期リクエストが完了した後、キャッシュ内のデータが手動で更新されます。ここでは、setQueryData メソッドを使用してキャッシュ内のタスク データを更新し、最初のパラメーターとして ['tasks', task.id] を渡して、これがタスク リストのクエリ操作であることを示します。

最後に、タスク リスト コンポーネントで useQuery フックを使用してタスク データを取得します。コードは次のとおりです。

import { useQuery } from 'react-query';

function TaskList() {
  const { data } = useQuery('tasks', async () => {
    const response = await fetch('/api/tasks');
    const data = await response.json();
    return data;
  });

  return (
    <div>
      {data && data.map(task => (
        <TaskItem key={task.id} task={task} />
      ))}
    </div>
  );
}

このコードでは、useQuery('tasks', ...) を呼び出してクエリ操作を開始します。最初のパラメータはクエリを識別するために使用されるキーです。ここでは「タスク」を使用します。 2 番目のパラメータは、タスク一覧データを取得するために使用される非同期関数です。この関数で非同期リクエストを送信し、応答データを返すことができます。 React Query はこのデータを自動的にキャッシュし、必要に応じて更新します。

上記のコード例を通じて、React Query プラグインを使用してリアルタイム データ更新機能を実装することに成功しました。新しいデータの作成、データの更新、データの削除のいずれであっても、React Query はデータの取得と更新プロセスの管理に役立ち、アプリケーションでのデータ処理の複雑さを大幅に簡素化します。この記事が React Query の使い方を学ぶのに役立つことを願っています。

以上がReact Query データベース プラグインを使用したリアルタイム データ更新の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。