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).
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 !
- React-admin you say ?
- An adaptator ?
- How is that working ?
- What now ?
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 (
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
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 (
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.
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 !