The talk was streamed on #PrismaDay | June 26th, 2020
Prisma Day is a community-focused online conference on modern application development and databases.
https://prisma.io/day
Subtitles for this video have been professionally transcribed. Prisma can provide the subtitles for your tech video as well - get in touch with us at [email protected]
- Welcome to my learning to talk about the Prisma Admin React Component. My name is Ahmed Elywa. I live in Egypt and I am a full stack developer. Here is what we will cover. Why do we need this component We already have Prisma Studio? The content of the package, the requirement of the component, some examples and use cases. Let's start. why do we need this component when we have Prisma Studio? There are two main differences. First, we can ship it to our client in an admin panel. Second, we can customize every feature in it, like you can customize the slide of the components and add or hide actions like create, update and delete. The component also has some feature not in Prisma Studio. It's possible to use the Quill editor for some fields like the post body field. It comes with a great and intuitive UI with 4 themes. When you select a model, it displays the fields of the related tables. We can perform cascading deletions using @prisma-tools/delete! Now, let's see what this package contains. The first part is the generator. It contains three functions. First, the build Settings Schema. This convert your schema.prisma file to schema.json file. This file becomes the source of those tables present in your database. Second, the pages generator. This generates a page file like every model in all schema. Third, the graphical generator. This generates some GraphQl queries and mutations that you will use in your applications. The second part is the active components. First, the PrismaTable component. This component dynamic stables was create update and delete actions. Second. The second component. This component allows you to customize the table... This component allows you to customize the table you're liking without having to edit any code. Now let's discuss the requirement of the component. First We must bought this property active component inside inside Apollo Provider. So it can send the queries and limitation to all back in. We'll also need to put it inside and ooh-ui Layout component for the styling to work properly. Second in all back in, we must have this list list of the queries and mutations. The sitting component require one query getSchema and two mutation update mode and update fields to update getSchema. PrismaTable. PrismaTable requires three queries and three mutations. All this queries and mutation can be auto generated using the Prisma Tools Nexus package. Here is the docs today. This is an example importing admin Nexus settings from Prisma Tools Nexus and we exported to be ad schema file. Now we back. Let's finish with some example. Here is an online version of the tools for you to try without having to install it. Let's try it together. Here is all the settings component. You can switch between models form here. And you can change the display name in the table and form this. From here you can select how this model will display in a related table From here you can allow or disallow these actions. Here is. We have we don't have Add button. When we activate it. Now we have Add button and we can add. We can edit and when we edit we can connect or disconnect to this relations right here and seal. And here how's that go model is displaying in this related table. We have your password as unread. If I make it as a read it will display here and I can be re-hit again. I can re-order by drag and drop. And like you see name first in here. And we when we edit name first . If I back it, it's email and name. And in it is email and name. And when we add also add email first and then name you can connect to you. It's very easy and very nice to customize your tables with UI components. Thank you all. Goodbye.