反応質問によるデータ取出しとキャッシュメンテナンス

サーバーからデータを取得し、それを維持するフロントエンドの開発には非常に重要な問題です.この記事では、我々は反応に焦点を当てる.ライブラリのアプリケーションとどのように我々はライブラリの状態を維持するライブラリを使用して反応クエリと呼ばれる.

に問い合わせる
反応して、状態の3つのタイプがあります:地方の州(それは反応している構成要素で永続されます);グローバル状態、すべてのコンポーネントがそれにアクセスできますそしてサーバの状態はサーバの中で最も持続し、両側に依存します.フロントエンドのサーバー状態を管理し、バックエンドと同期するには、データを更新、キャッシュ、再取得する必要があります.時々、バックエンドを必要以上に呼びます.そして、これは我々のアプリケーションでパフォーマンス問題を引き起こすかもしれません.そこでは、応答クエリライブラリは、これらのパフォーマンスの問題を解決するために、適切にキャッシュを管理し、クエリキャンセル、古い時間の設定、無限のクエリの再フェッチなどの便利な機能を与えることができます.
応答クエリは、フェッチ、キャッシュを提供し、反応アプリケーションで非同期データを更新する2つの単純なフックを持ってライブラリです.それは2017年にオープンソースサーナーTanner Linsleyによって作成されました、そして、現在、それは反応アプリケーションでサーバー状態管理で非常に役に立つということがわかりました.サーバの状態管理のためのSWR、アポロクライアント、RTKクエリなどの他のライブラリもあります.https://react-query.tanstack.com/comparison . Responseページ比較によると、Responseは客観的に最高のオプションです.

反応クエリを使用する利点
問い合わせに対する応答をもたらす利点のいくつかは、次のとおりです.

QueryClientConfigオブジェクトを作成する、古いフォーム、キャッシュ、再試行の遅延時間を設定します.

バックグラウンドで古いデータを更新するには、問い合わせのプリフェッチを行います.

バックエンドへのリクエストの最適化.

refetchWindowFocus機能を使用すると、ユーザーがブラウザのタブを変更するときにバックグラウンドで再取得することができますまたはアプリケーションに戻ってくる.

あとで指定するものも多い.
何が反応クエリーの用語で、時空とキャッシュ時間ですか?たぶん、我々は、クエリーに反応サイクルがある5つのクエリー状態を説明することから始めることができます、そして、また、我々は反応質問devツールで遭遇するでしょう.

フレッシュ:この状態は、両側にほぼ同じデータがあるとき(データを受信した時、誰かが同時に更新される可能性があるので)を返します.
取得:最初にデータを正常に取得します.
古い:バックエンドから再取得する必要があります.
非アクティブ:この状態は、アプリケーションの速度/UXを改善するために使用されます.削除された状態の前にある.
最後の状態は削除状態です.しばらくしてデータがアクティブになった後にキャッシュから削除されます.
問い合わせの状態を理解した後に、古い時間とキャッシュ時間を説明できます.StaleTimeは新鮮から古い状態への移行の期間です.我々が新鮮な州にいるならば、我々はキャッシュだけからデータを得ます、しかし、我々が我々が我々がバックグラウンドフェッチをするかもしれない古い状態にあるならば.キャッシュされていないクエリがキャッシュから削除されるまでの期間です.ライブラリからQueryClientProviderコンポーネントに渡すか、またはローカルで渡すと、それを設定できます.
図書館が提供する2つのフックは、usequeryとusemutationです.USequeryはデータを取得するために使用され、USEMutationは、サーバー内のデータの作成、削除、および更新に使用されます.usequeryは、この呼び出しを構成するためにAPIと1つのオブジェクトを呼ぶ機能、キーをとります.すべてのクエリはQueryCacheに格納されます.

const { data: questions = {}, isLoading}} = useQuery("questions",getQuestions,{staleTime:5000,cacheTime:10});

それに加えて、あなたはusequeryでダイナミックなパラメータを送ることができます、そして、彼らが変わるとき、それはサービスを呼びます.たとえば、次のコードでは、「ベンダー」コンポーネントが変更されると、再度サービスを呼び出します.

export const useFetchQuestions = (vendors: Array<string>,element: number) =>
 useQuery([vendors], () => FormService.getDynamicQuestions(vendors, element));

usemutationは必要に応じてサービスに突然変異機能を取ります、しかし、突然変異キーはオプションです.すべての突然変異は、muttioncacheに格納されます.また、QueryCacheとModultCacheと対話する必要がある場合は、まずQueryClientにアクセスする必要があります.

export const useDownloadFile = (filePath: string, fileId: number) =>
 useMutation(() => FormService.downloadFile(filePath, fileId));

結論
応答クエリは、サーバーの状態、怠惰なローディング、ページ化とキャッシュメンテナンスを管理するために反応するアプリケーションで使用する素晴らしいツールです.これは、シンプルなアプローチと実装しています.そのdevtoolサポートでは、より複雑なアプリケーションでも使用することは明らかです.プロジェクトを含む
すべての状態はローカル、反応クエリのように多くのboilerplateコードを保存し、サーバーとローカル状態を同期させる/Reduxを反応させる.私はこの記事があなたのプロジェクトに貢献することができる反応を再開するのに役立つことを願っています.もっと先進的なトピックについては、このブログを見てみてください.https://tkdodo.eu/blog/practical-react-query このライブラリと彼の記事の最大の協力者のいずれかによって書かれて大きな助けとなることができます.

興味のリンク
Data fetching in Redux is painful, get rid of it now デイヴィッドCantelli @媒体によって
ガブリエルAbud @ dev . toによって
React Query – An Underrated State Management Tool Tharaka Romesh @ビットと断片によって
React state management in 2022 – Return of the Redux によって
Comparison | React Query vs SWR vs Apollo vs RTK Query @応答クエリ
RTK Query Comparision @Reduxツールキット
ディランTientcheuによって
How and Why You Should Use React Query ナサンSebhastian @ビットと断片によって
Getting Started with React-Query for Data Fetching and State Management ケビンKimani @セクションによって
ニコラスサントス@ dev . toによって