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.
Demo
Check out this demo for reference =>- 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
or
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>
);