@FusionWorks/ra-data-nest-crud
@FusionWorks/ra-data-nest-crud
is a dataprovider for react-admin, that has been designed to make easier communication between a frontend application built with react-admin,
and a backend application built with nestjs framework and nestjsx/crud.
Install
Using npm:
npm i @fusionworks/ra-data-nest-crud
Using yarn:
yarn add @fusionworks/ra-data-nest-crud
Usage
// in app.js file import React from 'react';import Admin Resource ShowGuesser from 'react-admin';import crudProvider from '@fusionworks/ra-data-nest-crud'import UsersList UserCreate UserEdit from './Users' const dataProvider = ;const App = <Admin => <Resource ="users" = = = = /> </Admin>;;
Working with relations, and selecting spesific fields
Quick and less flexible: Set the relations/fields to eager on server CRUD config side
Due to how nestjsx/crud works, in order to select only spesific fields, or to join relations, we need to add spesific query params.
but, REACT ADMIN does not provide a way to configure that on his side. (as to date react-admin#3411).
To solve that, we've added a way to embed these configurations in the resource name in JSON string form.
In case you want want to work with relationship/select spesific fields:
import createDataProvider encodeParamsInResource from "@fusionworks/ra-data-nest-crud";<Admin = >...<Resource // , = = =/>...</Admin>
Handeling references/Permutations and encodeParamsInResource.
Due to how REACT ADMIN works, each variant of resource, even with same name, but using encodeParamsInResource
, is seen as a different resource.
Means that if on one of your components you've used reference input/field based on encodeParamsInResource
with different parameters than the top level resource,
You will need to add "headless" resource with same configurations. (What is it headless? what? see the tags resource here)
For example:
// CategoryEdit or what ever<ReferenceInput ="Template" ="template.id" => <AutocompleteInput ="name" ></ReferenceInput> <Admin>// ...<Resource = />// ...</Admin>
Note: In case of REST verb "CREATE" and "UPDATE" consider that the data provider will make GET_ONE request hehind the scene to fetch fresh copy of all of the record after the update/create.
Example
You can find an example of a project that uses nestjs
and nestjsx/crud
on backend and admin-ui
with @fusionworks/ra-data-nest-crud
data provider.
If you need to run it, you need to go to api folder, install dependencies,
change by your needs the config file for nestjs that is located in example/api/src/config/
, and run application.
cd api
npm i
npm run start:dev
For frontend part you need just to go to admin-ui folder, install dependencies, and run the app:
cd admin-ui
npm i
npm start