Skip to content

BetterTyped/hyper-fetch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hyper Fetch

Framework for fetching and realtime data exchange.

Documentation | Quick Start | Guides


Hyper Fetch is unique fetching and realtime data-exchange framework meticulously crafted to prioritize simplicity and efficiency. Its typesafe design and user-friendly interface ensure a seamless integration experience, whether you're working on the browser or the server. Next-generation features streamlines architecture creation, grants access to the request lifecycle, and empowers rapid development of new components and functionalities, all while facilitating real-time data exchange.


Premium sponsor banner

Premium sponsor banner

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 ❤️

Installation

The easiest way to get the latest version of Hyper Fetch is to install it via yarn or 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

Premium sponsor banner

Premium sponsor banner

Packages

Package Stats
Hyper Fetch
Sockets
React
Firebase
Firebase Admin
GraphQL
Axios
Codegen Openapi

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

Premium sponsor banner

Premium sponsor banner

React

Fetch with lifecycle

Show me example
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

Show me example
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

Show me example
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

Show me example
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>;

💖 Our sponsors

My Sponsors