How to Fetch Data from Server in Blazor Interactive Auto Render Mode - .Net 8 (Easily and Securely)

hey guys I'm back with one another video and in this video we are going to see how to fetch data in Blazer interactive or Auto render mode okay so for interactive server we know everything is going to run on server so we can directly access our data source maybe database or file system we can directly access those and for web assembly we know that all web assembly is going to be on the client side so it does not have d direct access to the server but it can make API calls HTTP calls to faster data or connect with some uh file system on the server right but for auto it is not that straightforward for interactive Auto it is a bit tricky actually because whatever component we have that is going to be first rendered using uh interactive server using the signal or connection to the server and after after that once uh web assembly has been loaded in the background and if we revisit that same page so for the next visits for all the uh subsequent visits it is going to use that web Assembly not the signal R connection so what this mean is for the first time it is going to use signal r that means it can directly access the server resources but for the subsequent visits it need to use uh HTTP calls so now we somehow need to know that this current page is it right now using interactivity using server using signal r or right now it is using web assembly for interactivity okay so that's what we will see in this video I have created a project I named it fet data Blazer Auto I have not made any change into this I created this is authentication none and interactivity interactive Auto okay and per page per component basis interactivity that's all what I did so it created two projects one is direct name and the second one is do client okay so that this dot client this has one page inside this page is counter. rer if I go to this here we have this render mode interactive Auto so this page is using interactivity using interactive Auto so that means first it will r on Signal R for the first wigit and after that for all other wigets it will use web assembly so let's first try to see then we'll uh Implement our data patching app is here let me open the developer tools I'll go to network clear everything and console clear everything on network I have selected web sockets so I'm going to click on this counter so I clicked on this counter and now if I go to network okay I R it already Okay it already had this let's do this let's change the port I just run it before start starting recording I just try to run it uh let's do this we'll go to properties launch settings and let's change the port so we are using https this one https 7045 let's make it 704 save and run okay it is here again Network clear console clear if I go to counter now web soet connected if I go to network we can see this there is web soet which is right now pending Z byte that means it created a websocket connection and if you go to console it downloaded the web assembly that means right now it is using signal R interactivity using server right now so if we press on this click me so we can check here I'll make it readable so we have these all these messages if I click on it you see it sent one message and it receives the update can we see this so all these are binary messages but yeah this is how it works if I click on it again counter so it is using right now the signal R to make the this component this page interactive now if I move out of this page okay right now I moved back to homepage now if I check this to this web socket call this is completed now time is 1.1 minute so if this time is here that means this web socket connection is completed this is not open anymore okay now let's see if I go to this counter page again I moved it move to this page right now there is no new signal connection and this is already closed so right now it is using Blazer web assembly so the same page but with two different modes now now we will see how to fetch data in this component so for this let's do this let's create a new page inside this pages in client so we'll say let's say razor component and we will call it let's say fatch data do we have fetch data in there no we don't right okay so now this data it could come from anywhere first thing we will say at theate page and we'll say fetch data and we will add render mode interactive Auto on this page okay let's add this page to our nav bar so in components layout NV menu let's copy the last one and we'll say fatch data and we'll name it fetch data okay now we can see this page but now comes the point we need to get data now we have two approaches first some people uh prefer creating HTTP separate API layer for all these those Blazer needs but what I follow if I'm using Blazer server and I I am the one who is going to write the API layer and then API layer is going to be hosted on the same server where my blazer server application is going to be hosted so for that I ignore separate API layer I usually do all those data related logic data related stuff in the Blazer server project itself using services so if tomorrow I need to add some API layer maybe some for some other client I'm creating some mobile application or some other UI client I need to access the same data I can simply introduce one API layer which is going to use the same business logic and data access layer which I have created in my blazer server uh as a service layer so that's how I approach things but for this particular thing this interactive Auto or we could say interactive web assembly we should not do we cannot do this basically we need to fet data using HTTP API calls only that's the only way by which we can get data from it so yeah I was saying that if I have a separate API layer then there is no problem we can directly maybe inject our HTTP client if we are using HTTP client or we are using HTTP client Factory or if we are using some third party for example let's say maybe we are using rid client so we can directly use this and directly make HTTP API call from here itself because there is no point we know that this is some third party server third party API we can directly call it from here so it would not make any difference if we are making this call from Blazer server or Blazer web assembly that means interactive server or interactive web assembly or interactive Auto we are good but if we have the logic in the same project they let me on same server and everything is same so in this case inside this uh fetch data Blazer Auto I am going to introduce first thing let's do this I'll create a service so I'm going to create a folder call services and here I'm going to create a class let's say some data service something like this okay and here I'm going to create a method public I sync task and let's say a list of strings and this we could say get data as sync and we can return some data from here so I'll simply say maybe I don't know or maybe let's say integer array and I'll name it g numbers I Sy this is just to demonstrate that some data is flowing through this it could be some maybe some it is getting data from some maybe database or some third party API or from file system it could be anything okay now now but here what we'll do for the sake of Simplicity I'll simply say enumerable dot range let's say 1 to 10 yeah and we can directly return this this is numerable range so I'll say return do two array and we are good okay some data service let's register this inside this program.cs now because this service exists in the main project fast data Blazer Auto we cannot register this inside this client project okay now what uh first let's try to register this so here before builder. build we'll say Builder doservices do maybe transient and and I'm directly registering this service now I can inject this service on the components Pages which exist in this main project so pages I can inject this on homepage I can inject this on weather page but I cannot inject this on client page in client project whatever pages I have I cannot inject this there okay that's because this service belongs to the main project because whatever we have in client project all that is going to uh Shi to the client going to be transferred to the client so we cannot have our database related logic and all those things inside this client project that is not going to work so we need to have this service in the main project only now the problem is how our component this fast data component can access to this sum data service so for this the approach we could take in this client project I'm going to introduce a new folder let's call it maybe Services only and here what I'll do I'll say I'll create a new interface here okay so I'll say I some data service okay and I'll Define that method here so it should be task of in Array and then get numbers missing all right what is the issue must decare body oh this is class it should be interface okay I have defined this interface now let's go to some data service let's use that interface here so I'll use this and the registration part in program.cs I'll change this registration as well now I'll say that I Su data service now we are registering this concrete service with this interface now we can use this interface at both the places we can inject this IAM data service in the components which belongs to the main project so that means Pages homepage let's inject this here on the homepage I'll say inject I some data service okay let's say some data service and here I can Define our code block and I can override on initialized so this uh this page home do rer this page is statically server side rendered so this page is SSR so there is no interactivity so we can directly use it here so un initialized we had that that was the sync method and we are not using the sync okay that's fine well so here override on initialized override on initialized async okay it is not working fine protected override async task on initialized async and here we can have an integer array of let's say numbers private which is default underscore numbers let's have a default value of empt array and then in this on initialized async method we can get these numbers from a wait and Su data service. get numing now we have these underscore numbers and here we can display these numbers so I'll add H2 and I'll say number from data service and here I can define an ul and inside that I can make an forage where and incore numbers and Li atate n so it is it will display all these numbers let first see this interface service and this uh showing this data on this SSR page if this is working then we'll continue further okay it's coming and we can see 1 to 10 these numbers are coming from there only cool numbers all right now let's try the same thing on that interactive page so that page we have this page is fetch data. rer page let let's inject the same I Su data service interface now we have this interface inside this project only so we'll say same thing sum data service and let's copy this thing this H2 ulli and this code block on patch data page I'm using the same thing we have defined this method on this interface so it was it should work so compile time we don't have any error let's run it and let's see what we got okay okay it came if I go to fetch data I have data 1 to 10 then I have some error if I go there come back okay let's see what that error was if you see one or more errors occurred cannot provide a value for property sum data service on type this because there is no registered service of type I Su data service but that is not right we already registered it you saw that right let's clean it go to homepage and let's restart this I am on homepage everything works fine I'll go to patch Data Page we have everything and after that we have this error again again it is saying the same thing that there is no registered service of type is some data service but we have that service and we can see the data here so the point here is the problem is when so initially it runs on server using interactive server using signal or connection in that case it goes to the main project and we have that defined in the main project in this program.cs right so it has that access to that service it patches data we got data after that web assembly got loaded and then when web assembly kicks in it checks that component this fet data and then it checks this we are injecting is some data service but for this interface there is nothing uh registered for this service it has its own program. CS file so here we need to register some service for that in here so using this we'll be able to use this now the problem comes builder. Services dot we could say add transient we have isome data service but we do not have that sum data service because that service belongs to to the main project one approach could be we can move this sum data service to this client project but that is not the correct way reason this sum data service can use uh database to fet the data and that cannot be used from client project so now now we are here now somehow we need to tell this that if you are here if you are running just web assembly just do this righty to this is some data service you need to use HTTP API call to fetch the data from this service okay now how can we achieve this for this what we'll do I'm showing you a simple HTTP client approach basic raw HTTP client approach you can use maybe Rait I already showed you in one of my project how to use repit or you can use maybe HTTP client Factory if you want so the approach or maybe if you are using some maybe rest shop or some other library to make HTTP calls that is also fine okay so in this Services what I'll do I'll create a new class and here I'll say let's say Su data API service or service API API service something like this the name is up to you or maybe we could say proxy service some data proxy service something like this or some data service proxy the name is up to you okay here this class this will also implement the same interface I Su data service we'll implement this interface we are here okay now we need to get data from the same ser service which was that Su data service which actually has the actual logic to fetch data so for that we are making sttp call that means we need to have some maybe minimal API or we need to have some controller okay let me show you minimal API approach so in the main project in program.cs what I'll do I'll Define a minimal API inpoint here so I'll say app do mapg and let's say patch data the names are now the razor page name and API name these are same so we should not do this so let's say API / patch data okay and here we can Define our Handler so here I'll say I want you to inject I some data service this so let's say service and from here I want you to return let's say type the results do okay and a wait service. getet numbers okay so this thing this API this is using the same service we are injecting it and we are calling this method which is intern calling the same thing same database logic or same business logic service logic whatever you call it it is using the same so are some data service which we can directly inject for that page if you we are on interactive server mode and if we are on interactive web assembly we are going to use the same service but via this API so API fetch data okay now what we'll do inside this uh some data proxy service okay here we'll create HTTP client HTTP client new HTTP client or maybe we can directly register this HTTP client in the uh program.cs so what we'll do in program.cs we will say Builder do services do transient or scoped we could use anything and here we'll say the service provider it should use we will return a new new HTTP client from here with Base address defined as new URI and we can access the current domain using builder. host environment. Bas address yes using this thing now we have registered this HTTP client now we can inject this HTTP client directly in our service proxy class this one so here we'll say say let's use the Constructor we'll directly inject HTTP client HTTP client and now we can use this HTTP line to get the data so we'll say where numbers equals a with HTTP client dot get from Json async and the return type is going to be integer array and then the request U and that is going to be we know API SL fatch data right it was this API SL patch hyphen data correct now we'll have these numbers and we'll return these numbers all right so now are this proxy service is ready we can register this prox service in here so for Isam data service just use this service okay so let's revisit this we have Isam data service with this Su data service which is actually going to fast the data from database this is defined in the main project okay and the registration in the DI in main project we are doing this for this interface which is defined in client project we are registering this service with this so when then our page which has interactive auto mode this is running for the first time that means it is using interactivity using server using the signal connection that means the logic is going to be executed on the server in that case it is going to use this ISM data service the implementation it will get from this main program.cs the main projects it will use this some data service and from the sum data service it will get the actual data from database now when the flow goes to web assembly on this interactive Auto page in this case it will check the implementation of this Isam data service in the clients program.cs file and in clients program.cs we say that Isam data service you should check the implementation in some data proess service and inside this service we are making an H HTTP call to our same main project we have defined an end point here using minimal API it could be uh controller action there is no problem with this and from this API we are getting data from the same server same service all right so this is the complete flow now let's check it and for this we can add some uh console lines as well I'll say console cons. right line main project Su data service get num say get number sing so that we can see that what is happening here we could add break points as well but I'm just adding these methods here then I'll add this method in some data proxy service here so here I'll say client project client project some data service proxy G number system okay now let's run this and let's see what we got for client log we will use the browser console window and for servers log we can use the the command prompt it opens so right now we have this thing if we open this we have this here which is saying main project some data service G number sing because we got this data on the homepage which is using uh which is statically rendered on server using Blazer SSR so this is on server side only now if I go to fetch data you see we got main project Su data service G number sing this first call this is from server and now if I check this if I'll do inspect and I'll go to console you see it said get uh sorry client project some data service proxy service it started from here and then the second call came after this so now we do not have any error and we have the actual data right so that is how we can fetch data in Blazer uh interactive auto mode so our complete logic database access everything is going to be at one single place which will be in main project using some services and then we can use that same service we will define an interface which will be client project and the direct implementation will be this data service which the interactive Auto when it is running for the first time using signal connection using interactive server it will use this and when it is using web assembly from interactive mode then we will Define one service in the client project only which will make HTTP call to the same service all right so it sounds complicated but it is not if we are using the goodness of this auto mode then we at least least we can do this thing right you can get rid of all this thing if you have used some third party uh HTTP client okay for example refit I really like refit r e fi T if we could could have used that then there is no point of creating all these we should have just defined an interface and we could have get the data from here directly okay all right so and if you if you want me to create the same video using refit client do let me know in the comment I can plan a video and I can create that video and I'll share with you guys and this source code which I have used in this project you can get it for free from my description I'll add a link in the description please check the source code if you want just get it for free all right so that's all for this video do let me know in the comment if you already knew that you can do this or did you like this approach or you have some other approach to tackle the same thing patching data using interactive auto mode if you have some different approach do let me know in the comment I would love to uh see the different approaches this is what I am using and which makes sense to me and I open to other alternative Solutions as well all right so that's all all for this video please like this video share this video subscribe my channel I'll be back soon with some other video till then bye-bye happy coding

Channel: Abhay Prince

Views: 6,666

Keywords:

Id: qOF9Q8vAJ-o

Length: 32min 38sec (1958 seconds)

Published: Tue Dec 05 2023