Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using the Refit REST Library With Client-Side Blazor

DZone 's Guide to

Using the Refit REST Library With Client-Side Blazor

Let's see the magic of Refit and Blazor working together.

· Integration Zone ·
Free Resource

refit

Time to see what a good refit can do.

Refit, a REST library for .NET, takes your API interfaces and dynamically generates a service using HttpClient to make the requests. This cuts out a lot of repetitive code and can be used with client-side Blazor. Here's how.

Just starting with .NET and Blazor? Here's ASP.NET Core and Getting Started With Blazor.

Refit

Writing code for external API requests is fairly standard and laborious. Create a request, serialize any data to JSON, send the request, deserialize the response

Refit cuts this out. All you have to do is create an interface and let Refit do the rest. Here is an example from the Refit docs.

Create an interface.

public interface IGitHubApi
{
    [Get("/users/{user}")]
    Task<User> GetUser(string user);
}


Generate an implementation using the RestService and call.

var gitHubApi = RestService.For<IGitHubApi>("https://api.github.com");

var octocat = await gitHubApi.GetUser("octocat");


Done.

Using Refit With Client-Side Blazor

I was happy to discover that it is possible to use Refit with client-side Blazor. The HttpClient looks like the standard class used in .NET for HTTP requests and responses but it uses an HttpMessageHandler called WebAssemblyHttpMessageHandler.

All network traffic must go through the browser using the JavaScript fetch API. This handler passes the HTTP request from C# to JavaScript.

You can continue to use HttpClientFactory and create your own typed clients as long as you use the WebAssemblyHttpMessageHandler. To use Refit, I am using the Refit.HttpClientFactory NuGet package. In Startup I can then do this (more info in the docs)

public void ConfigureServices(IServiceCollection services)
{
    services.AddTransient<WebAssemblyHttpMessageHandler>();

    services.AddRefitClient<IBaconService>().ConfigureHttpClient(c =>
            {
                c.BaseAddress = new Uri("https://iambacon.co.uk/api");
            })
            .ConfigurePrimaryHttpMessageHandler<WebAssemblyHttpMessageHandler>();
}


And now Refit in Blazor works!

Summary

As I begin to use Blazor, I am starting to see that it is quite flexible. This is an example of how the HttpClient is still very configurable and that things like HttpClientFactory, Refit, and Polly can still be used even though the requests and responses are going through the Fetch API in the browser.

Further Reading

Blazor Form Validation

ASP.NET Core: CRUD Using Blazor and Entity Framework Core

Topics:
integration ,refit ,rest library ,asp.net ,api interface ,api requests ,blazor ,httpclient ,tutorial ,fetch api

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}