Skip to main content
Version: 5.x.x

Setup


Initialize Client

The first step is to initialize the Client. It manage the basic configuration for connection to the server and all the elements that make up Hyper Fetch, which are instances of - dispatchers, cache and app managers. We start by determining the url of our server.

/src/server/client.ts
import { Client } from "@hyper-fetch/core";

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

Create Request

Then, having already prepared connection setup for the server, we use the client method to create requests and assign types to them.

caution

We are using currying to achieve auto generated types for the endpoint string.
This solution will be removed once https://github.com/microsoft/TypeScript/issues/10571 get resolved.

/src/server/auth/auth.ts
import { client } from "../client.ts";

type ResponseType = { token: string; refreshToken: string };
type RequestType = { email: string; password: string };

const postLogin = client.createRequest<ResponseType, RequestType>()({ method: "POST", endpoint: "/auth/login" });

Simple Requests

const getRepositoryDetails = client.createRequest()({
method: "GET",
url: "/repos/BetterTyped/hyper-fetch",
});

const { data, error, status, extra } = await getRepositoryDetails.send();

const { data, error, status, extra } = await postLogin.send({
data: { email: "test@test.com", password: "Password123$" }, // Please, do not use this password ;)
});

Congratulations! You're ready to use Hyper Fetch! 🎊