Simple REST Data Provider for React Admin - Strapi

React Admin data provider for Strapi.js.

Strapi V4 Update

RA-STRAPI-REST works with Strapi V4. 🚀

If you want to use the version compatible with Strapi V3 check this PR.

Also, it is converted to TypeScript.

Check out this demo for reference => Demo

Works with Single Types
Works with Collection types
Works with Components
Handles single and multiple Media files
Handles basic filtering
Handles sorting and pagination
Works with reference fields/inputs under community version
Tested with Sqlite and Postgres

Please submit a PR with an example if you find any bugs. Thanks!

Usage

Save the index.ts file as ra-strapi-rest.ts and import it in your react-admin project. No need to npm install another dependency :)

// App.tsx

import raStrapiRest from "./ra-strapi-rest";

If you prefer to add this to node modules, go ahead and run the following command

npm install ra-strapi-rest

yarn add ra-strapi-rest

Then import it in your App.tsx as usual

import raStrapiRest from "ra-strapi-rest";

Example

import { fetchUtils, Admin, Resource } from "react-admin";
import { ArticleList } from "./pages/articles/articleList";
import raStrapiRest from "./ra-strapi-rest";

const strapiApiUrl = "http://localhost:1337/api";

const httpClient = (url: string, options: any = {}) => {
  options.headers = options.headers || new Headers({ Accept: "application/json" });
  options.headers.set("Authorization", `Bearer ${import.meta.env.VITE_STRAPI_API_TOKEN}`);
  return fetchUtils.fetchJson(url, options);
};

export const dataProvider = raStrapiRest(strapiApiUrl, httpClient);

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="articles" list={ArticleList} />
  </Admin>
);

export default App;

ArticleList Component:

import { List, Datagrid, TextField } from "react-admin";

export const ArticleList = () => (
  <List hasCreate hasEdit filters={articleFilters}>
    <Datagrid rowClick="show">
      <TextField source="title" />
      <TextField source="published_date" label="Publish date" />
    </Datagrid>
  </List>
);