nanderoo / hyper-fetch

⚡ Backend agnostic data-exchange framework for any javascript environment. Take advantage of caching, queuing, persistence, offline first support, request deduplication, authentication, progress tracking, architecture guidelines and more!

⚡
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.

HTTP | REST | GraphQl | Webockets | Server-Sent Events

---

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 adapter - 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.

Core

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

Sockets

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

React Hooks

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

Packages

Package	Stats
⚡ Hyper Fetch
🛰️ Hyper Fetch Sockets
⚛️ React Hyper Fetch

Examples

Simple Setup

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

// Create global setup
export const client = new Client({ url: "http://localhost:3000" });

// Create reusable requests to trigger requests
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",
});

Triggering request

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

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

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

React

Use prepared hooks

Fetch with lifecycle

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

Manually trigger requests

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

Pass dynamic data to submit method

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

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

Find out more examples