Decoupled Drupal with JSON:API

uh hi everyone this is uh swati i um work with accenture as an associate um manager uh and have been working with uh drupal since rupaul's six so yeah since quite some time so today i will be presenting how we implemented a decoupled drupal for one of our government clients so yeah let's start so json api module really lays at the foundation level for any decoupled environment where we are using json api as a specification so uh yeah so this is uh once you enable the json api module you get the rest api for all the entities and bundles which you have in your system but really json api is a no configuration module so once you enable it you really cannot configure anything so we have a very useful add-on module called json api extra which provides an interface where we can uh override json api module with us it has configurations like we can rename a module rename a resource path change the resource name we can exclude few fields from the from any resource type and a set of default enhancers which we can apply for our fields to customize and enhance the output for our json api right so now let's uh see what in real world scenario we have to do what on top of these two modules to uh really make this decoupled environment work right so yeah so in json api everything is a resource and each resource is connected to another resource in form of relationships so let's take an example to understand it more so for example we have a content type called article which have some basic fields like id and title and on top of that it has some entity references so with a tag name associated with an article an image associated with an article and some paragraph called related books which then references to another content type call book so this is a general structure which we have for any content type right so now if our frontend application or any other application tries to access the content type article the resource page for content type article they will be getting the basic information for an article they will be getting id they will be getting the title but they will not be getting the information of the relationships which will be added to that resource type it will be saying that it has a relationship but the you know the tag team will not be provided the image url will not be provided so uh but our frontend application really needs a flat response where if they are trying to access one article resource page they should get all the information which is related to that particular resource type right uh and they don't really have to iterate deliberately go inside each and every resource to get the you know response of each and every uh these resource types to do that we have a module called json api defaults so once you enable that module it provides a a block in the json api interface where we can add uh these relationships so here what what we are saying is we need to include these information of these relationships in our resource type so i want the information for my tags i want the information for my article image and then i want to add information for my paragraph collection of books awesome right but the catch here is if for example we have a nested kind of a relationship where we have a content type called article which is referencing to a paragraph collection of books and then it is in again referencing to another entity reference content type book so it is a nested kind of a relationship where even if we add collection of books paragraph in the relationship it will not be still providing the information of book name to do that we have to deepen inside the relationship and go a step further and say we need the information of a paragraph then dot and go inside deeper and say okay we also need the information of that book similarly if you then need a relationship book image which is you know a separate relationship or a book you have to go deeper inside and say okay i need related books dot field book and then field book image and this is how we go inside and get the information for all the relationships which we have in the system so once we do that we have this compiled response for all the relationships which uh which we have and we have this one flat response for our resource type right so yum right so but now we have all the fields which we want for our system which is there but we have these scenarios and situations where we need something which is really not there which is a computed information something which we need to send to our json response which is uh not available or really computed right so how can we do that how can we send something computed in adjacent response so to do that we have a hook called entity base fill info alter so here i am adding a field called sticky because i'm probably sending some more sticky information with my content and then i'm using uh my class of plugin field type which is my custom field which is responsible for evaluating and providing the value of my field right so i here i'm just sending a simple string saying custom computed field value this is a value which uh my class will be processing right so once i do that you will see that my field sticky which i created here will be added in my json response and with the value which i have set here will also be added to my custom response and this is how we have been adding some of the custom computed values which needs to be added for json response all right so now we have all the uh resources we have uh everything which is ready but there's one thing else which uh really is needed sometimes which is how to enhance any existing uh field so we have these scenarios where we have to enhance the output of an existing field in json api response we can do that by adding a custom field enhancer which uh which can be added in this name safe name space of plugin json api field in answer uh so here i'm creating my custom sticky uh enhancer which which which is you know which for that we have to extend a class called resource field enhancer base which is an abstract class provided by json api extra module so if there's a dependency if you are adding uh any uh fill in answer right so here i'm adding my customer it is a label which is uh added and then we have to override two methods do undo transform and do transform methods these two methods are responsible for uh pro you know providing what these and what uh enhancer will be doing once it is applied on um any field right so uh do undo transform is the method which is responsible that once you are applying an enhancer what needs to be done so i'm here i'm just changing the value of my field to something custom right so i will be applying that so my field was feel sticky i will be applying that to my enhancer so once i add my field enhancer this is a list of all the default enhancers which are present in the in our system once we enable json api extra module and my enhancer which i added here adding some more info to sticky is added here with along with the other enhancers which is added so once i add that i'm applying it to field sticky and once i apply that my value is now changed to the new string value which i computed here and if i try to if i remove the enhancer it will be reverted back to the original value which were which was set there which was like on a custom computed field value and that needs to be implemented in the method do transform i know the names are little mix up but it is this is how it works so yeah so this is how we can implement any default enhancer and apply on top of our fields to enhance the output for any uh feeling json api response great so uh once we have the setup for data ready the next and very important concept in json api is that we have to expose our images uh as it will be accessed by different platform different channels we need to provide images to a different platform so we will be uploading images at cms level and these image styles will then be used across by different platforms so how can we actually add these image styles in a json api response and expose to any other application so for doing that we have two modules called consumer and consumer image style so here i'm registering a default consumer which is using two image styles medium and thumbnail so now what will happen is all my resources will be uh using and will be exposed in these two image styles right but if there is a requirement that at a field level we want to modify it we want to customize it we can do that so from the list of enhancers once i enable this module consumer image style a new in field enhancer is added which is called uh image style so it can be used to reduce or refine the image styles that can be applied at a image or at a field level the catch here is uh even if there is a large image style you cannot select it because at the consumer level you have not added it so you cannot increase the number of image styles at a field level however you can refine and reduce the number of image styles at a field level right so this is how we can uh add image style for our images in json api response and uh this will be the this is you know the output which we get right so now we have uh everything which is uh needed for exposing and setting up our json response but last novel is how our front-end application will actually be using uh this json api response front-end application really uses url analysis rather than you know any other nid or you know any other uid or for accessing our application so we have this module called decoupled router which sits between our decoupled front end and recoupled drupal and this is the one end point which our front end will be accessing so it will always be accessing this translate path api and talking between both of them so for example my front end uh wants an uh request for about us page it will be uh going through my uh the decoupled router it will be processing the response and sending it back uh the endpoint response for my front end to use and access it right so it is it simplifies our process and uh uh the it you know uh now the workload is uh shifted from our front end so everything is streamlined right so these are some of the building blocks which um which we can set up uh and the ecosystem for json api is increasing day by day which is a really great so you can explore their new set of modules which uh you should see and you know it is great to explore them so yeah so this is what i want to share for uh the couple drupal environment so yeah thanks to thanks listening to me and let me know if you have any questions you can reach me at the swathi.com accenture.com so yeah

Channel: DrupalSouth

Views: 1,394

Rating: 5 out of 5

Keywords:

Id: f1ZsLkG-dxg

Length: 12min 13sec (733 seconds)

Published: Mon Nov 23 2020