Skip to content
JSON API data provider for react-admin.
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fix total length bug Nov 1, 2019
test Fixup PR Oct 13, 2019
.babelrc Bump 0.1.0 Sep 10, 2018
.editorconfig Add editorconfig Sep 10, 2018
.eslintrc.json Refactor authentication (#3) Oct 20, 2018
.gitignore Bump to 0.4.8 May 29, 2019
.npmignore Initial commit Sep 10, 2018
.travis.yml Refactor authentication (#3) Oct 20, 2018
LICENSE Create LICENSE Sep 10, 2018 Fixup PR Oct 13, 2019
package.json Fix total length bug Nov 1, 2019
yarn.lock Bump acorn from 6.2.0 to 6.4.1 (#32) Mar 16, 2020


Build Status npm version

A JSONAPI compatible data provider for react-admin.


Currently these actions are supported:



# via npm
npm install ra-jsonapi-client

# via yarn
yarn add ra-jsonapi-client


Import this package, set the base url and pass it as the dataProvider to react-admin.

//in app.js
import React from "react";
import { Admin, Resource } from "react-admin";
import jsonapiClient from "ra-jsonapi-client";

const dataProvider = jsonapiClient('http://localhost:3000');

const App = () => (
  <Admin dashboard={Dashboard} dataProvider={dataProvider}>

export default App;


This client allows you to set some optional settings as the second parameter:

// Configure some settings.
const settings = { ... };

// Pass it as the second parameter after the base URL.
const dataProvider = jsonapiClient('http://localhost:3000', settings);

Total count

Since JSONAPI does not specify a standard for the total count key in the meta object, you can set it with:

const settings = { total: 'total-count' };

Which will work for:

  "data": { ... },
  "meta": {
    "total-count": 436

If this option is not set it will fall back to total.

In addition, if your server doesn't provide a count field, you can set total count to null, and the provider will assume the total count is the same as the length of the data array:

const dataProvider = jsonapiClient('http://localhost:3000', { total: null });

Custom HTTP headers

Custom headers can be set by providing a headers object in options:

const settings = {
  headers: {
    Authorization: 'Bearer ...',
    'X-Requested-With': 'XMLHttpRequest'

The default value is:

  Accept: 'application/vnd.api+json; charset=utf-8',
  'Content-Type': 'application/vnd.api+json; charset=utf-8',


This client assumes that you are using an authProvider for your react-admin application. In order to use authentication with your backend your authProvider needs to store credentials in localStorage.

Basic auth

For basic auth your authProvider needs to store username and password like this:

localStorage.setItem('username', 'bob');
localStorage.setItem('password', 'secret');

Bearer Token

For authentication via (access) token your authProvider needs to store the token like this:

localStorage.setItem('token', '123token');

Update method (PUT vs. PATCH)

First versions used PUT as the default update HTTP method. In version 0.5.0 this was changed to PATCH since it complies with the JSONAPI standard.. You can still use PUT by declaring the update method in the settings:

  // Set the update method from PATCH to PUT.
  updateMethod: 'PUT'

Array format for GET_MANY filter

This package makes usage of the aweseome qs querystring parsing library.

Default: brackets Options: indices, repeat, comma


You can’t perform that action at this time.