What type of IHttpClientFactory approach should I use to add HttpClient to Server Side Blazor?

Question

I was making a Blazor Make a CRUD app with Blazor and Entity Framework Core but I got the below error message:

Error Message

Below is the code in my Razor component:

@page "/people"
@inject HttpClient http

<h3>People</h3>

@if (people == null)
{<text>Loading...</text>}
else if (people.Length == 0)
{ <text>No people have been added to this database.</text>}
else
{
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone Number</th>
            <th>Email ID</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var person in people)
        {
            <tr>
                <td><a>Edit</a><button>Delete</button></td>
                <td>@person.ID</td>
                <td>@person.Title</td>
                <td>@person.FirstName</td>
                <td>@person.LastName</td>
                <td>@person.PhoneNumber</td>
                <td>@person.Email</td>
                <td>@person.Address</td>

            </tr>
        }
    </tbody>
</table>
}

@code {
    Person[] people { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await LoadPeople();
    }

    async Task LoadPeople() => people = await http.GetFromJsonAsync<Person[]>("api/people");
}

And Below is the code in Startup.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using CuriousDriveTutorial.Data;
using Microsoft.Extensions.Options;
using Microsoft.EntityFrameworkCore;

namespace CuriousDriveTutorial
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<ApplicationDBContext>(Options => Options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
            //services.AddHttpClient();
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }
}

I tried adding services.AddHttpClient(); but it did not make a difference so I removed it.

I read that I need to Make HTTP an requests using IHttpClientFactory for Server Side Blazor, so I found the below link:

https://learn.microsoft.com/en-us/aspnet/core/fundamentals/http-requests?view=aspnetcore-3.1#basic-usage

However, I am not sure weather I am supposed to use the approach for Basic Usage, Named Clients, Typed Clients or Generated Clients. So which is the best approach for this type of project?

Thanks in advance.

PS: I am new to backend.

Answer 1

You are missing service configuration. Just add it to your Startup class

public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddHttpClient();
    }