hyper fetch

Schlüsselmerkmale

? Einfaches Setup - Lesen Sie mehr

Einfache Stornierung - Lesen Sie mehr

Ähnliche Anforderungen deduplikieren - mehr lesen

Warteschlange - Lesen Sie mehr

? Antwort Caching - Lesen Sie mehr

? Offline zuerst - Lesen Sie mehr

? Eingebauter Fetcher - Lesen Sie mehr

? Authentifizierung - Lesen Sie mehr

? Intelligente Wiederholungen - Lesen Sie mehr

Hilf mir weiter zu arbeiten an diesem Projekt ❤️

• Sponsor auf GitHub werden

Installation

Der einfachste Weg, um die neueste Version von Hyper Fetch zu erhalten, besteht darin, sie über Garn oder NPM zu installieren.

Kern

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

Steckdosen

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

Reagieren

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

Pakete

Paket	Statistiken
Hyperfetch
Steckdosen
Reagieren
Firebase
Firebase Admin
Graphql
Axios
CodeGen OpenAPI

Beispiele

Einfaches Setup

 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" ,
} ) ; 

Holen

Die Ausführung zuvor erstellter Anfragen ist sehr einfach. Wir können dies mit der Send -Methode tun.

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

Mutationsanfrage

Wir können die Daten mit Methoden an die Anforderung anhängen, bevor wir sie an den Server senden. Dies ist hilfreich, um unsere Anfrage zu erstellen und Daten anzuhängen, die hilfreich sein können, wenn wir sie in wenigen Schritten aus Daten erstellen müssen, die während eines Vorgangs erhalten wurden.

 // 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 ( ) ;

Wir können sie auch direkt an die Send -Methode übergeben, die sie gleichzeitig zur Anfrage hinzufügt.

 // 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" } ,
} ) ; 

Reagieren

Mit Lebenszyklus holen

Zeigen Sie mir ein Beispiel

 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 ) ;
} ) ; 

Anfragen manuell auslösen

Zeigen Sie mir ein Beispiel

 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 > ; 

Übergeben Sie dynamische Daten, um die Methode einzureichen

Zeigen Sie mir ein Beispiel

 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 >
) ; 

Verwenden Sie eine Reaktion der Versprechensübertragung

Zeigen Sie mir ein Beispiel

 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 > ;

Weitere Beispiele finden Sie heraus

? Unsere Sponsoren

Expandieren