Merge pull request #4 from pleshevskiy/task-1
doc: add small example to readme doc: add save to deps flag
This commit is contained in:
commit
08ca8827c6
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
|
||||
|
||||
```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