https://github.com/mertyildiran/ra-data-apiato-rest
Apiato REST data provider for react-admin
https://github.com/mertyildiran/ra-data-apiato-rest
apiato react react-admin reactjs
Last synced: 6 months ago
JSON representation
Apiato REST data provider for react-admin
- Host: GitHub
- URL: https://github.com/mertyildiran/ra-data-apiato-rest
- Owner: mertyildiran
- Created: 2020-03-17T14:46:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T18:16:38.000Z (over 2 years ago)
- Last Synced: 2025-03-29T22:11:27.047Z (7 months ago)
- Topics: apiato, react, react-admin, reactjs
- Language: TypeScript
- Size: 8.79 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Apiato REST Data Provider For React-Admin
Apiato REST Data Provider for [react-admin](https://github.com/marmelab/react-admin).
## Installation
```sh
npm install --save ra-data-apiato-rest
```
## REST Dialect
This Data Provider fits REST APIs using simple GET parameters for filters and sorting. This is the dialect used for instance in [FakeRest](https://github.com/marmelab/FakeRest).
| Method | API calls
|--------------------|----------------------------------------------------------------
| `getList` | `GET http://my.api.url/posts?limit=10&page=1`
| `getOne` | `GET http://my.api.url/posts/123`
| `getMany` | `GET http://my.api.url/posts`
| `getManyReference` | `GET http://my.api.url/posts`
| `create` | `POST http://my.api.url/posts/123`
| `update` | `PUT http://my.api.url/posts/123`
| `updateMany` | Multiple calls to `PUT http://my.api.url/posts/123`
| `delete` | `DELETE http://my.api.url/posts/123`
| `deteleMany` | Multiple calls to `DELETE http://my.api.url/posts/123`
**Note**: The Apiato REST data provider expects the API to include a `Content-Range` header in the response to `getList` calls. The value must be the total number of resources in the collection. This allows react-admin to know how many pages of resources there are in total, and build the pagination controls.
```
Content-Range: posts 0-24/319
```
If your API is on another domain as the JS code, you'll need to whitelist this header with an `Access-Control-Expose-Headers` [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) header.
```
Access-Control-Expose-Headers: Content-Range
```
## Usage
```jsx
// in src/App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import apiatoRestProvider from 'ra-data-apiato-rest';
import { PostList } from './posts';
const App = () => (
);
export default App;
```
### Adding Custom Headers
The provider function accepts an HTTP client function as second argument. By default, they use react-admin's `fetchUtils.fetchJson()` as HTTP client. It's similar to HTML5 `fetch()`, except it handles JSON decoding and HTTP error codes automatically.
That means that if you need to add custom headers to your requests, you just need to *wrap* the `fetchJson()` call inside your own function:
```jsx
import { fetchUtils, Admin, Resource } from 'react-admin';
import apiatoRestProvider from 'ra-data-apiato-rest';
const httpClient = (url, options = {}) => {
if (!options.headers) {
options.headers = new Headers({ Accept: 'application/json' });
}
// add your own headers here
options.headers.set('X-Custom-Header', 'foobar');
return fetchUtils.fetchJson(url, options);
};
const dataProvider = apiatoRestProvider('http://localhost:3000', httpClient);
render(
...
,
document.getElementById('root')
);
```
Now all the requests to the REST API will contain the `X-Custom-Header: foobar` header.
**Tip**: The most common usage of custom headers is for authentication. `fetchJson` has built-on support for the `Authorization` token header:
```js
const httpClient = (url, options = {}) => {
options.user = {
authenticated: true,
token: 'SRTRDFVESGNJYTUKTYTHRG'
};
return fetchUtils.fetchJson(url, options);
};
```
Now all the requests to the REST API will contain the `Authorization: SRTRDFVESGNJYTUKTYTHRG` header.
## License
This data provider is licensed under the MIT License, and sponsored by [marmelab](http://marmelab.com).