# hal-json-data-provider

> Simple JSON+HAL Adapter for react-admin

Latest version **1.1.0** (published 2018-06-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install hal-json-data-provider
pnpm add hal-json-data-provider
yarn add hal-json-data-provider
bun add hal-json-data-provider
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-06-25 |
| First published | 2018-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 18.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Peng-YM |
| Maintainers | pengym |
| Keywords | react-admin, jsonhal, hal, ra-data |

## Links

- npm: https://www.npmjs.com/package/hal-json-data-provider
- npm.io page: https://npm.io/package/hal-json-data-provider

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.3.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.3.2
- [react-admin](https://npm.io/package/react-admin.md) ^2.0.0-beta4
- [query-string](https://npm.io/package/query-string.md) ~5.1.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-06-25
- 1.0.0 — 2018-06-24

## README

# JSON+HAL REST Data Provider For React-Admin

JSON+HAL REST Data Provider for [react-admin](https://github.com/marmelab/react-admin), the frontend framework for building admin applications on top of REST/GraphQL services.

![react-admin demo](http://static.marmelab.com/react-admin.gif)

## Installation

```sh
npm install --save ra-data-json-hal
```

## 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).

| REST verb            | API calls
|----------------------|----------------------------------------------------------------
| `GET_LIST`           | `GET http://example.com/api/posts?name.dir=DESC&page=1&published=true&size=10&sort=name`
| `GET_ONE`            | `GET http://example.com/api/posts/50`
| `CREATE`             | `POST http://example.com/api/posts`
| `UPDATE`             | `PUT http://example.com/api/posts/50`
| `DELETE`             | `DELETE http://example.com/api/posts/50`
| `GET_MANY`           | Makes a GET_ONE for each `id` request.
| `GET_MANY_REFERENCE` | `GET http://example.com/api/posts/50/comments`

**Note**: This data provider expects a `Location` header to be present in the
response for the requests made using the `POST` or `PATCH` methods.

```
Location: http://example.com/api/posts/50
```

## Usage

```jsx
// in src/App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import jsonHalRestProvider from 'ra-data-json-hal';

import { PostList } from './posts';

const App = () => (
    <Admin dataProvider={jsonHalRestProvider('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 jsonHalRestProvider from 'ra-data-json-hal';

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 = jsonHalRestProvider('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:

```jsx
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 [applaudo studios](https://applaudostudios.com/).

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