Making Faster API Calls Using Refit Rest Library

In the models' folder, create a Person model with the same properties as those in your Web API project.

public class Person {
    public int Id {
        get;
        set;
    }
    public string FullName {
        get;
        set;
    } = string.Empty;
    public string Email {
        get;
        set;
    } = string.Empty;
    public string City {
        get;
        set;
    } = string.Empty;
    public string Country {
        get;
        set;
    } = string.Empty;
}

Create a service class that will make API calls using Rift. Add the code below in it:

using Refit;
using Refit_UI_App.Models;
namespace Refit_UI_App.Services {
    public interface IPersonApiService {
        [Get("/Persons")]
        Task < List < Person >> GetPersons();
        [Get("/Persons/{id}")]
        Task < Person > GetPerson(int id);
        [Post("/Persons")]
        Task NewPerson([Body] Person guest);
        [Put("/Persons/{id}")]
        Task UpdatePerson(int id, [Body] Person guest);
        [Delete("/Persons/{id}")]
        Task DeletePerson(int id);
    }
}

Rift has its syntax. On every method, the [Get] attribute with the same method name (API name) will be added. This attribute will tell the method to call that API. For example, in the API project we have /Persons API, which will return all Persons. So in [Get("/Persons")], we added it with the same name. Similarly, with all other methods, we provided the same API name to call that API. It is important to use the same name.

Now in your Program.cs file, we have to tell the application to use IPersonApiService to call APIs using Refit. For that, add the following code to your Program.cs file:

builder.Services.AddRefitClient<IPersonApiService>().ConfigureHttpClient(x =>
{
    x.BaseAddress = new Uri("https://localhost:7212/api");
});

Then in your razor page Index.razor, add the following code on top of the page:

@page "/"
@using Refit_UI_App.Models
@using Refit_UI_App.Services
@inject IPersonApiService personsService;

The above code snippet is for the Models and Services folder. Then, we inject the IPersonApiService class that we will be using. After the above code, add the following HTML code:

<PageTitle>Persons</PageTitle>

<h1>Persons!</h1>

Welcome to your new app.
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Location</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in persons)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.FullName</td>
                <td>@item.Email</td>
                <td>@(item.City+", "+item.Country)</td>
                <td>
                    <button class="btn btn-primary" @onclick="@(e => AddPerson(item))">Add Guest</button>
                    <button class="btn btn-warning" @onclick="@(e => UpdatePerson(item))">Update Guest</button>
                    <button class="btn btn-danger" @onclick="@(e => DeletePerson(item))">Delete Guest</button>
                </td>
            </tr>
        }
    </tbody>
</table>

The above code will display records and action buttons. After this, add the following code at the bottom of your Index.razor page, within @code block.

@code {
    List < Person > persons = new List < Person > ();
    protected override async Task OnInitializedAsync() {
        persons = await personsService.GetPersons();
        if (persons == null) {
            persons = new List < Person > ();
        }
    }
    private async Task AddPerson(Person person) {
        await personsService.NewPerson(new Person {
            Id = persons.Count + 1,
                FullName = person.FullName,
                City = "Tokyo",
                Country = "Japan",
                Email = person.Email
        });
        persons = await personsService.GetPersons();
    }
    private async Task UpdatePerson(Person person) {
        person.FullName = "Batista";
        await personsService.UpdatePerson(person.Id, person);
        persons = await personsService.GetPersons();
    }
    private async Task DeletePerson(Person guest) {
        await personsService.DeletePerson(guest.Id);
        persons = await personsService.GetPersons();
    }
}

Run both projects at the same time. This is done because the Frontend project will call the API project to get/post data. API project also must be running. After the successful running of both projects, the browser will look like the following:

We call methods from IPersonApiService class, which is calling APIs using Refit and sending us a response that is displayed on the page. Add, Update and Delete buttons also use APIs to perform specific operations.

The source code is more than 25MB and cannot be uploaded with this article. If you want to get code download it from GitHub.

Thank you.