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.
Go to file
Dmitriy Pleshevskiy 4d44818baf chore: bump version 2020-11-06 01:07:58 +03:00
examples/movies feat(request-hook): add on failure callback 2020-11-06 00:58:43 +03:00
src fix(request-hook): increase priority for handle... 2020-11-06 01:02:21 +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 Initial commit 2020-11-04 00:39:14 +03:00
README.md doc: fix example in readme 2020-11-05 22:16:19 +03:00
package-lock.json feat!(request-hook): add new request hook 2020-11-05 23:26:56 +03:00
package.json chore: bump version 2020-11-06 01:07:58 +03:00
tsconfig.json feat!(client): add client fetch based 2020-11-05 00:23:57 +03:00

README.md

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 = {
    method: Method.GET,
    url: '/action-adventure',
};

type MoviesResponse = Movie[];

function App() {
    const [movies, { data, loading }] = useRequest<MoviesResponse>(MoviesEndpoint);

    React.useEffect(
        () => {
            movies();
        },
        [movies]
    );

    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'),
);