Hyper Fetch

Hyper Fetch is fetching framework. What makes it unique is the typesafe design and the ease of use. This library can run in the browser and on the server with any framework. With our library fetching, architecture and access to requests lifecycle is fabulously simple, thanks to which you can create new components or functionalities much faster and all of this in accordance with good practices!

Documentation Quick Start Guides API

Key Features

Simple setup - Read more

Easy cancellation - Read more

Deduplicate similar requests - Read more

Queueing - Read more

Response caching - Read more

Offline First - Read more

Built-in fetcher - Read more

Authentication - Read more

Smart Retries - Read more

Help me keep working on this project

• Become a Sponsor on GitHub

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

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

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

Fetching

Executing previously prepared requests is very simple. We can do this using the send method.

const [data, error, status] = await getData.send();

Mutation request

We can attach the data to the request with methods before sending it to the server. This is helpful for building our request and attaching data to it which can be helpful when we need to create it in a few steps from data obtained during some process.

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

We can also pass them directly to the send method, which will add them to the request at once.

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

React

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