C
C#2mo ago
Usman

Mutation IsLoading remains true in (Phetch library)

// Api.cs

public class Api
{
public Api()
{
LoginUserEndpoint = new Endpoint<Login.LoginFormModel, dynamic>(LoginUser, defaultOptions);
}

public Endpoint<Login.LoginFormModel, dynamic> LoginUserEndpoint { get; }

private async Task<dynamic> LoginUser(Login.LoginFormModel loginFormModel, CancellationToken cancellationToken)
{
var apiPath = $"{ApiBaseUrl}/{ApiEndpoint.Login.GetEnumMemberValue()}";
var response = await _httpClient.PostAsJsonAsync(apiPath, loginFormModel, cancellationToken);
if (response is null) throw new JsonException("API response was null");
return response;
}
}

// Login.razor
@code {

public readonly LoginFormModel LoginForm = new("", "");

private Query<LoginFormModel, dynamic>? _loginUserMutation;

protected override void OnInitialized()
{
_loginUserMutation = Api.LoginUserEndpoint.Use();
}

public class LoginFormModel(string username, string password)
{
[Required(ErrorMessage = "Username is required")]
public string Username { get; set; } = username;

[Required(ErrorMessage = "Password is required")]
public string Password { get; set; } = password;
}

private void HandleSubmit()
{
if (_loginUserMutation is null) return;
_loginUserMutation.Trigger(LoginForm);
Console.WriteLine(JsonConvert.SerializeObject(_loginUserMutation.Data, Formatting.Indented));
}

}

<button type="submit" disabled="@_loginUserMutation.IsLoading" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
@(_loginUserMutation.IsLoading ? "Logging in..." : "Log in")
</button>
// Api.cs

public class Api
{
public Api()
{
LoginUserEndpoint = new Endpoint<Login.LoginFormModel, dynamic>(LoginUser, defaultOptions);
}

public Endpoint<Login.LoginFormModel, dynamic> LoginUserEndpoint { get; }

private async Task<dynamic> LoginUser(Login.LoginFormModel loginFormModel, CancellationToken cancellationToken)
{
var apiPath = $"{ApiBaseUrl}/{ApiEndpoint.Login.GetEnumMemberValue()}";
var response = await _httpClient.PostAsJsonAsync(apiPath, loginFormModel, cancellationToken);
if (response is null) throw new JsonException("API response was null");
return response;
}
}

// Login.razor
@code {

public readonly LoginFormModel LoginForm = new("", "");

private Query<LoginFormModel, dynamic>? _loginUserMutation;

protected override void OnInitialized()
{
_loginUserMutation = Api.LoginUserEndpoint.Use();
}

public class LoginFormModel(string username, string password)
{
[Required(ErrorMessage = "Username is required")]
public string Username { get; set; } = username;

[Required(ErrorMessage = "Password is required")]
public string Password { get; set; } = password;
}

private void HandleSubmit()
{
if (_loginUserMutation is null) return;
_loginUserMutation.Trigger(LoginForm);
Console.WriteLine(JsonConvert.SerializeObject(_loginUserMutation.Data, Formatting.Indented));
}

}

<button type="submit" disabled="@_loginUserMutation.IsLoading" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
@(_loginUserMutation.IsLoading ? "Logging in..." : "Log in")
</button>
1 Reply
Usman
Usman2mo ago
I am using this library called Phetch with Blazor Server - https://github.com/Jcparkyn/phetch/ Above is my code. The API request is sent properly, I recieve reponse. But for some reason, IsLoading remains true after triggering