Frui.ts helpers for HTTP communication

Downloads in past


13190.17.52 months ago2 years agoMinified + gzip package size for @frui.ts/apiclient in KB


Frui.ts provides a simple abstraction for issuing backend calls.
Please note that you are not forced to use this library, and you may make network calls from your repositories (or elsewhere) any way you want.


IApiConnector is an abstraction for making actual HTTP requests. It provides functions such as get, postText or putJson.


The default implementation FetchApiConnector uses window.fetch for network requests and a middleware that handles other than 2xx response status codes as errors by default. The default middleware is called handleErrorStatusMiddleware and throws FetchError when the status code is other than 2xx.
If you want to use another HTTP client library such as Axios, you should implement the IApiConnector interface with something like AxiosApiConnector that would just translate the interface functions to Axios calls.


// creating new FetchApiConnector with default behavior
const connector = new FetchApiConnector();

// FetchApiConnector with custom fetch function
import { fetch as fetchPolyfill } from "whatwg-fetch";
const connector = new FetchApiConnector(fetchPolyfill);

// FetchApiConnector with custom middleware
function middleware(response: Response) {
  if (response.status >= 500 && response.status < 600) {
    throw "Server error";
  } else {
    return response;

const connector = new FetchApiConnector(window.fetch, middleware);


RestRequestBuilder helps to compose URLs in a fluent way. It is a stateful object that mutates its inner URL.


const builder = new RestRequestBuilder(apiConnector, "www.base.url", { });
const invoices = await builder.one("customers", 123).all("invoices").get<Invoice[]>(); // GET to www.base.url/customers/123/invoices


const users = await builder.all("users").post<User[]>({ foo: "bar" }); // POST to www.base.url/users with content { foo: "bar" }

// Bearer token in the header for all requests
const requestParams: RequestInit = {
  headers: { "authorization": "Bearer xxxyyyzzz" },
const builder = new RestRequestBuilder(apiConnector, "www.base.url", requestParams);