react-rest-request/README.md

react-rest-request

Minimalist REST API client for React inspired by Apollo.

Installation

npm install react-rest-request --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Client, Endpoint, Method, useRequest, RequestProvider } from 'react-rest-request';

const client = new Client({
    baseUrl: 'https://sampleapis.com/movies/api',
});

type Movie = Readonly<{
    id: number;
    title: string;
    posterURL: string;
    imdbId: string;
}>

const MoviesEndpoint: Endpoint<MoviesResponse, void> = {
    method: Method.GET,
    url: '/action-adventure',
};

type MoviesResponse = Movie[];

function App() {
    const { data, loading } = useRequest(MoviesEndpoint);

    return !data ? (
        <div>{ loading ? 'Loading...' : 'Something went wrong' }</div>
    ) : (
        <ul>
            {data.map(movie => (
                <li key={movie.id}>{movie.title}</li>
            ))}
        </ul>
    );
}

ReactDOM.render(
    <RequestProvider client={client}>
        <App />
    </RequestProvider>,
    document.getElementById('root'),
);

Features

• Automatic and lazy requests.
• Transform response data.
• Simple refetch of a previous request.
• Automatic and manual cancellation of the request.
• Cache request responses.

Transform response

If you have an endpoint that doesn't fit into your beautiful architecture with its response data, you can transform the response before it's written to the state.

import { Endpoint, Method } from 'react-rest-request';

export type Movie = Readonly<{
    id: number;
    title: string;
    posterURL: string;
    imdbId: string;
}>

export const MoviesEndpoint: Endpoint<MoviesResponse, void> = {
    method: Method.GET,
    url: '/action-adventure',
    transformResponseData(data: Movie[]) {
        return {
            items: data,
        }
    }
};

export type MoviesResponse = {
    items: Movie[],
}

License

Released under the MIT License.