ホームページ > 記事 > ウェブフロントエンド > React Query でデータを追加、削除、変更、クエリするにはどうすればよいですか?
React Query でデータを追加、削除、変更、クエリするにはどうすればよいですか?
現代の Web 開発では、フロントエンドとバックエンドを分離するアーキテクチャが広く使用されています。フロントエンド開発者は通常、データの追加 (Create)、削除 (Delete)、更新 (Update)、クエリ (Query) など、バックエンド データを操作する必要があります。これらの操作を簡素化し、開発効率を向上させるために、React Query ライブラリが一般的な選択肢となっています。この記事では、React Query を使用してデータを追加、削除、変更、クエリする方法を紹介します。
React Query は、非同期データの管理に重点を置いた状態管理ライブラリです。データの取得、更新、削除に加え、データのキャッシュと無効化を自動的に管理するための強力なツールと API のセットを提供します。
まず、React Query をインストールして設定する必要があります。次のコマンドを使用して React Query をインストールできます:
npm install react-query
または
yarn add react-query
次に、アプリケーションのルート コンポーネントに React Query Provider を追加します:
import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClient(); function App() { return ( <QueryClientProvider client={queryClient}> {/* 应用程序的其他组件 */} </QueryClientProvider> ); }
次に、 React Query でデータの追加、削除、変更、クエリを実装する方法を見てみましょう。
新しいデータを作成するには、useMutation
フックを使用します。このフックは関数をパラメータとして受け取り、リクエストの送信と新しいデータの作成に使用されます。この関数は Promise を返し、データが正常に作成された後に解決する必要があります。
import { useMutation } from 'react-query'; function CreateData() { const { mutate, isLoading } = useMutation((data) => fetch('/api/data', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json', }, }).then((res) => res.json()) ); const handleCreate = () => { mutate({ name: 'New Data' }); // 传递新数据到 mutate 函数 }; return ( <div> <button onClick={handleCreate} disabled={isLoading}> {isLoading ? 'Creating...' : 'Create Data'} </button> </div> ); }
上記のコードでは、useMutation
フックを使用して、CreateData
という名前のコンポーネントを作成します。 mutate
この関数は、リクエストをトリガーし、新しいデータを作成するために使用されます。この例では、新しいデータをリクエストの本文として使用して、POST リクエストを /api/data
アドレスに送信します。リクエストが成功すると、res.json()
メソッドを呼び出して応答が解析され、Promise の解決後にデータが返されます。
データを削除するには、useMutation
フックを再度使用し、DELETE リクエストを送信します。データ作成の例と同様に、削除関数を渡し、関数が成功結果を返した後に解決する必要があります。
import { useMutation } from 'react-query'; function DeleteData({ dataId }) { const { mutate, isLoading } = useMutation(() => fetch(`/api/data/${dataId}`, { method: 'DELETE', }).then((res) => res.json()) ); const handleDelete = () => { mutate(); }; return ( <div> <button onClick={handleDelete} disabled={isLoading}> {isLoading ? 'Deleting...' : 'Delete Data'} </button> </div> ); }
上記のコードでは、DeleteData
という名前のコンポーネントを定義し、useMutation
フックを使用して削除関数を作成します。この関数は、DELETE リクエストをアドレス /api/data/{dataId}
に送信します。{dataId}
は、削除するデータの一意の識別子です。リクエストが成功すると、結果が Promise 解決として返されます。
データを更新するには、useMutation
フックを再度使用して PUT または PATCH リクエストを送信します。データの作成と削除の例と同様に、データを更新する関数を渡し、関数が成功を返した後に解決する必要があります。
import { useMutation } from 'react-query'; function UpdateData({ dataId }) { const { mutate, isLoading } = useMutation((data) => fetch(`/api/data/${dataId}`, { method: 'PUT', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json', }, }).then((res) => res.json()) ); const handleUpdate = () => { mutate({ name: 'Updated Data' }); }; return ( <div> <button onClick={handleUpdate} disabled={isLoading}> {isLoading ? 'Updating...' : 'Update Data'} </button> </div> ); }
上記のコードでは、UpdateData
という名前のコンポーネントを作成し、useMutation
フックを使用して更新関数を作成しました。この関数は、更新されたデータをリクエストの本文として含む PUT リクエストを /api/data/{dataId}
アドレスに送信します。リクエストが成功すると、結果が Promise 解決として返されます。
データをクエリするには、React Query の useQuery
フックを使用できます。このフックは引数として関数を受け取り、データを含むオブジェクトを返します。関数内で GET リクエストを送信し、応答内のデータを解析します。
import { useQuery } from 'react-query'; function GetData({ dataId }) { const { isLoading, error, data } = useQuery('data', () => fetch(`/api/data/${dataId}`).then((res) => res.json()) ); if (isLoading) { return <div>Loading...</div>; } if (error) { return <div>Error: {error.message}</div>; } return ( <div> <h2>Data: {data.name}</h2> </div> ); }
上記のコードでは、useQuery
フックを使用して、GetData
という名前のコンポーネントを作成しました。 useQuery
フックは文字列を識別子として受け取り、リクエストが成功した後にデータを自動的にキャッシュします。 GET リクエストを /api/data/{dataId}
アドレスに送信し、応答内のデータを解析します。データのロード中は、「ロード中...」というテキストが表示されます。エラーが発生した場合は、エラー テキストが表示されます。それ以外の場合は、クエリされたデータが表示されます。
要約すると、React Query を使用してデータを追加、削除、変更、クエリする方法を学習しました。 React Query は、データ管理と対話を簡素化するための多くの強力なツールと API を提供します。これらのツールやAPIを利用することで、より簡単にデータを操作でき、フロントエンド開発の効率を向上させることができます。この記事があなたのお役に立てば幸いです!
以上がReact Query でデータを追加、削除、変更、クエリするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。