応答クエリ

おい、あなたが無事であることを願っています.今日は反応質問について書きます.何がこのライブラリの使用であり、なぜあなたはそれを使用したいですか?
私は過去6ヶ月間この図書館で働いていました、そして、私はなぜ私が前にそれについて知らなかったかのように、私自身に尋ねていました?

なぜ?

私はなぜなぜあなたが反応の質問のような何かを使用する理由を共有するつもりですか?反応生態系私たちはRUDXのような国家管理から、すべての材料のUIなどのUIライブラリにMobXを持っている.
しかし、私たちは常に私は特に闘争、それはAPIのフェッチです.はい、それは真実です、そして、私はあなたがそれにも苦労するかもしれない賭けられることができます.
を参照してください.APIの取得は、ユーザの前でリストを取り出したりレンダリングしたりする以外にたくさんのことをする必要があります.実際にユーザーエクスペリエンスを気にする場合は、このようなパターンに従ってください.
それは私たちの責任は、シーンの背後に起こっているユーザーを認めることです.データを取得するように.何かが間違って表示エラーメッセージなどを行った場合.
我々は常に手動ですべてのこのようなものの世話をする必要があります.コンポーネントでAPIを取得するたびに私はいつもそれに苦労します.

国家管理.(サーバ状態対ローカル状態)
私はケントC .ドッズのブログを読んでいました、そして、彼は特に我々が取り扱う必要がある2つのタイプの州(データ)があると言いました.
1 )サーバ状態
2 )地方国家
REDUXライブラリのようなグローバルな状態管理ライブラリを使用するだけではなく、個別に扱う必要があります.
この状況の最良の例の一つはチャットメッセージングシステムです.
一般的にメッセージングアプリケーションでは、メッセージを送信するたびにローダが表示されますし、肯定応答(送信)とエラー(メッセージが失敗).この状況では、両方の側面の状態を更新する必要があります.
あなたがより多くの機能を追加しようとすると、これは複雑になることができます.
私がreduxと以前に反応して学んでいたとき、私はreduxがすべての問題のただ一つの解決であると思いました、しかし、日は過ぎました、そして、私は世界的な州管理を持つことがすべての挑戦に対処するのに十分でないと理解しました.

キャッシング
初心者の場合は、これを無視することができますが、単純な言葉では、キャッシュはクライアント側のストレージです.
データをサーバーに要求するたびに.我々のブラウザキャッシュ(永続する)データ.サーバーにデータを要求する前に、ブラウザはキャッシュを調べます.これはまた、私たち自身でキャッシュを管理することができますが、それを実装するより良い方法はありません.
キャッシングは、アプリのスケーリングの面で非常に重要な役割を果たす.あなたはインターネット上でキャッシュについての詳細を学ぶことができます.

応答クエリ
応答クエリは、上記のすべての課題の解決策です.これは、データ取得ライブラリまたは私は反応生態系の欠落部分として導入する必要があります.応答クエリは、ローカル、サーバーの状態を管理し、キャッシュの状態、エラー、データなどのさまざまなAPIの状態を管理する状態のキャッシュからすべての世話をする.
応答クエリは、キャッシュを管理し、すべてのコンポーネント間であなたの状態の同期クライアントアプリケーションを使用してアプリケーションをラップします.(私の好きな部分).😍

十分な話、例を示しましょう.
我々は、応答クエリの助けを借りてサーバーから投稿を取得する予定です.

最初に我々のアプリをラップしますQueryClientProvider .

   import { QueryClient, QueryClientProvider } from "react-query";
   const queryClient = new QueryClient();

   const App = () => { 
      return  <QueryClientProvider client={queryClient}>
       <Posts />
     </QueryClientProvider>
   }

私たちはuseQuery データを取得するフック.
これはちょうど始まりです.

import { useQuery } from "react-query";

const Posts = () => {
    const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://jsonplaceholder.typicode.com/posts').then(res =>
       res.json()
     )
   )

   if (isLoading) return 'Please wait...'

   if (error) return 'Error' + error.message

   return (
     <div>
        <h1> Posts of the Day </h1>
        { data.map(post => <h1 key={post.id}> {post.title} </h1>) }
     </div>
});
}

useQuery サーバからデータを取得する際に使用するフック.好きなものGET メソッド.このフックの抽象的な注意loading and error 取り扱いパーツ.

We didn't require to use try catch block here.

Key :キーはそれぞれのリクエストを一意に識別するために一意です.
コールバック:このコールバックは、非同期応答を返すコールバックである.また、使用することができますAxios はい.

注意:
このフックがサーバからデータを取得したら.データをキャッシュメモリに格納します.したがって、コンポーネントがサーバーから要求する代わりに再び同じ要求をしようとするとき、それはCache Memory .
また、サーバーからの新鮮なデータを必要とする場合は、キャッシュストレージを無効にすることができます.すべてを使用する必要がありますuseQueryClient フックreact-query .
次のセクションでその例を見ます.データをサーバに変異しようとすると.
我々がデータ突然変異について話すことができる前に.あなたは、コンポーネントを通してサーバー状態を管理するためにreduxのようなグローバル州管理ライブラリを使用する必要はないことに気づくかもしれません.既に使用しているのでCache Memory . これは自動的にデータを同期したり、手動で任意の状態を更新せずにデータを同期します.これは本当に複雑な反応のアプリケーションに役立つでしょう.
データ突然変異
新しいポストのリクエストをサーバに送りましょう.私たちはuseMutation サーバー上のデータを変異するライブラリ.

import { useMutation, useQueryClient } from "react-query";
const NewPost = () => {
   const client = useQueryClient();
   const { mutate, isLoading } = useMutation(async (newPost) => {
    return await Axios.post("https://myblog.app/new", {...newPost}, {
    // register all the callbacks,
    onMutate: () => {
       // this will be called when you invoke mutation method
      // ie like temporary showing blog
    },
    onError: (error) => {
     // this will be called when your API request get failed.
    },
    onSettled: () => {
    // this will work either way. (Success, Fail)
    },
    onSuccess: (response) => {
      // this will be called when your API request get 
     // executed successfully. 
     client.invalidateQueries("posts"); // will refetch posts
    }
});
})

 const newPost = () => {
    // add new post 
    mutate({ id: `temp-name`, title: "My Blog", content: "The content goes here..." }); 
 }


}

サーバー上のデータを簡単に変異することができます.また、コールバックは、手動で設定することなく起こっているユーザーを承認するのに役立ちます.これは前にやっていたよりもAPIを取得する簡単な方法だということができます.
このブログを書く意図は、この驚くべきライブラリについてお知らせください.手動ではなく、ローカル州とAPI要求の同期を処理します.これは頭痛の多くを与えることができます.
私はすべてをカバーしていないreact-query 図書館.あなたは好むdocumentation そのために.
あなたがブログ全体を読んだならば.
ありがとう.
あなたがこのブログで間違った何かがあると思うならば.コメントで私を自由にしてください.あなたが使用しているコメントであなたの考えを共有するreact-query かどうか.
あなたが私と何かを議論したいならば.あなたはTwitterで私に到達することができます.私のDMは、常に開いています.私はあなたを助けるのが大好きだ.
Twitter