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
2020-12-23 00:28:45 +03:00
.github/ISSUE_TEMPLATE chore: add feature request issue template 2020-11-06 06:52:42 +03:00
examples/movies feat: extract types from endpoint 2020-12-19 13:26:22 +03:00
src fix: change default params type to unknown 2020-12-23 00:18:55 +03:00
target fix: change default params type to unknown 2020-12-23 00:18:55 +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 fix: use window location as base url 2020-12-08 10:35:18 +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 fix: change default params type to unknown 2020-12-23 00:18:55 +03:00
README.md feat: extract types from endpoint 2020-12-19 13:26:22 +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'),
);

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.