HomeSoftware EngineeringInformation fetching in React the practical method powered by TypeScript, io-ts &...

Information fetching in React the practical method powered by TypeScript, io-ts & fp-ts

Over the previous few days, I’ve been engaged on a React software. It’s a simple software that doesn’t even require a database. Nonetheless, I didn’t wish to embed all of the content material into the appliance’s JSX as a result of a few of it will likely be up to date incessantly. So I made a decision to make use of a couple of easy JSON information to retailer the contents.

The applying is the web site for a convention, and I needed to construct a web page that appears as follows:

To generate a web page just like the one within the earlier picture I’ve saved the information within the following JSON file:

    { "startTime": "08:00", "title": "Registration & Breakfast", "minuteCount": 60 },
    { "startTime": "09:00", "title": "Keynote", "minuteCount": 25 },
    { "startTime": "09:30", "title": "Talk 1 (TBA)", "minuteCount": 25 },
    { "startTime": "10:00", "title": "Talk 2 (TBA)", "minuteCount": 25 },
    { "startTime": "10:30", "title": "Talk 3 (TBA)", "minuteCount": 25 },
    { "startTime": "10:55", "title": "Coffee Break", "minuteCount": 15 },
    { "startTime": "11:10", "title": "Talk 4 (TBA)", "minuteCount": 25 },
    { "startTime": "11:40", "title": "Talk 5 (TBA)", "minuteCount": 25 },
    { "startTime": "12:10", "title": "Talk 6 (TBA)", "minuteCount": 25 },
    { "startTime": "12:35", "title": "Lunch, Networking & Group Pic", "minuteCount": 80 },
    { "startTime": "14:00", "title": "Talk 7 (TBA)", "minuteCount": 25 },
    { "startTime": "14:30", "title": "Talk 8 (TBA)", "minuteCount": 25 },
    { "startTime": "15:00", "title": "Talk 9 (TBA)", "minuteCount": 25 },
    { "startTime": "15:25", "title": "Coffee Break", "minuteCount": 15 },
    { "startTime": "15:40", "title": "Talk 10 (TBA)", "minuteCount": 25 },
    { "startTime": "16:10", "title": "Talk 11 (TBA)", "minuteCount": 25 },
    { "startTime": "16:40", "title": "Talk 12 (TBA)", "minuteCount": 25 },
    { "startTime": "17:10", "title": "Closing Remarks", "minuteCount": 25 }

The issue #

Whereas utilizing JSON information makes my life simpler, knowledge fetching in React is a really repetitive and tedious process. If that wasn’t dangerous sufficient, the information contained in an HTTP response may very well be fully completely different from what we expect.

The kind-unsafe nature of fetch calls is especially harmful for TypeScript customers as a result of it compromises most of the advantages of TypeScript. So I made a decision to experiment just a little bit to attempt to provide you with a pleasant automated answer.

I’ve been studying so much about practical programming and Class Principle over the previous few months as a result of I’ve been writing a e-book titled Arms-On Purposeful Programming with TypeScript.

I’m not going to get an excessive amount of into Class Principle on this weblog publish. Nonetheless, I would like to elucidate the fundamentals. Class Principle defines some varieties which can be notably helpful when coping with uncomfortable side effects.

The Class Principle varieties permit us to precise potential issues utilizing the sort system and are helpful as a result of they pressure our code to deal with uncomfortable side effects accurately at compilation time. For instance, the Both kind can be utilized to precise {that a} kind may be both a kind Left or one other kind Proper. The Both kind may be helpful once we wish to categorical that one thing can go mistaken. For instance, a fetch name can return both an error (left) or some knowledge (proper).

A) Make sure that errors are dealt with #

I needed to ensure that the return of my fetch calls are an Both occasion to make sure that we don’t attempt to entry the information with out first guaranteeing that the response shouldn’t be an error.

I’m fortunate as a result of I don’t need to implement the Both kind. As a substitute I can merely use the implementation embody within the [fp-ts]( open supply module. The Both kind is outlined by fp-ts as follows:

declare kind Both<L, A> = Left<L, A> | Proper<L, A>;

B) Make sure that knowledge is validated #

The second drawback that I needed to resolve is that even when the request returns some knowledge, its format may very well be not what the appliance is anticipating. I wanted some runtime validation mechanism to validate the schema of the response. I’m fortunate as soon as extra as a result of as an alternative of implementing a runtime validation mechanism from scratch, I can use one other open supply library: [io-ts](

The answer #

TL;DR This part explains the implementation particulars of the answer. Be happy to skip this half and leap into “The end result” part in case you are solely within the last client API.

The io-ts module permits us to declare a schema that can be utilized to carry out validation at runtime. We will additionally use io-ts to generate varieties from a given schema. Each of those options are showcased within the following code snippet:

import * as io from "io-ts";

export const ActivityValidator = io.kind({
    startTime: io.string,
    title: io.string,
    minuteCount: io.quantity

export const ActivityArrayValidator = io.array(ActivityValidator);

export kind IActivity = io.TypeOf<typeof ActivityValidator>;
export kind IActivityArray = io.TypeOf<typeof ActivityArrayValidator>;

We will use the decode methodology to validate that some knowledge adheres to a schema. The validation end result returned by decode is an Both occasion, which implies that we are going to both get a validation error (left) or some legitimate knowledge (proper).

My first step was to wrap the fetch API, so it makes use of each fp-ts and io-ts to make sure that the response is and Both that represents an error (left) or some legitimate knowledge (proper). By doing this, the promise returned byfetch isn’t rejected. As a substitute, it’s at all times resolved as an Both occasion:

import { Both, Left, Proper } from "fp-ts/lib/Both";
import { Sort, Errors} from "io-ts";
import { reporter } from "io-ts-reporters";

export async perform fetchJson<T, O, I>(
    url: string,
    validator: Sort<T, O, I>,
    init?: RequestInit
): Promise<Both<Error, T>> {
    attempt {
        const response = await fetch(url, init);
        const json: I = await response.json();
        const end result = validator.decode(json);
        return end result.fold<Both<Error, T>>(
            (errors: Errors) => {
                const messages = reporter(end result);
                return new Left<Error, T>(new Error( part of("n")));
            (worth: T) => {
                return new Proper<Error, T>(worth);
    } catch (err) {
        return Promise.resolve(new Left<Error, T>(err));

Then I created a React element named Distant that takes an Both occasion as considered one of its properties along with some rendering capabilities. The info may be both null | Error or some worth of kind T.

The loading perform is invoked when the information is null, the error is invoked when the information is an Error and the success perform is invoked when knowledge is a worth of kind T:

import React from "react";
import { Both } from "fp-ts/lib/both";

interface RemoteProps<T>  null, T>;
  loading: () => JSX.Aspect,
  error: (error: Error) => JSX.Aspect,
  success: (knowledge: T) => JSX.Aspect

interface RemoteState {}

export class Distant<T> extends React.Element<RemoteProps<T>, RemoteState> {

  public render() {
    return (
          l => {
            if (l === null) {
              return this.props.loading();
            } else {
              return this.props.error(l);
          r => {
            return this.props.success(r);


export default Distant;

The above element is used to render an Both occasion, but it surely doesn’t carry out any knowledge fetching operations. As a substitute, I applied a second element named Fetchable which takes an url and a validator along with some optionally available RequestInit configuration and a few rendering capabilities. The element makes use of the fetch wrapper and the validator to fetch some knowledge and validate it. It then passes the ensuing Both occasion to the Distant element:

import { Sort } from "io-ts";
import React from "react";
import { Both, Left } from "fp-ts/lib/Both";
import { fetchJson } from "./shopper";
import { Distant } from "./distant";

interface FetchableProps<T, O, I> {
    url: string;
    init?: RequestInit,
    validator: Sort<T, O, I>
    loading: () => JSX.Aspect,
    error: (error: Error) => JSX.Aspect,
    success: (knowledge: T) => JSX.Aspect

interface FetchableState<T>  null, T>;

export class Fetchable<T, O, I> extends React.Element<FetchableProps<T, O, I>, FetchableState<T>> {

    public constructor(props: FetchableProps<T, O, I>) {
        this.state = {
            knowledge: new Left<null, T>(null)

    public componentDidMount() {
        (async () => {
            const end result = await fetchJson(
                knowledge: end result

    public render() {
        return (


The end result #

I’ve launched all of the previous supply code as a module named react-fetchable. You possibly can set up the module utilizing the next command:

npm set up io-ts fp-ts react-fetchable

You possibly can then import the Fetchable element as follows:

import { Fetchable } from "react-fetchable";

At this level I can implement the web page that I described on the beguinning:

import React from "react";
import Container from "../../elements/container/container";
import Part from "../../elements/part/part";
import Desk from "../../elements/desk/desk";
import { IActivityArray, ActivityArrayValidator } from "../../lib/area/varieties";
import { Fetchable } from "react-fetchable";

interface ScheduleProps {}

interface ScheduleState {}

class Schedule extends React.Element<ScheduleProps, ScheduleState> {
  public render() {
    return (
        <Part title="Schedule">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            loading={() => <div>Loading...</div>}
            error={(e: Error) => <div>Error: {e.message}</div>}
            success={(knowledge: IActivityArray) => {
              return (
                  headers={["Time", "Activity"]}
                  rows={ => [`${a.startTime}`, a.title])}

export default Schedule;

I can move the URL /knowledge/schedule.json to the Fetchable element along with a validator ActivityArrayValidator. The element will then:

  1. Render Loading...
  2. Fetch the information
  3. Render a desk if the information is legitimate
  4. Render an error is the information can’t be loaded doesn’t adhere to the validator

I’m pleased with this answer as a result of it’s type-safe, declarative and it solely takes a couple of seconds to get it up and working. I hope you will have discovered this publish fascinating and that you just attempt react-fetchable.

Additionally, in case you are taken with Purposeful Programming or TypeScript, please try my upcoming e-book Arms-On Purposeful Programming with TypeScript.









Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments