react-connect-rest

An experimental and WIP approach to a type safe and self traversing REST client.

---

Usage

import connectToRest, { IRestStore } from 'react-connect-rest';
import React from 'react';
import { render } from 'react-dom';
 
interface Foo {
  id: number;
  foo: string;
}
 
interface MyViewProps {
  container: IRestStore<Foo>;
}
 
const MyView = ({ myData }: MyViewProps) => <div>
  {myData.state.loading ? 'Loading...' : <p>
    Here is the data from the API:
    {JSON.stringify(myData.state.response)}
  </p>}
</div>;
 
const ConnectedView = connectToRest(MyView, { myData: '/my/api/' });
 
render(<ConnectedView />);

Assumptions

As mentioned, this lib has opinions about how a REST endpoint and how the data it returns looks:

1. All entities can be uniquely identifiable by an id key.
2. The API is self describing via HATEOAS metadata stored under a __links key.

Resolving relations via HATEOAS

import { RestStore } from 'react-connect-rest';
 
type Author = { id: number; name: string; }
type Book = { id: number; authors: Author[]; }
 
//  GET /book
//    {
//      data: [{
//        __links: [{ rel: 'authors', href: '/author/?book=1' }],
//        id: 1,
//        authors: [1]
//      }]
//    }
//
//  GET /author/?book=1
//    {
//       data: [{
//         __links: [],
//         id: 1,
//         name: 'Foo Bar'
//       }]
//    }
const bookStore = new RestStore<Book[]>('/book');
 
const firstBooksAuthors = bookStore.state.response.authors;
 
console.log(firstBooksAuthors.state.response[0].name);

Connecting multiple views to the same API

import connectToRest, { RestStore, IRestStore } from 'react-connect-rest';
import React from 'react';
import { render } from 'react-dom';
 
 
interface Foo {
  id: number;
  foo: string;
}
 
interface MyViewProps {
  container: IRestStore<Foo>;
}
 
const container = new RestStore<Foo>('/my/api/');
 
const MyView1 = ({ container }: MyViewProps) => null;
const MyView2 = ({ container }: MyViewProps) => null;
 
// We'll have a single container querying the API and multiple
// views listening to it.
const ConnectedView1 = connectToRest(MyView1, { container });
const ConnectedView2 = connectToRest(MyView2, { container });
 
render(<div>
  <ConnectedView1 />
  <ConnectedView2 />
</div>);

Testing

You can create stores with mocked data for use in tests:

import { RestStoreMock } from 'react-connect-rest';
 
interface Foo {
  id: number;
  foo: string;
}
 
const mock = new RestStoreMock<Foo>({ id: 1, foo: 'bar' });
 
console.log(mock.state.loading); // false
console.log(mock.state.response); // { id: 1, foo: 'bar' }