反応質問を用いた非同期データフェッチ⚛️

データを問い合わせるのは難しいことではないか.はい、最初にコンポーネントをレンダリングします.fetchメソッドを書きます.コンポーネントのOnmountにデータを取得します.次に、データを状態に格納し、データをレンダリングします.クエリが失敗した場合.我々はどちらかを再試行したり、右を放棄?再試行するためにさえ、我々は再びRefetchメソッドを呼ぶ必要があります、そして、もう一度我々がデータを解決するかどうかチェックしてください.そして、我々が何かを更新するならば、我々はデータに基づいてその特定の構成要素を再レンダリングする必要があります.多くのクエリと関数.

この記事では、これらすべてのステップを1つのステップにまとめ、ReactQueryによってTanner Linseyと呼ばれる素晴らしい反応フックライブラリを使用して簡単に問い合わせを行います.
まず、我々の反応アプリケーションを設定しましょう.この記事のために、私はthisスターターキットテンプレートを使用しています.テンプレートをクローニングした後に、我々は反応質問インストールから始めます.
NPM経由で

npm install react-query --save

経由で

<script src="https://unpkg.com/react-query/dist/react-query.production.min.js"></script>

次に、アプリケーションコンポーネントをReactQueryCacheでラップしてクエリデータをキャッシュします.それを加えましょう.
アプリ.js

import React from 'react';
import * as Containers from './containers/index';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { QueryCache, ReactQueryCacheProvider } from 'react-query';

import Layout from './layouts/Layout';

import 'bootstrap/dist/css/bootstrap.min.css';
import './stylesheets/styles.css';

const queryCache = new QueryCache()

const App = () => {
 return (
   <ReactQueryCacheProvider queryCache={queryCache}>
     <Router>
       <Switch>
         <Layout exact path="/" component={Containers.Home} header={true} footer={true}/>
         <Layout exact path="/about" component={Containers.About} header={true} footer={false}/>
         <Layout exact path="/profile" component={Containers.Profile} header={true} footer={true}/>
       </Switch>
     </Router>
   </ReactQueryCacheProvider>
 );
}

export default App;

次に、USEequeryフックを使用してプロファイルコンポーネントのGithubからパブリックユーザーデータを表示します.usequeryはこれらのパラメータをとります.

問い合わせキー(ユニークキー).(必須)

データを解決する非同期関数.(必須)

クエリオプション.(オプション)

キーは通常、応答を再取得してキャッシュするのに使用される識別子のようです.このフックを使用すると、コンポーネントで使用できるすべての破壊された情報が表示されます.
我々が使用するフックから返される情報のいくつかを見てみましょう.

データが非同期関数に基づいてペグ化されている場合、この値はtrueになります.つまり、より多くの20の値を持っていて、10の値を持つ最初のページを受信した場合、CanfetchMoreはtrueになります.次の10の値を取得した後、falseを返します.

データ(この)-このオブジェクトは、コンポーネントでレンダリングするために使用されるasync関数からの解決されたデータを含みます.

エラー( any )--このオブジェクトはそのメッセージキーにエラーメッセージを持ちます.ステータスが'成功'または'荷'であるならば、エラーはNULLです.

isError ( boolean )-クエリが失敗した場合、trueに設定します.

isfetching ( boolean )-現在のデータが取得されるまで真です.データの取得後にfalseになります(現在のページ).

IsLoading -クエリ関数が解決または拒否されるまではtrueです.

issucess -クエリ関数が解決され、エラーがスローされたときにfalseになります.

status - isload , issucess , iserrorのテキスト表現です.は「成功」、「読み込み」または「エラー」を含みます.

プロファイルコンテナでは、次のようにusequeryフックを追加します.
コンテナ/プロファイル.js

import React, { Fragment } from 'react';
import UserProfile from '../../components/profile/UserProfile';
import { useQuery } from 'react-query'

const Profile = (props) => {
 const {
   data,
   error,
   isLoading
 } = useQuery('profileData', () =>
   fetch('https://api.github.com/users/SoorajSNBlaze333')
   .then(res => res.json())
 )

 if (isLoading) return <Fragment>Loading...</Fragment>

 if (error) return <Fragment><h1>Oops something went wrong</h1><p>{error.message}</p></Fragment>

 return (
   <div className="w-100 p-4">
     <UserProfile profile={data}/>
   </div>
 )
}

export default Profile;

クエリオブジェクトを印刷して実行すると、この出力が表示されます.


UIのデータを表示するすべての可能性を考えた後
クエリオブジェクトの2つのインスタンスが自動的にすべての状態に更新されますが表示されます.
今、別のブラウザのタブをクリックしたり、別のアプリケーションを訪問し、このウィンドウに戻ってくる場合は、クエリ要求が再度行われ、データが再フェッチされたことがわかります.

これはデータのisstaleプロパティのためです.レンダリングされるデータには、staleというクエリプロパティが与えられます.ウィンドウが再びフォーカスされるか、ブラウザが再接続されるか、またはコンポーネントがマウントされたとき、古いクエリは再び再取得されます.これは以下の3つのプロパティを使用して切り替えることができます.

 const {
   data,
   error,
   isLoading
 } = useQuery('profileData', () =>
   fetch('https://api.github.com/users/SoorajSNBlaze333')
   .then(res => res.json())
 , {
   refetchOnWindowFocus: Boolean, //refetch when window comes to focus
   refetchOnReconnect: Boolean, //refetch when browser reconnects to server
   refetchOnMount: Boolean //refetch when component mounts
 })

ブラウザとreactQueryに戻った後、私に新しいデータを与える
別のプロパティは、失敗時の再試行です.したがって、問い合わせ関数が拒否された場合は、エラーをスローする前に、自動的に3回繰り返します.これを使うことができます.

 const {
   data,
   error,
   isLoading
 } = useQuery('profileData', () =>
   fetch('https://api.github.com/users/SoorajSNBlaze333')
   .then(res => res.json())
 , {
   retry: Boolean, //refetch if query fails
   retryDelay: Number //number of times for retry. Default is 3
 })

また、失敗したクエリごとにFailURecountというキーがインクリメントされます.このキーを使用すると、UIがサーバーに接続したり、失敗したり成功したりした後に、いくつかの試行を試みたことを示すために使用できます.
これは、基本的なセットアップとUSequeryフックの使用方法です.詳細については、ドキュメントをチェックアウトすることができます.次の記事では、無限のスクロールを作成するために、無限の問い合わせを使用して、どのようにして、巨大なデータを問い合わせるか、どのように使用するかについて説明します.