React Admin data provider for Strapi.js.
If you want to use the version compatible with Strapi V3 check this PR.
Also, it is converted to TypeScript.
Please submit a PR with an example if you find any bugs. Thanks!
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";
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>
);