hyper fetch

重要な機能

？簡単なセットアップ- 続きを読む

簡単なキャンセル- 続きを読んでください

同様のリクエストを推測- 続きを読んでください

キューイング- 続きを読む

？応答キャッシング- 続きを読む

？最初にオフライン- 続きを読む

？ビルトインフェッチャー- 続きを読んでください

？認証- 続きを読む

？ Smart Retries-続きを読む

このプロジェクトに取り組み続けるのを手伝ってください❤️

• Githubのスポンサーになります

インストール

Hyper Fetchの最新バージョンを取得する最も簡単な方法は、YarnまたはNPMを介してインストールすることです。

コア

npm install --save @hyper-fetch/core
or
yarn add @hyper-fetch/core

ソケット

npm install --save @hyper-fetch/sockets
or
yarn add @hyper-fetch/sockets

反応します

npm install --save @hyper-fetch/core @hyper-fetch/react
or
yarn add @hyper-fetch/core @hyper-fetch/react

パッケージ

パッケージ	統計
ハイパーフェッチ
ソケット
反応します
ファイアーベース
FireBase管理者
graphql
axios
CodeGen Openapi

例

簡単なセットアップ

 import { Client } from "@hyper-fetch/core" ;

// Setup our connection to the server
export const client = new Client ( { url : "http://localhost:3000" } ) ;

// Create reusable requests for later use
export const postData = client . createRequest < ResponseType , RequestType , LocalErrorType , QueryParamsType > ( ) ( {
  method : "POST" ,
  endpoint : "/data/:accountId" ,
} ) ;

export const getData = client . createRequest < ResponseType , RequestType , LocalErrorType , QueryParamsType > ( ) ( {
  method : "GET" ,
  endpoint : "/user" ,
} ) ; 

フェッチ

以前に準備されたリクエストの実行は非常に簡単です。送信方法を使用してこれを行うことができます。

 const { data , error , status } = await getData . send ( ) ; 

突然変異リクエスト

サーバーに送信する前に、メソッドを使用してデータをリクエストに添付できます。これは、リクエストを作成してデータを添付するのに役立ちます。これは、何らかのプロセス中に取得したデータからいくつかのステップで作成する必要がある場合に役立ちます。

 // Set the information to request (methods return request clone - NOT mutating the source)
const request = postData
  . setParams ( { accountId : 104 } ) // Set Params
  . setQueryParams ( { paramOne : "test" , paramTwo : "test2" } )
  . setData ( { name : "My new entity" , description : "Some description" } ) // Add payload data
  . send ( ) ;

また、それらを送信方法に直接渡すこともできます。これにより、すぐにリクエストに追加されます。

 // OR pass dynamic data directly to '.send' method
const { data , error , status } = await postData . send ( {
  params : { accountId : 104 } ,
  data : { name : "My new entity" , description : "Some description" } ,
  queryParams : { paramOne : "test" , paramTwo : "test2" } ,
} ) ; 

反応します

ライフサイクルでフェッチします

例を見せてください

 import { useFetch } from "@hyper-fetch/react" ;

// Lifecycle fetching
const { data , error , loading , onSuccess , onError } = useFetch ( getData ) ;

onSuccess ( ( data ) => {
  console . log ( data ) ;
} ) ;

onError ( ( error ) => {
  console . log ( error ) ;
} ) ; 

手動でトリガーリクエスト

例を見せてください

 import { useSubmit } from "@hyper-fetch/react" ;

const { submit , data , error , submitting , onSubmitSuccess , onSubmitError } = useSubmit ( request ) ;

onSuccess ( ( data ) => {
  console . log ( data ) ;
} ) ;

onError ( ( error ) => {
  console . log ( error ) ;
} ) ;

return < button onClick = { ( ) => submit ( ) } > Trigger request! </ button > ; 

動的データを渡してメソッドを送信します

例を見せてください

 import { useSubmit } from "@hyper-fetch/react" ;

const { submit , data , error , submitting , onSubmitSuccess , onSubmitError } = useSubmit ( request ) ;

onSuccess ( ( data ) => {
  console . log ( data ) ;
} ) ;

onError ( ( error ) => {
  console . log ( error ) ;
} ) ;

return (
  < button
    onClick = { ( ) =>
      submit ( {
        params : { accountId : 104 } ,
        data : { name : "My new entity" , description : "Some description" } ,
        queryParams : { paramOne : "test" , paramTwo : "test2" } ,
      } )
    }
  >
    Trigger request!
  </ button >
) ; 

Promise Responseの送信を使用してください

例を見せてください

 import { useSubmit } from "@hyper-fetch/react" ;

// Manual triggering
const { submit , data , error , submitting , onSubmitSuccess , onSubmitError } = useSubmit ( request ) ;

onSuccess ( ( data ) => {
  console . log ( data ) ;
} ) ;

onError ( ( error ) => {
  console . log ( error ) ;
} ) ;

const handleSubmit = ( values : ValuesType , { setSubmitting } : FormikHelpers ) => {
  const { data , error , status } = await submit ( ) ; // Submit method returns data!
  setSubmitting ( false ) ;
  if ( data ) {
    notification . success ( "Done!" , data ) ;
  } else {
    notification . success ( "Error!" , error ) ;
  }
} ;

return < Form onSubmit = { handleSubmit } > ... </ Form > ;

より多くの例をご覧ください

？私たちのスポンサー

拡大する