React Query

6211 ワード
クエリーへの応答 react-query テキストリンク
状態管理に関するライブラリを探索したところReactQueryであることが判明し,ReactQueryに関する技術ワークショップのビデオを見つけ,ワークショップの内容を整理した.
優雅な技術反応Queryワークショップビデオリンク

React Queryが必要


Frontendで必要な状態管理はRedux,recoilなどの状態管理ライブラリで管理する.

Redux Storeが一般的に採用されています


reduceで実現される非同期通信では、fetch値を格納するためのコードが少なくない.
Store=「グローバルステートストレージと管理のスペース」
ステータス管理領域はストレージサーバ値に拡張されています.これでいいですか.

すべてがリポジトリによって管理されている場合、

  • API通信関連コードはいずれもStoreにある.
  • 重複するisFetching、isError等のAPI関連状態
  • 重複する類似構造のAPI通信コード

    • サーバから受信したサーバステータス属性

  • クライアント制御または所有していないリモート空間での管理とメンテナンス.
  • FetchingまたはUpdateには非同期APIが必要です.
  • 他の人と共有し、ユーザーが知らない場合に変更される場合があります.
  • 気にしなければ潜在的な「時代遅れ」の可能性.
    • 実際,FEにこれらの値を格納するstateはキャッシュである.

    クライアントの状態とサーバの状態をRedux Storeとして管理した方が良いですか?


    Resact Queryとは?


    React Query
  • サーバ状態に関するデータのインポート、キャッシュ、同期、データ更新
  • zero-configはすぐに使用でき、よろしければconfigもカスタマイズできます.

    • React Queryの3つのコア概念


    Queries


    一般的にGET受信用のAPIのほとんどの子供(データ取得用)
    import { useQuery } from 'react-query';

function App() {

// 'todos'가 Query Key
// fetchTodoList가 Query Function
// 원한다면 세번째 인자로 config option 설정 가능하다.
const info = useQuery('todos', fetchTodoList);

}
  • React QueryはQuery Keyに従ってquery cachingを管理する.
  • Query KeyはString、Array形式として使用できる.
  • Query Function:Promiseの関数を返します.データを解決したり、エラーを投げ出したりします.

    • userQuery戻り値

  • data:最後に成功した解析データ
  • error:エラー発生時に返されるオブジェクト
  • isFetch:Request飛行中true
  • status、isLoading、isSuccess、isLoading等:いずれも現在のquery状態
  • refact:対応するquery refact関数を提供する
  • remove:対応するquery cacheから削除する関数を提供する
  • etc.

    • useQuery Options

  • onSuccess、onError、onSettings:queryキャプチャ成功/失敗/完了時に実行されるSide Effect定義
  • enabled:queryを自動的に実行するか
  • 再試行:query動作に失敗した場合、自動再試行の有無を決めるオプション
  • select:成功した場合にインポートしたデータを加工して転送する(例えば、data.data.resultなどの構造の場合に加工する)
  • Keep PreviousData:新規データ取得時に旧データを保持するか
  • refact Interval:定期的にrefactを行うかどうかを決めるためのオプション
  • etc.

    • 推奨ファイル構造

  • Query宣言の文書管理

    • 何時間使いますか。


    複数のuseQueryを使って、自分で並行してうまく仕事ができます.

    Mutations


    データ更新用の子供(CRUDで作成/更新/削除用)
    // Promise반환함수만 넣어주면 된다.
// (디버깅 원할 땐 Query Key를 넣어주면 devtools에서 볼 수 있다)
const mutation = useMutation(newTodo => {
	return axios.post('/todos', newTodo);
});

    useMutation戻り値

  • mutate:変異を実行する関数
  • mutateAsync:mutateは似ていますが、Promiseに戻ります.
  • reset:突然変異内部状態clean
  • 他の人はuseQueryに似ている

    • useMutation Options

  • onMutate:正式なMutate操作の前に先に操作を行う関数であり、Optimic updateを適用する際に非常に有用(Optimical update:結果を楽観的に見たり、状態を予め変更したりして失敗したらロールバック)
  • 他のuseQueryと似ている

    • Query Invalidation

  • 単純にqueryClientでinvalidateメソッドを呼び出せばよい.
    // Invalidate every query in the cache
queryClient.invalidateQueries();

// Invalidate every qeury with a key that starts with 'todos'
queryClient.invalidateQueries('todos');
  • このように記述すると、対応する鍵を持つqueryは時代遅れとみなされ、現在提示されているqueryはバックグラウンドで再構成される.

    • cachingとSynchronizationは?

  • cacheTime:メモリの数(この時間以降はGC処理、defaultは5分)
  • 経過時間:経過時間後経過データ(defaultは0)
  • OnMount/ReferエッチングOnWindowFocus/ReferエッチングOnReconnect｣Mount/Window Focus/Reconnectの再エッチングでデータが古いと判断した場合、全て再エッチング(デフォルトはtrue)

    • 価格はどこで管理しますか?


    QueryClient内部でContextを使用します.

    React Queryの利点

  • サーバ状態の管理が容易(Redux、MobXと比較)、直感的なAPI呼び出しコード
  • API処理のための各種インタフェースとオプションの提供
  • クライアントストレージは、FEにおいて本当に必要なグローバル状態のみを保持し、ストレージのように使用する
  • devtoolsシームレスデバッグ提供
  • キャッシュポリシーが必要な場合が好ましい

    • 考慮すべき部分

  • コンポーネントが相対的に肥大化している(コンポーネント設計/分離が必要)
  • より難易度の高いプロジェクト設計(コンポーネントの使用状況の最小化・特定)が必要
  • React Queryのメリットをいかにうまく活用するか(API通信だけではないかもしれない)
    • C#マルチスレッドのいくつかの実装方法
    スレッド同期ツールクラス