Hyper Fetch

Backend agnostic data-exchange framework for any javascript environment. Ta...

HTTP client • Fetch • AJAXCachingOffline
BetterTyped/hyper-fetchhyperfetch.bettertyped.com/@better-typed/hyper-fetch

README


⚡
Hyper Fetch


Hyper Fetch is a data-exchange framework. What makes it unique is the typesafe design and the ease of use.
This library is backend and framework agnostic, with aim to provide as many great and useful features as possible. In
particular caching, queuing, persistence, offline first support, request deduplication, authentication,
progress tracking, structure and architecture guidelines.


Key Features


🔮 Simple setup - Read more

🎯 Request cancellation - Read more

✨ Window Focus/Blur Events - Read more

🚀 Queueing - Read more

💎 Automatic caching - Read more

🪄 Persistence - Read more

🎊 SSR Support - Read more

🔋 Offline First - Read more

📡 Built-in client - Read more

🧪 Easy to test - Read more

🎟 Authentication - Read more

💡 Prefetching - Read more

Sources


- #### Quick Start
- #### Docs
- #### API
- #### Guides

Installation


The easiest way to get the latest version of Hyper Fetch is to install it via yarn or npm.

  1. ``` sh
  2. npm install --save @hyper-fetch/core
  3. or
  4. yarn add @hyper-fetch/core
  5. ```

React Hooks


  1. ``` sh
  2. npm install --save @hyper-fetch/core @hyper-fetch/react
  3. or
  4. yarn add @hyper-fetch/core @hyper-fetch/react
  5. ```

Packages


Package Stats
⚡ Hyper Fetch
⚛️ React Hyper Fetch

Examples


Simple Setup


  1. ```tsx
  2. import { Builder } from "@hyper-fetch/core";

  4. // Create global setup
  5. export const builder = new Builder({ baseUrl: "http://localhost:3000" });

  7. // Create reusable commands to trigger requests
  8. export const postData = builder.createCommand<ResponseType, RequestType, LocalErrorType, QueryParamsType>()({
  9.   method: "POST",
  10.   endpoint: "/data/:accountId",
  11. });
  12. export const getData = builder.createCommand<ResponseType, RequestType, LocalErrorType, QueryParamsType>()({
  13.   method: "GET",
  14.   endpoint: "/user",
  15. });
  16. ```

Triggering request


  1. ```tsx
  2. // Set the information to command (methods return command clone - NOT mutating the source)
  3. const command = postData
  4.   .setParams({ accountId: 104 }) // Set Params
  5.   .setQueryParams({ paramOne: "test", paramTwo: "test2" })
  6.   .setData({ name: "My new entity", description: "Some description" }); // Add payload data

  8. // Use command directly
  9. const [data, error, status] = await command.send();

  11. // OR pass dynamic data directly to '.send' method
  12. const [data, error, status] = await command.send({
  13.   params: { accountId: 104 },
  14.   data: { name: "My new entity", description: "Some description" },
  15.   queryParams: { paramOne: "test", paramTwo: "test2" },
  16. });
  17. ```

React


Use prepared hooks

Fetch with lifecycle


  1. ```tsx
  2. import { useFetch } from "@hyper-fetch/react";

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

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

  11. onError((error) => {
  12.   console.log(error);
  13. });
  14. ```

Manually trigger requests


  1. ```tsx
  2. import { useSubmit } from "@hyper-fetch/react";

  4. const { submit, data, error, submitting, onSubmitSuccess, onSubmitError } = useSubmit(command);

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

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

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

Pass dynamic data to submit method


  1. ```tsx
  2. import { useSubmit } from "@hyper-fetch/react";

  4. const { submit, data, error, submitting, onSubmitSuccess, onSubmitError } = useSubmit(command);

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

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

  14. return (
  15.   <button
  16.     onClick={() =>
  17.       submit({
  18.         params: { accountId: 104 },
  19.         data: { name: "My new entity", description: "Some description" },
  20.         queryParams: { paramOne: "test", paramTwo: "test2" },
  21.       })
  22.     }
  23.   >
  24.     Trigger request!
  25.   </button>
  26. );
  27. ```

Use submit promise response


  1. ```tsx
  2. import { useSubmit } from "@hyper-fetch/react";

  4. // Manual triggering
  5. const { submit, data, error, submitting, onSubmitSuccess, onSubmitError } = useSubmit(command);

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

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

  15. const handleSubmit = (values: ValuesType, { setSubmitting }: FormikHelpers) => {
  16.   const [data, error, status] = await submit(); // Submit method returns data!
  17.   setSubmitting(false);
  18.   if (data) {
  19.     notification.success("Done!", data);
  20.   } else {
  21.     notification.success("Error!", error);
  22.   }
  23. };

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

Find out more examples