TypeORM joined tables in AdminBro back office
In this short tutorial, I will show some particular qualities of rendering joined tables data in the AdminBro back-office while using TypeORM.
Introduction
I would not think of my Medium account as a full-fledged blog but more like some work note pad. So every issue which took me more than an hour of googling for the solution hints I consider as worth to be highlighted here as some helpful instructions for the future and for other developers. Recently I’ve got a very simple task like showing information from two joined tables as a single list in the AdminBro (v3.2.5) back-office. I used TypeORM (v0.2.25) for my model representation and the task looked like a very simple one. However, I faced several pitfalls that I would like to tell you about.
Problem with the keys
If to reduce the database structure to a minimal reproducible example it will look as follows
Consequently, I had two entities that I connected to the back-office (pay attention to non-common column names form the primary columns — pk_post and pk_user as well as the join column).
However, the result of the Posts the list looked a bit different from the one I expected to get. Instead of having some link to the post related user which meant correct joining result, I got only the column with foreign key
However, all the filters worked as expected. That was a bit strange. After some time of debugging and googling, I finally found an answer with the help of AdminBro community and Wojciech Krysiak personally. The problem appears if the primary key column is not called id. I don’t know if this is an issue of the admin panel itself or a TypeORM adapter — I’m going to research it further and make a fixing pull request. However, for now, the primary column of the entity should always be named id like this:
If we do this, everything works as expected and we get the correct link to the joined user and its title instead of a foreign key
Showing other data from the joined table
Well then, after the first part is done, I want to add more information from the joined user table (i.e. link) to the list of posts. The only way to implement this is to create a custom component to be used for rendering this data. But first, let’s describe the additional properties in the declaration of Post resource:
The example above declares an additional property userLink which will be shown only in the list of posts by means of a custom component relatively defined in the file ../components/property-item.tsx. As long as AdminBro uses ReactJS for the templates the minimal component for solving this task could look as follows (remember to add "jsx": "react" option to the compilerOptions of your tsconfig.json)
As can be seen from this file and this long chain of properties, the record is populated with joined tables according to the joining column name and through this population, we can access the params of the joined table.
Reuseable component
On the previous step we could consider our task as done. However, if we have more properties to show we should create more and more components. That’s no good. Let’s make this component more reusable. What do we need for it? We should let the component know what is the name of the populated record and which param we want to render from it.
This can be easily done by passing custom params to the component from admin resource:
After that, we just read these params in the component and use them in the rendering
That’s it. And, as you can see, the obtained result looks as we expected. The list of Posts is populated with some additional data from users
Afterwords
So this is how we managed some joined tables rendering in the AdminBro back-office. I strongly recommend to look through the documentation and discover more options for AdminBro resources customization and much more useful stuff. In my next topic, I’m going to highlight the custom actions because I saw such questions on the community channel.
Feel free to let me know in the comments if any questions appear or which other topics would be interesting for you. Follow me on Medium.
