react-queryバー

9298 ワード
テキストリンク
Reactプロジェクトのサーバとクライアント間の非同期ロジックを簡単に処理できるツールです.
正式書類:https://react-query.tanstack.com/
参考動画:https://www.youtube.com/watch?v=MArE6Hy371c

React Queryは

  • fetching
  • cashing
  • 同期
  • updating server state
    • 仕事を簡単にする

    React Queryの3つの重要な概念


    1. Queries


    2. Mutations


    3. Query Invalidation


    Query Key

  • react QueryはQuery Keyに従ってqueryキャッシュを管理

    • String形状

     // Queries
   const query = useQuery('todos', getTodos)	// queryKey === ['todos']

    アレイ形式

    // Array 
useQuery(['todo',5],...)	// querykey === ['todo', 5]

useQuery(['todo', 5, {preview: true}], ...) 	// queryKey === ['todo', 5, {preview: true}]

useQuery(['todo', {type: 'done'}]...)	// queryKey === ['todo', {type: 'done'}]
  • 鄭在南のコメント
    • 関連コンテンツ
    https://github.com/tannerlinsley/react-query/releases/tag/v4.0.0-alpha.1

    userQueryが返す

  • data:最後に解析に成功したデータ(応答)
  • error:エラー発生時に返されるオブジェクト
  • isFetch:Request飛行中true
  • status, isLoading, isSuccess, isLoading .. //Query状態
  • refact:対応するquery refact関数を提供する
  • remove:対応するquery cacheから削除する関数を提供する

    • 3番目のパラメータ・オプション


  • onSuccess、onError、onSettings:queryキャプチャ成功/失敗/完了時に実行するSide Effect定義

  • enabled:queryを自動的に実行するかどうか

  • ≪再試行｜Retry｜oem_src≫:問合せ操作に失敗した場合に、自動的に再試行するかどうかを決定するオプション

  • select:成功時にインポートしたデータの加工と転送

  • keepPreviousData:新しいデータを取得するときに古いデータを保持するかどうか

  • refect Interval:定期的にrefectを行うかどうかを決定するオプション

    • Queryファイルの分離も推奨

  • useQueryは直接部品に使用すると管理が難しい場合があります.
    • コンポーネントに宣言をインポートして使用する場合は、便利//ドメインでグループ化および管理できます.

    queryが複数の場合
    function App(){
  const usersQuery = useQuery('users', fetchUsers)
  const teamsQuery = useQuery('teams', fetchTeams)
  const projectsQuery = useQuery('projects', fetchProjects)
  ...

    Mutations

  • データ更新用
    •    const mutation = useMutation(newTodo => {
     return axios.post('/todos', newTodo)
   })

    useMutation


    -戻り値

     const {
   data,
   error,
   isError,
   isIdle,
   isLoading,
   isPaused,
   isSuccess,
   mutate,
   mutateAsync,
   reset,
   status,
 } = useMutation(mutationFn, {
  • mutate:変異関数
  • mutateAsync:mutateに似ている//But Promise戻り
  • reset:突然変異内部状態clean

    • -option

     } = useMutation(mutationFn, {
   mutationKey,
   onError,
   onMutate,
   onSettled,
   onSuccess,
   retry,
   retryDelay,
   useErrorBoundary,
   meta,
 })
  • onMutate:正式なMutate動作の前に先に動作する関数であり、Optimic updateを適用する場合に有用

    • Query Invalidation

  • 内部キャッシュのクリア

    • CapchingとSynchronization


    stale while revalidate


    バックグラウンドで古いレスポンスを再検証すると、キャッシュは古いレスポンスを返します.
    CacheTime:メモリの数(時間後GC処理、default 5分)
    ≪古い時間|Latency|emdw≫:データが古いのはどのくらい後ですか(default 0)

    Query状態フロー

  • スクリーンに消えたquery
  • A照会例はmount
  • ネットワークからデータを取得し、Aという名前のqueryキーワードキャッシュを使用する
  • データがfreshステータスからstaleTime(deaftult=0)後staleステータス
  • Aクエリインスタンスがアンインストールされている
  • キャッシュを維持cacheTime(default=5 min)ゴミ収集器に収集

    • staleTime

  • データがfresh->stale状態の場合の残り時間
  • クエリーインスタンスをアンインストールすると、データはinactiveステータスとなり、キャッシュは保持されるcacheTime
    • 過ぎた
  • cacheTimeゴミ収集器が集められます.
  • cacheTimeクエリインスタンスが通過する前に再ロードされた場合、データ取得時にキャッシュデータが表示される

    • QueryClient内部でのContextの使用

    fasterxml: Unrecognized token '***': was expecting ('true', 'false' or 'null')
    [Swift]伯俊11047-硬貨0