# ra-data-apiato-rest

> Apiato REST data provider for react-admin

Latest version **3.2.8** (published 2020-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install ra-data-apiato-rest
pnpm add ra-data-apiato-rest
yarn add ra-data-apiato-rest
bun add ra-data-apiato-rest
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.2.8 |
| Published | 2020-03-18 |
| First published | 2020-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | mertyildiran |

## Links

- npm: https://www.npmjs.com/package/ra-data-apiato-rest
- Repository: https://github.com/mertyildiran/ra-data-apiato-rest
- Homepage: https://github.com/mertyildiran/ra-data-apiato-rest#readme
- Issues: https://github.com/mertyildiran/ra-data-apiato-rest/issues
- npm.io page: https://npm.io/package/ra-data-apiato-rest

## Dependencies (1)

- [query-string](https://npm.io/package/query-string.md) ^5.1.1

## Recent versions

- 3.2.8 (latest) — 2020-03-18
- 3.2.7 — 2020-03-18
- 3.2.6 — 2020-03-18
- 3.2.5 — 2020-03-18
- 3.2.4 — 2020-03-18
- 3.2.3 — 2020-03-18
- 3.2.2 — 2020-03-17

## 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 = () => (
    <Admin dataProvider={apiatoRestProvider('http://path.to.my.api/')}>
        <Resource name="posts" list={PostList} />
    </Admin>
);

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(
    <Admin dataProvider={dataProvider} title="Example Admin">
       ...
    </Admin>,
    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).

---
_Source: https://npm.io/package/ra-data-apiato-rest · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._