@theapexlab/ra-data-blitz NPM

Blitz-js data provider for react-admin

Easily build fullstack backoffice apps with blitz-js and react-admin!

Check-out our official Demo app

Installation

npm install --save @theapexlab/ra-data-blitz

yarn add @theapexlab/ra-data-blitz

Usage

Add a new data model to your blitzjs project's prisma schema:

// in schema.prisma
model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String
}

Generate CRUD resolvers for the model by running the following command:

blitz generate crud post

Import blitzDataProvider from @theapexlab/ra-data-blitz and optionally define a searchEntities function:

// in App.js
import React from 'react';
import { Admin, Resource } from 'react-admin';
import blitzDataProvider from '@theapexlab/ra-data-blitz';
import { PostList } from './PostList';
import { PostEdit } from './PostEdit';
import { PostCreate } from './PostCreate';
import { invoke } from 'blitz';
import { Prisma } from 'db';

// specifies search functionality of postFilters
const searchEntities = (q: string): { user: Prisma.PostWhereInput } => ({
  // / NOTE: you can provide [prismaEnitityName]:  PrismaWhereInput pairs here
  post: {
    title: {
      contains: q,
    },
  },
});

// invoke is neccasary to call blitzjs RPC api
const dataProvider = blitzDataProvider({ invoke, searchEntities });

const ReactAdmin = () => {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} />
    </Admin>
  );
};

export default ReactAdmin;

// in PostList.tsx
import { List, Datagrid, TextField, TextInput } from 'react-admin';

// NOTE: source must be "q" inorder to make search functionality work
const postFilters = [<TextInput key="search" source="q" label="Search" alwaysOn />];

export const PostList = props => (
  <List filters={postFilters} {...props} exporter={false}>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="title" />
      <TextField source="content" />
    </Datagrid>
  </List>
);

Options

Customize root path of the resource

The default is to target resources under the app/ directory. if there is a program for the server, such as an API root, specify handlerRoot to avoid it.

// Change the default directory of handlerRoot from `app/` to `app/reactAdmin/`
const dataProvider = blitzDataProvider({ invoke, searchEntities, handlerRoot: 'reactAdmin' });