Minimalistic REST API client for React inspired by Apollo.
This repository has been archived on 2023-03-02. You can view files and clone it, but cannot push or open issues or pull requests.
Find a file
2021-05-16 23:18:41 +03:00
.github/ISSUE_TEMPLATE Update issue templates 2021-03-26 11:10:09 +03:00
examples chore: add example for request cancelation 2020-12-23 05:16:09 +03:00
src style: rename files 2021-05-16 23:18:41 +03:00
target feat: add request cancelation 2020-12-23 05:16:03 +03:00
tests fix: use window location as base url 2020-12-08 10:35:18 +03:00
.dockerignore Initial commit 2020-11-04 00:39:14 +03:00
.eslintignore Initial commit 2020-11-04 00:39:14 +03:00
.eslintrc.yml Initial commit 2020-11-04 00:39:14 +03:00
.gitignore chore: add example for request cancelation 2020-12-23 05:16:09 +03:00
CODE_OF_CONDUCT.md chore: add code of conduct 2020-11-06 06:47:52 +03:00
jest.config.js fix: filter undefined variable values 2020-11-06 04:47:01 +03:00
LICENSE.md chore: add mit licence 2020-11-06 06:48:04 +03:00
package-lock.json fix: extracting type conflicts 2020-12-23 00:03:45 +03:00
package.json feat: add request cancelation 2020-12-23 05:16:03 +03:00
README.md doc: add features section to readme 2020-12-23 05:33:28 +03:00
tsconfig.json Merge pull request #15 from pleshevskiy/bug-14 2020-11-06 04:51:29 +03:00

react-rest-request

Minimalistic 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.