parent
e9c18c9fea
commit
3d606b86cd
1 changed files with 54 additions and 1 deletions
55
README.md
55
README.md
|
@ -6,5 +6,58 @@ Minimalistic REST API client for React inspired by Apollo.
|
||||||
# Installation
|
# Installation
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install react-rest-request
|
npm install react-rest-request --save
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
# Usage
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import { Endpoint, Method, useRequest, RequestProvider } from 'react-rest-request';
|
||||||
|
|
||||||
|
const BASE_API_URL = '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 baseUrl={BASE_API_URL}>
|
||||||
|
<App />
|
||||||
|
</RequestProvider>,
|
||||||
|
document.getElementById('root'),
|
||||||
|
);
|
||||||
```
|
```
|
||||||
|
|
Reference in a new issue