Reactクエリ3：データの取得と管理のガイド

Reactクエリを使用してフロントエンドCRUDアプリケーションのデータ収集を簡素化

フロントエンドのCRUDアプリケーションの構築は最初は簡単ですが、機能が増加するにつれて複雑さが急速に増加します。各APIエンドポイント、状態管理、同期、キャッシュ、およびエラー処理が必要です。この記事では、Reactクエリと呼ばれるライブラリと、これらすべての問題を解決するのに役立つ方法を紹介します。ライブラリは、「データ収集ライブラリの欠落」であると主張し、Reactアプリケーションに「サーバー状態管理」を提供します。

完全なReactクエリデモプロジェクトを使用して、ライブラリが提供するコア機能を学習します。その後、この知識を自分のプロジェクトに適用できます。まず、プロジェクトのセットアップを開始する前に、それについて少し学びましょう。

キーポイント

• React Query 3は、Reactアプリケーションの状態管理とデータ収集、キャッシュ、同期、エラー管理を効率的に簡素化します。
• このライブラリは、React、Reactルーター、およびREST APIに精通している中間から高レベルの開発者に適しています。
• React Query 3は、2.Xバージョンに新しい機能と改善を追加し、アップグレードされたユーザー向けの移行ガイドを提供します。
デモプロジェクトのデモの重要な機能には、基本的なクエリ、ページングクエリ、無制限のクエリ、および作成、更新、および削除操作が含まれます。
React QueryのDevToolsユーティリティは、内部状態とプロセスをリアルタイムで視覚化することにより、デバッグを支援します。
• データの鮮度とキャッシュの期間を管理することにより、
• やcacheTimeなどの構成オプションがパフォーマンスを最適化します。 staleTime
このライブラリは、無制限のスクロールや複雑な状態依存関係などの高度なシナリオをサポートし、ユーザーエクスペリエンスや開発者エクスペリエンスを向上させます。

react react query 3について

React Queryは、Tanner Linseyによって作成されたオープンソースプロジェクトです。 React Query 3の最新バージョンは、2020年12月に正式にリリースされました。この新しいバージョンでは、新機能が追加され、既存の機能が改善されました。

以前に非常に人気のあるバージョンのReact Query 2.xと比較して、いくつかの重要な変更があることに注意する必要があります。古いバージョン用に書かれた多くの古いチュートリアルに遭遇する可能性があるため、これらの変更を明確に説明する移行ガイドがあります。

新しいバージョンは大幅に改善され、以前に報告されたバグの多くが解決されました。 3.Xバージョンは生産の準備ができていますが、まだ開発中であり、新しく発見されたバグで定期的に修正されています。

予防策

この記事は、以下の基本的なスキルと知識を習得した中間から高レベルのフロントエンド開発者向けです。

反応

• React router
• race fooks
• REST APIデータ収集
開発マシン環境では、以下を設定する必要があります。

node.js

git
郵便配達員、不眠症、vsコードの休憩拡張機能などの休憩クライアント
プロジェクトについて

• 分析するデモプロジェクトは、Reactクエリを使用してREST JSON APIサーバーから提供されたデータを取得するReactフロントエンドアプリケーションです。アプリは5ページのみで構成されており、Reactクエリが提供するものを示しています。これらの機能には次のものが含まれます

  基本的なクエリ
  ページネーションクエリ
  無制限のクエリ
  操作を作成
  操作を更新
  操作を削除
  Reactクエリはより多くの機能を提供しますが、この記事はスペースが制限されており、1つずつ導入することはできません。使用するアプリのプレビューは次のとおりです。

  

  プロジェクトの設定

  セットアップを開始する前に、プロジェクトで使用されている他の依存関係を簡単に見てみる方が良いと思います。これらには次のものが含まれます

  vite：非常に高速なビルドツール

  Windicss：非常に高速なTailwind CSSコンパイラ
  Reactフックフォーム：Reactフックを使用するフォームビルダーと検証ライブラリ
  反応モーダル：アクセス可能なモーダルコンポーネント
  axios：約束ベースのブラウザhttpクライアント
  JSONサーバー：完全な偽造REST API Server
  • 自分のマシンにReactクエリデモアプリケーションを設定するには、次の手順を実行します。
  JSON-Serverが使用するデータベースファイルには、さまざまなユーザーが含まれています。

  を実行すると、偽のAPIサーバーがポート3004で開始されます。 GETリクエストを実行すると、次の例JSON応答が生成されます。

  # 克隆项目
  git clone git@github.com:sitepoint-editors/react-query-demo.git
  
  # 导航到项目目录
  cd react-query-demo
  
  # 安装包依赖项
  npm install
  
  # 为 json-server 设置数据库文件
  cp api/sample.db.json api/db.json
  
  # 启动 json-server
  npm run json-server

  次に、フロントエンドコードを実行する開発サーバーを開始します：

  npm run json-server

  ブラウザに移動して

  [
    {
      "id": 1,
      "first_name": "Siffre",
      "last_name": "Timm",
      "email": "stimmes0@nasa.govz",
      "gender": "Male"
    },
    {
      "id": 2,
      "first_name": "Fonzie",
      "last_name": "Coggen",
      "email": "fcoggen1@weather.com",
      "gender": "Female"
    },
    {
      "id": 3,
      "first_name": "Shell",
      "last_name": "Kos",
      "email": "skos2@prweb.com",
      "gender": "Female"
    }
  ]

  を開いて、アプリケーションにアクセスします。上記のプレビューと同じ経験をする必要があります。次のタスクを実行して、アプリケーションの機能を徹底的に調査してください。
  基本クエリページ（ホームページ）を表示します。

  # 在另一个终端中，启动 React 开发服务器
  npm run dev

  ページングページにアクセスし、前のボタンと次のボタンと対話します。 http://localhost:3000

  無制限のページにアクセスし、[ロード]ボタンを操作します。
  • 基本クエリページに戻り、[ユーザーの作成]ボタンをクリックします。 Createユーザーページに送信されます。フォームに入力して、[保存]ボタンをクリックします。
  • ユーザーテーブルで、編集アイコンを見つけます。クリックしてください。これにより、[ユーザーの編集]ページに表示されます。好きな変更を加えて、[保存]ボタンをクリックします。
  • ユーザーテーブルで、「削除」アイコンを見つけます。クリックしてください。これにより、削除操作を確認するように依頼するモーダルダイアログボックスが開始されます。 [削除]ボタンをクリックして確認します。
  • 上記のタスクをすべて完了した後、プロジェクトの分解を開始できます。各コンポーネントの位置とビューを理解するには、プロジェクト構造を確認してください。この記事では、これらのコンポーネントの簡素化されたバージョンを提供して、プロジェクトでReactクエリを使用することの基本を理解できるようにします。
  インストールreact query

  reactクエリは、次のコマンドを使用して、空白または既存のReactプロジェクトにインストールできます。

  # 克隆项目
  git clone git@github.com:sitepoint-editors/react-query-demo.git
  
  # 导航到项目目录
  cd react-query-demo
  
  # 安装包依赖项
  npm install
  
  # 为 json-server 设置数据库文件
  cp api/sample.db.json api/db.json
  
  # 启动 json-server
  npm run json-server

  このパッケージには、必要なものすべてが含まれています。これには、後で説明します。パッケージをインストールした後、トップレベルのコンポーネントを更新する必要があります -

  - 以下に示すように： App.jsx

  [
    {
      "id": 1,
      "first_name": "Siffre",
      "last_name": "Timm",
      "email": "stimmes0@nasa.govz",
      "gender": "Male"
    },
    {
      "id": 2,
      "first_name": "Fonzie",
      "last_name": "Coggen",
      "email": "fcoggen1@weather.com",
      "gender": "Female"
    },
    {
      "id": 3,
      "first_name": "Shell",
      "last_name": "Kos",
      "email": "skos2@prweb.com",
      "gender": "Female"
    }
  ]

  の子コンポーネントは、Reactクエリライブラリが提供するフックにアクセスできます。この記事で使用するフックは次のとおりです。

  QueryClientProvider

  • useQuery
  • useInfiniteQuery
  • useMutation
  • useQueryClient以下は更新された（簡素化されたバージョン）
  サブビューを使用して使用します。

  App.jsx（そのようなコンテンツ、UIコンポーネント、基本クエリ、ページネーションクエリ、無制限のクエリ、突然変異、その他の章など、要件に応じて残りの部分を引き続き翻訳してください。）

  以上がReactクエリ3：データの取得と管理のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。