React Query とデータベースを使用して増分データ同期を実現する

タイトル: React Query とデータベースを使用した増分データ同期

はじめに:
アプリケーションの開発に伴い、データの管理がますます重要になります。従来のアプリケーションでは、通常、データ同期を実現するためにポーリングまたはロング ポーリングが使用されます。ただし、この方法は非効率であるだけでなく、サーバー リソースの無駄も発生します。この問題を解決するには、React Query とデータベースを使用して増分データ同期を実現し、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させることができます。

この記事では、React Query とデータベースを使用して増分データ同期を実現する方法を紹介し、具体的なコード例を示します。まず、React Query の基本概念と使用法を説明し、次に React Query で増分データ同期を実装する方法を紹介します。最後に、データベースと対話してデータを追加、削除、変更、クエリする方法を示します。

1. React Query の基本概念と使用法
React Query は、サーバーによるリクエストとレスポンスの処理に重点を置いた最新の状態管理ライブラリです。データの取得、同期、キャッシュの管理に役立つシンプルで強力な API を提供します。 React Query の基本概念と使用法は次のとおりです。

1. Query: データを取得するために使用される操作。これには、クエリ識別子、リクエスト関数、およびその他の構成情報が含まれます。 useQuery フック関数を呼び出すことで、コンポーネント内でクエリを定義できます。
2. Mutation: データを変更するために使用される操作。クエリと同様に、データを変更するための識別子、要求関数、およびその他の構成情報が含まれています。 useMutation フック関数を呼び出すことで、コンポーネントに突然変異を定義できます。
3. QueryCache: データをキャッシュするための操作。データのキャッシュと無効化を自動的に管理し、アプリケーションのパフォーマンスと応答性を向上させます。
4. QueryClient: クエリとミューテーションの管理に使用されるインスタンス。これは useQueryClient フック関数を通じて取得できます。

2. 増分データ同期の実装
次に、React Query でデータの増分同期を実装する方法を紹介します。まず、データを取得および変更するためのクエリとミューテーションを定義する必要があります。具体的な例を次に示します。

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

function fetchData() {
  // 发起网络请求，获取数据
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => data);
}

function updateData(data) {
  // 发起网络请求，修改数据
  return fetch('/api/data', {
    method: 'PUT',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then(response => response.json())
    .then(updatedData => updatedData);
}

function App() {
  const { data } = useQuery('data', fetchData);
  const mutation = useMutation(updateData);

  const handleUpdate = newData => {
    // 调用 mutation.mutate 函数，更新数据
    mutation.mutate(newData);
  };

  return (
    <div>
      <button onClick={() => handleUpdate({})}>更新数据</button>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); }

ログイン後にコピー

上の例では、useQuery フック関数を使用して「data」という名前のクエリを定義し、fetchData 関数を呼び出してデータを取得します。次に、useMutation フック関数を使用して Mutation を定義し、updateData 関数を呼び出してデータを変更します。コンポーネントでは、mutation.mutate 関数を呼び出してデータの更新をトリガーします。

3. データベースとの対話
上記のコード例の fetchData 関数と updateData 関数は、単純なネットワーク リクエストの例にすぎません。実際のアプリケーションでは、通常、データベースと対話する必要があります。以下は、データベースに対する操作の追加、削除、変更、クエリの例です。

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

function fetchTodos() {
  return axios.get('/api/todos')
    .then(response => response.data);
}

function addTodo(newTodo) {
  return axios.post('/api/todos', newTodo)
    .then(response => response.data);
}

function updateTodo(id, updatedTodo) {
  return axios.put(`/api/todos/${id}`, updatedTodo)
    .then(response => response.data);
}

function deleteTodo(id) {
  return axios.delete(`/api/todos/${id}`)
    .then(response => response.data);
}

function TodoList() {
  const { data: todos } = useQuery('todos', fetchTodos);
  const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries('todos');
    }
  });

  const handleAddTodo = newTodo => {
    mutation.mutate(newTodo);
  };

  const handleUpdateTodo = (id, updatedTodo) => {
    updateTodo(id, updatedTodo)
      .then(() => queryClient.invalidateQueries('todos'));
  };

  const handleDeleteTodo = id => {
    deleteTodo(id)
      .then(() => queryClient.invalidateQueries('todos'));
  };

  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault();
        handleAddTodo({
          text: e.target.elements.text.value
        });
        e.target.reset();
      }}>
        <input type="text" name="text" placeholder="输入待办事项" />
        <button type="submit">添加</button>
      </form>
      {todos && todos.map(todo => (
        <div key={todo.id}>
          <span>{todo.text}</span>
          <button onClick={() => handleUpdateTodo(todo.id, { completed: !todo.completed })}>
            {todo.completed ? '标为未完成' : '标为完成'}
          </button>
          <button onClick={() => handleDeleteTodo(todo.id)}>
            删除
          </button>
        </div>
      ))}
    </div>
  );
}

上記のコード例では、axios ライブラリを使用してネットワーク リクエストを送信し、データベースと対話します。ご覧のとおり、useMutation フック関数を使用して addTodo という名前の Mutation を定義し、To-Do 項目を追加するために使用されます。追加が成功すると、queryClient.invalidateQueries('todos') が呼び出されてデータが更新されます。同様に、ToDo 項目を更新および削除するための updateTodo と deleteTodo の Mutation も定義します。

概要:
この記事では、React Query とデータベースを使用して増分データ同期を実現する方法を紹介します。 React Query の Query と Mutation を使用すると、データの取得、変更、追加、削除が簡単に行えます。同時に、データベースと対話し、ネットワーク リクエストを通じてデータを操作する方法も示しました。この記事が増分データ同期を理解し、アプリケーションをより効率的かつ便利にするのに役立つことを願っています。

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