ra-strapi

This package provides a Data Provider and an Auth Provider to integrate Strapi with react-admin.

This package supports:

• CRUD on Documents
• Authentication with email and password

Installation

yarn add ra-strapi
# or
npm install ra-strapi

Usage

Using the public API

Create a new dataprovider giving the baseURL of your Strapi instance, pass the dataprovider to the Admin component.

import { strapiDataProvider } from "ra-strapi";
import { Admin, ListGuesser, Resource } from "react-admin";
import { Layout } from "./Layout";

const dataProvider = strapiDataProvider({ baseURL: "http://localhost:1337" });

export const App = () => (
  <Admin layout={Layout} dataProvider={dataProvider}>
    <Resource name="articles" list={ListGuesser} />
  </Admin>
);

note: you may need to tune the permissions of the public role ( see Strapi doc ).

Using the authenticated API

Create an authProvider giving the baseURL of your Strapi instance, it will handle for you the jwt token. Create an httpClient with strapiHttpClient, it will handle the authorization headers for you. Create a dataProvider giving the baseURL of your Stapi instance, and the httpClient you created. Pass those dataProvider and authProvider to you Admin component. As you will need to authenticate with email/password, pass the react-admin LoginWithEmail to the loginPage prop, or a custom login page.

import {
  strapiDataProvider,
  strapiAuthProvider,
  strapiHttpClient,
} from "ra-strapi";
import { Admin, ListGuesser, LoginWithEmail, Resource } from "react-admin";
import { Layout } from "./Layout";

const STRAPI_URL = import.meta.env.VITE_STRAPI_URL;
const authProvider = strapiAuthProvider({ baseURL: STRAPI_URL });
const httpClient = strapiHttpClient();
const dataProvider = strapiDataProvider({ baseURL: STRAPI_URL, httpClient });
export const App = () => (
  <Admin
    layout={Layout}
    dataProvider={dataProvider}
    authProvider={authProvider}
    loginPage={LoginWithEmail}
  >
    <Resource name="articles" list={ListGuesser} />
  </Admin>
);

Using an API key

Create an httpClient with strapiHttpClient, specifying the authType to apiKey and the key. Create a dataProvider giving the baseURL of your Stapi instance, and the httpClient you created.

import { strapiDataProvider, strapiHttpClient } from "ra-strapi";
import { Admin, ListGuesser, LoginWithEmail, Resource } from "react-admin";
import { Layout } from "./Layout";

const STRAPI_URL = import.meta.env.VITE_STRAPI_URL;
const STRAPI_API_KEY = import.meta.env.VITE_STRAPI_API_KEY;
const httpClient = strapiHttpClient({ authType: "apiKey", apiKey:  STRAPI_API_KEY});
const dataProvider = strapiDataProvider({ baseURL: STRAPI_URL, httpClient });
export const App = () => (
  <Admin layout={Layout} dataProvider={dataProvider} loginPage={LoginWithEmail}>
    <Resource name="articles" list={ListGuesser} />
  </Admin>
);

note: you may need to create an api key in the Strapi admin panel ( see Strapi doc ).

Filtering

To learn how filter works with react-admin refer to the documentation here. The availables filters operators are :

Operator	Description
eq	equal
eqi	equal (case insensitive)
ne	not equal
nei	not equal (case insensitive)
gt	greater than
gte	greater than or equal
lt	less than
lte	less than or equal
contains	contains
ncontains	not contains
containsi	contains (case insensitive)
ncontainsi	not contains (case insensitive)
between	between two values
in	in an array
nin	not in an array
isnull	is null
isnotnull	is not null
startswith	starts with
startswithi	starts with (case insensitive)
endswith	ends with
endswithi	ends with (case insensitive)

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

const articleFilters = [
  <TextInput source="title_contains" label="Title"/> // will filter articles with title containing the value
]

export const ArticleList = () => (
  <List filters={articleFilters}>
    <Datagrid>
      <ImageField source="cover.formats.thumbnail.url" label="Cover" />
      <TextField source="title" />
      <TextField source="description" />
      <ReferenceField reference="authors" source="author" link="show" />
      <ReferenceField reference="categories" source="category" link="show" />
    </Datagrid>
  </List>
);

License

MIT