hyper fetch

Ключевые функции

? Простая настройка - Подробнее

Легкая отмена - Подробнее

Дедупликации аналогичных запросов - Подробнее

Очереди - Подробнее

? Кэширование ответа - Подробнее

? Сначала в автономном режиме - Подробнее

? Встроенный выпускник - Подробнее

? Аутентификация - Подробнее

? Smart Rebries - Подробнее

Помогите мне продолжать работать над этим проектом ❤

• Стать спонсором на GitHub

Установка

Самый простой способ получить последнюю версию Hyper Fetch - это установить его через пряжу или 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
Аксиос
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 >
) ; 

Используйте ответ обещания

Покажите мне пример

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

Узнайте больше примеров

? Наши спонсоры

Расширять