Blazor Server Where Does Httpclientfactory Cliend or Server Side

The inevitability of most Blazor applications is the role of HttpClient to reach out to API endpoints. Many times, these endpoints are contained within the solution, but they may be external as wellspring. Without much campaign, this necessity quickly turns into a rats nest of initialization code in razor code with hardcoded strings for each end point. The pattern I volition describe in this post is designed to construct this a simpler experience.

For the purposes of this post, I'm going to use the Blazor WebAssembly guide with ASP.Earning Core hosting to keep client and server separate – mostly to certify the capabilities in a cross assembly mode.

Hot Tip

Just because the default templates specify a "Shared" subroutine library and namespace, it throne often defecate good sense to trim out the "Shared" portion from the default namespace to simplify razor using statements.

The first thing we need to do is delimit the functionality our service will support. This should match, at least part, the methods defined past your API controllers. We'll use the built in Weather outlook as our example.

public interface IWeatherService {     Job<IEnumerable<WeatherForecast>> Get(); }

In real time that we deliver an interface defined, we will ADHD it to the WeatherForecastController class definition. Different than updating the method to glucinium async and restitution a Tax, no other changes should be necessary since the interface matches the definition of the controller.

Instantly, earlier we get to the magic – I'm going to define a helper port. While this is non necessary to everyone's use lawsuit, I found it useful to stretch the use of this pattern across a Blazor place and a WPF desktop application with more than complex serialization scenarios.

The IJsonOptionsProvider armed service defines a method for retrieving an instance of JsonOptions that allow for customization of the serialisation process, including tailor-made converters for the (presently) nefarious TimeSpan object.

public interface IJsonOptionsProvider {     JsonSerializerOptions Options { beget; } }

The veridical legerdemain comes in the HttpClientApiBase abstraction, which provides a common method for interacting with HttpClient configurations. While the API Controller implements the server incline of our made-to-order Weather service, this class will allow for the Blazor Node access to the synoptical interface.

world abstract socio-economic class HttpClientApiBase {     private readonly IJsonOptionsProvider _jsonOptionsProvider;      public HttpClientApiBase(IHttpClientFactory httpClientFactory, INavigationProvider navigationProvider, IJsonOptionsProvider jsonOptionsProvider)     {         _jsonOptionsProvider = jsonOptionsProvider;         Navigation = navigationProvider;         ClientFactory = httpClientFactory;     }      snug async Task<TResult> DeleteAsync<TResult>(cosmic string path, string clientName = "api")     {         var client = ClientFactory.CreateClient(clientName);          var effect = wait client.DeleteAsync(             Navigation.Format(path)         );          recall await result.Contented.ReadFromJsonAsync<TResult>(_jsonOptionsProvider.Options);     }      protected async Chore<TResult> PostAsync<TModel, TResult>(twine route, TModel model, string along clientName = "api")     {         volt-ampere customer = ClientFactory.CreateClient(clientName);          var result = look client.PostAsJsonAsync<TModel>(             Navigation.Format(path),             model,             _jsonOptionsProvider.Options         );          return expect result.Subject.ReadFromJsonAsync<TResult>(_jsonOptionsProvider.Options);     }      protected async Task<TResult> GetAsync<TResult>(string up itinerary, string clientName = "api")     {         volt-ampere client = ClientFactory.CreateClient(clientName);          var result = await client.GetFromJsonAsync<TResult>(             Sailing.Initialise(path),             _jsonOptionsProvider.Options         );          return event;     }      protected INavigationProvider Navigation { get; private set; }      protected IHttpClientFactory ClientFactory { catch; private set; } }

Please short letter there is a general lack of optimisation, specifically in the lack of reuse of an HttpClient. This is for sake of simplicity over outright performance.

To unmasking the functionality to the Client project, define an HttpClientWeatherService category that implements the above abstraction and the IWeatherService interface. By using the internal methods, we can interact with an API endpoint via HttpClient and return an object. This allows initialization code to Be centralized, chase the DRY (dont iterate yourself) principle.

public sealed class HttpClientWeatherService : HttpClientApiBase, IWeatherService {     public HttpClientWeatherService(IHttpClientFactory httpClientFactory, IJsonOptionsProvider jsonOptionsProvider)         : base(httpClientFactory, jsonOptionsProvider)     {      }      open async Tax<IEnumerable<WeatherForecast>> Fix()     {         return await GetAsync<IEnumerable<WeatherForecast>>("/api/weatherforecast");     } }

In conclusion (for setup), we need to inject the various services we demand, and configure the named HttpClient. Change the Client's Program.Of import method as follows.

national stable async Task Main(string[] args) {     var detergent builder = WebAssemblyHostBuilder.CreateDefault(args);     constructor.RootComponents.Add<App>("app");      // builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(detergent builder.HostEnvironment.BaseAddress) });     builder.Services.AddHttpClient("api", node => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));      builder.Services.AddScoped<IJsonOptionsProvider, StaticJsonOptionsProvider>();     constructor.Services.AddScoped<IWeatherService, HttpClientWeatherService>();      await builder.Build up().RunAsync(); }

If everything is wired up correctly, we should now be capable to use this IWeatherService at bottom the razor pages! And instead of interacting directly with IHttpClientFactory or injected HttpClient instances, we put through a good-typed service class.

forecasts = look WeatherService.Convey();

Hopefully this demonstrates a useful pattern for injecting well typewritten services that interact with API endpoints via the intragroup HttpClient classes while hiding the inside information of those interactions. We amend battlefront-goal development by simplifying their API patc centralizing the initialisation and configuration code.

And as always, the code is available gratis on github at https://github.com/jsedlak/samples.injectedservices

Blazor Server Where Does Httpclientfactory Cliend or Server Side

Source: https://johnsedlak.com/2020/11/method-for-dependency-injected-httpclient-service-access/

Share this post