Prisma with react-admin: build a working backoffice in a few hours


#1

Hey there :wave:

Have you ever needed to build a backoffice (with Prisma) ? Have you also felt the pain it was ? Haven’t you ? Lucky you. You will never need to feel that (again).

Enter ra-data-opencrud, an adaptator for react-admin working with Prisma and GraphCMS.

If you’re too lazy to read what it is about, check out a working backoffice example here, plugged on prisma-ecommerce’s Prisma API. Don’t be shy and dive into the components. Even a child could understand what’s going on !

Edit ra-data-prisma

Summary

  • Context
  • React-admin you say ?
  • An adaptator ?
  • How is that working ?
  • What now ?

Context

As powerful as prisma can be, building backoffices can be painful mostly due to the redundancy of the tasks.

As Prisma architecture suggest, it should be put behind a handcrafted GraphQL server, and be used as a bridge between the database and the actual API that will eventually be consumed. This implies that most of the CRUD mutations will inevitably have to be duplicated.

On top of that, these duplicated resolvers will need additional logic to compute which fields needs to be disconnected, which needs to be connect, created, or updated, which kill all the benefits from having an auto-generated CRUD GraphQL API.

There may be one solution though: As Prisma builds a generic GraphQL API following conventions, it means there’s a door for automation.
If we used Prisma directly to handle all those redundant CRUD tasks, and made use of the conventions followed by Prisma, maybe we could automate the whole process.

React-admin you say ?

A powerful library to build backoffices on top of any backend

As the github package says, react-admin is “A frontend Framework for building admin applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design”.

react-admin uses an adaptator approach, making it theoretically working with any kind of API that follows a predictable convention (which is the case of Prisma).

react-admin speaks a dialect that abstract most CRUD operations (CREATE, UPDATE, GET_MANY, GET_ONE, GET_LIST etc…). It is then the responsability of the adaptator to convert this dialect into requests that can be understood by our backend. Below is an example following GraphCool’s grammar.

How is that working ?

Most GraphQL adaptators are based on a low level adaptator called ra-data-graphql made by react-admin creators.

In a nutshell, its job is to run an introspection query on your GraphQL api, pass it to your adaptator along with the type of query that is made (CREATE, UPDATE, GET_MANY, GET_ONE, GET_LIST, DELETE etc…).

It is then the job of the prisma adaptator to build the GraphQL query that matches Prisma’s conventions, and to provide a function that will parse the response of that query in a way that react-admin can understand.

Once the query and the function are passed back to ra-data-graphql, the actual HTTP requests is sent (using ApolloClient) to your GraphQL API, then the response is parsed with the provided function and that parsed response is given to ra-core, the core of react-admin. That’s it.

ra-core => ra-data-graphql => ra-data-opencrud => ra-data-graphql => ra-core.

What now ?

ra-data-opencrud is still very WIP. You will find on the repository a working React app that uses the library. I haven’t been able to test all use-cases for now, and things might break.

However, adaptators are not such complex pieces of software, and making it better should be an easy task. There are already a few topics on which I’d like some feedback (that you can find in the issues section).

I’d love for you to come and try it on your own project !

See ya :beers:


#2

Cool project!
Feel free to open a PR to add to the official React Admin’s doc: https://marmelab.com/react-admin/DataProviders.html#available-providers


#3

Thanks! I’m actually already in your documentation, I just had to rename the package from ra-data-prisma to ra-data-opencrud since it was already taken. I’m gonna send you a PR in the coming days to rename the package in your doc (even though the link is still working) :pray:


#4

This is awesome, thanks for sharing!


#5

@Weakky did you abandon this project?