Minimalistic REST API client for React inspired by Apollo.
Dmitriy Pleshevskiy
8c6833805b
This hook works only for endpoint with GET method. * refac!(request-hook): add lazy prefix to request hook BREAKING CHANGES: you need to rename all `useRequest` hooks to `useLazyRequest` * refac!(request-hook): add public request state BREAKING CHANGES: User shouldn't see previous headers, variables and params. It's only for hooks so it doesn't call request again. If you use these state you should to remove it from your code. * chore: update example Closes #5 |
||
|---|---|---|
| examples/movies | ||
| src | ||
| .dockerignore | ||
| .eslintignore | ||
| .eslintrc.yml | ||
| .gitignore | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
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'),
);