{"id":11621,"library":"ra-data-json-server","title":"React-Admin JSON Server Data Provider","description":"ra-data-json-server is a data provider specifically designed to integrate `react-admin` applications with REST APIs that follow the conventions of JSON Server, including services like JSONPlaceholder. It translates `react-admin` data requests (e.g., `getList`, `getOne`, `create`) into standard HTTP requests compatible with a JSON Server backend. The package is currently at version 5.14.5 and is actively maintained, with frequent patch releases addressing bug fixes and minor improvements, usually on a weekly or bi-weekly basis, following the `react-admin` release cycle. A key differentiator is its strict adherence to JSON Server's REST dialect, simplifying setup for prototyping or light backend needs, and requiring specific HTTP headers like `X-Total-Count` for proper pagination.","status":"active","version":"5.14.5","language":"javascript","source_language":"en","source_url":"https://github.com/marmelab/react-admin","tags":["javascript","typescript"],"install":[{"cmd":"npm install ra-data-json-server","lang":"bash","label":"npm"},{"cmd":"yarn add ra-data-json-server","lang":"bash","label":"yarn"},{"cmd":"pnpm add ra-data-json-server","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a data provider for react-admin and must be used within a react-admin application.","package":"react-admin","optional":false}],"imports":[{"note":"The primary data provider function is a default export.","wrong":"import { jsonServerProvider } from 'ra-data-json-server';","symbol":"jsonServerProvider","correct":"import jsonServerProvider from 'ra-data-json-server';"},{"note":"While CommonJS `require` might technically work in some setups, `react-admin` and its ecosystem are primarily ESM-first. It's best to use ES module imports.","wrong":"const jsonServerProvider = require('ra-data-json-server');","symbol":"jsonServerProvider","correct":"import jsonServerProvider from 'ra-data-json-server';"},{"note":"Custom HTTP headers are added by wrapping `react-admin`'s `fetchUtils.fetchJson` and passing the custom client as the second argument to `jsonServerProvider`.","symbol":"httpClient configuration","correct":"import { fetchUtils } from 'react-admin';\nconst httpClient = (url, options = {}) => { /* ... */ return fetchUtils.fetchJson(url, options); };\nconst dataProvider = jsonServerProvider('url', httpClient);"}],"quickstart":{"code":"import * as React from 'react';\nimport { Admin, Resource } from 'react-admin';\nimport jsonServerProvider from 'ra-data-json-server';\n\n// For demonstration purposes, we'll use a simple list component.\n// In a real app, you'd define your own PostList.\nconst PostList = () => <div>Posts List (render your actual list here)</div>;\n\nconst App = () => (\n    <Admin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>\n        <Resource name=\"posts\" list={PostList} />\n        <Resource name=\"users\" list={PostList} />\n    </Admin>\n);\n\nexport default App;\n","lang":"typescript","description":"Initializes a `react-admin` application with `ra-data-json-server` connected to JSONPlaceholder, defining 'posts' and 'users' resources."},"warnings":[{"fix":"Configure your backend to include an `X-Total-Count` header in the response, e.g., `X-Total-Count: 319`. If your API is on a different domain, ensure `Access-Control-Expose-Headers: X-Total-Count` is set in your CORS policy.","message":"The `ra-data-json-server` provider requires the backend API to return an `X-Total-Count` header for `getList` and `getManyReference` calls. Without it, pagination and total record counts will not function correctly in `react-admin`.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure your backend includes the `Access-Control-Expose-Headers: X-Total-Count` header in its CORS policy to allow the browser to read the `X-Total-Count` response header.","message":"When developing with `ra-data-json-server` against a different origin API, browser security policies (CORS) might block access to custom headers like `X-Total-Count`. This will lead to pagination issues in `react-admin`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For better performance on batch operations, consider creating a custom `httpClient` that intercepts and optimizes `updateMany`/`deleteMany` requests, or use a data provider designed for your specific backend that supports batch operations natively.","message":"The `updateMany` and `deleteMany` operations are implemented as multiple individual `PUT` or `DELETE` requests, not a single batch request, matching JSON Server's default behavior. This can lead to performance overhead for large batch operations.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `ra-data-json-server@5.14.5` or later to ensure proper handling of `id=0` and correct form state management for nested fields.","message":"Recent fixes indicate potential issues with `id` values of `0` in `useCreate` and stale nested field values in `SimpleFormIterator`. While these are fixed in 5.14.5, older versions might exhibit incorrect cache updates or form state behavior.","severity":"gotcha","affected_versions":"<5.14.5"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that your backend sends the `X-Total-Count` header. If using a different domain for your API, ensure `Access-Control-Expose-Headers: X-Total-Count` is configured in your backend's CORS policy.","cause":"The `X-Total-Count` header is missing or inaccessible in the `getList` or `getManyReference` response, preventing `react-admin` from determining the total number of records.","error":"TypeError: Cannot read properties of undefined (reading 'total')"},{"fix":"Configure your backend server to include appropriate `Access-Control-Allow-Origin` headers (e.g., `Access-Control-Allow-Origin: *` for development, or specific origins in production) and `Access-Control-Expose-Headers` for `X-Total-Count`.","cause":"Your `react-admin` application is trying to access an API on a different domain without proper CORS headers configured on the server-side.","error":"CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."},{"fix":"Inspect network requests to confirm the `X-Total-Count` header is present and readable. Also, ensure your API's primary key field is named `id` as expected by default, or provide a custom `id` mapper if it's named differently.","cause":"This often happens when `react-admin` cannot parse the `X-Total-Count` header, leading it to believe there are zero records, or if the API response format does not exactly match expectations (e.g., `id` field name).","error":"React-admin displays 'No results found' even though the API returns data."}],"ecosystem":"npm"}