hyper fetch

Caractéristiques clés

? Configuration simple - Lire la suite

Annulation facile - Lire la suite

Demandes similaires déduplices - Lire la suite

Mise en file d'attente - Lire la suite

? Réponse Cache - Lire la suite

? Offline d'abord - Lire la suite

? Fettcher intégré - Lire la suite

? Authentification - Lire la suite

? Smart Retries - Lire la suite

Aidez-moi à continuer à travailler sur ce projet ❤️

• Devenir un sponsor sur github

Installation

La façon la plus simple d'obtenir la dernière version de Hyper Fetch est de l'installer via le fil ou le NPM.

Cœur

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

Prises

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

Réagir

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

Packages

Emballer	Statistiques
Hyper récupérer
Prises
Réagir
Base de feu
Admin de base
Graphique
Axios
Codegen OpenAPI

Exemples

Configuration simple

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

Récupérant

L'exécution des demandes précédemment préparées est très simple. Nous pouvons le faire en utilisant la méthode d'envoi.

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

Demande de mutation

Nous pouvons joindre les données à la demande avec des méthodes avant de les envoyer au serveur. Ceci est utile pour la création de notre demande et la joints de données qui peuvent être utiles lorsque nous devons les créer en quelques étapes à partir de données obtenues pendant un processus.

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

Nous pouvons également les transmettre directement à la méthode d'envoi, qui les ajoutera à la demande immédiatement.

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

Réagir

Récupérer avec le cycle de vie

Montre-moi l'exemple

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

Déclencher manuellement les demandes

Montre-moi l'exemple

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

Passer des données dynamiques pour soumettre la méthode

Montre-moi l'exemple

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

Utiliser la réponse à Soumettre Promise

Montre-moi l'exemple

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

Découvrez plus d'exemples

? Nos sponsors

Développer