Blazor concurrency problem using Entity Framework Core

Question

My goal

I want to create a new IdentityUser and show all the users already created through the same Blazor page. This page has:

1. a form

Answer 1

@Leonardo Lurci Had covered conceptually. If you guys are not yet wanting to move to .NET 5.0 preview, i would recommend looking at Nuget package 'EFCore.DbContextFactory', documentation is pretty neat. Essential it emulates AddDbContextFactory. Ofcourse, it creates a context per component.

Answer 2

I found your question looking for answers about the same error message you had.

My concurrency issue appears to have been due to a change that triggered a re-rendering of the visual tree to occur at the same time as (or due to the fact that) I was trying to call DbContext.SaveChangesAsync().

I solved this by overriding my component's ShouldRender() method like this:

    protected override bool ShouldRender()
    {
        if (_updatingDb)
        { 
            return false; 
        }
        else
        {
            return base.ShouldRender();
        }
    }

I then wrapped my SaveChangesAsync() call in code that set a private bool field _updatingDb appropriately:

        try
        {
            _updatingDb = true;
            await DbContext.SaveChangesAsync();
        }
        finally
        {
            _updatingDb = false;
            StateHasChanged();
        }

The call to StateHasChanged() may or may not be necessary, but I've included it just in case.

This fixed my issue, which was related to selectively rendering a bound input tag or just text depending on if the data field was being edited. Other readers may find that their concurrency issue is also related to something triggering a re-render. If so, this technique may be helpful.

Answer 3

Perhaps not the best approach but rewriting async method as non-async fixes the problem:

public void Add()
{
  Task.Run(async () => 
      await UserManager.CreateAsync(new IdentityUser { UserName = $"test_{Guid.NewGuid().ToString()}" }))
      .Wait();                                   
}

It ensures that UI is updated only after the new user is created.

---

The whole code for Index.razor

@page "/"
@inherits OwningComponentBase<UserManager<IdentityUser>>
<h1>Hello, world!</h1>

number of users: @Users.Count()
<button @onclick="@Add">click me. I work if you use Sqlite</button>

<ul>
@foreach(var user in Users.ToList()) 
{
    <li>@user.UserName</li>
}
</ul>

@code {
    IQueryable<IdentityUser> Users;

    protected override void OnInitialized()
    {
        Users = Service.Users;
    }

    public void Add()
    {
        Task.Run(async () => await Service.CreateAsync(new IdentityUser { UserName = $"test_{Guid.NewGuid().ToString()}" })).Wait();            
    }
}

Answer 4

UPDATE (08/19/2020)

Here you can find the documentation about how to use Blazor and EFCore together

UPDATE (07/22/2020)

EFCore team introduces DbContextFactory inside Entity Framework Core .NET 5 Preview 7

[...] This decoupling is very useful for Blazor applications, where using IDbContextFactory is recommended, but may also be useful in other scenarios.

If you are interested you can read more at Announcing Entity Framework Core EF Core 5.0 Preview 7

UPDATE (07/06/2020)

Microsoft released a new interesting video about Blazor (both models) and Entity Framework Core. Please take a look at 19:20, they are talking about how to manage concurrency problem with EFCore

---

General solution

I asked Daniel Roth BlazorDeskShow - 2:24:20 about this problem and it seems to be a Blazor Server-Side problem by design. DbContext default lifetime is set to Scoped. So if you have at least two components in the same page which are trying to execute an async query then we will encounter the exception:

InvalidOperationException: A second operation started on this context before a previous operation completed. Any instance members are not guaranteed to be thread-safe.

There are two workaround about this problem:

• (A) set DbContext's lifetime to Transient

services.AddDbContext<ApplicationDbContext>(opt =>
    opt.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")), ServiceLifetime.Transient);

• (B) as Carl Franklin suggested (after my question): create a singleton service with a static method which returns a new instance of DbContext.

anyway, each solution works because they create a new instance of DbContext.

About my problem

My problem wasn't strictly related to DbContext but with UserManager<TUser> which has a Scoped lifetime. Set DbContext's lifetime to Transient didn't solve my problem because ASP.NET Core creates a new instance of UserManager<TUser> when I open the session for the first time and it lives until I don't close it. This UserManager<TUser> is inside two components on the same page. Then we have the same problem described before:

• two components that own the same UserManager<TUser> instance which contains a transient DbContext.

Currently, I solved this problem with another workaround:

• I don't use UserManager<TUser> directly instead, I create a new instance of it through IServiceProvider and then it works. I am still looking for a method to change the UserManager's lifetime instead of using IServiceProvider.

tips: pay attention to services' lifetime

This is what I learned. I don't know if it is all correct or not.

Answer 5

Well, I have a quite similar scenario with this, and I 'solve' mine is to move everything from OnInitializedAsync() to

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        //Your code in OnInitializedAsync()
        StateHasChanged();
    }
{

It seems solved, but I had no idea to find out the proves. I guess just skip from the initialization to let the component success build, then we can go further.

/******************************Update********************************/

I'm still facing the problem, seems I'm giving a wrong solution to go. When I checked with this Blazor A second operation started on this context before a previous operation completed I got my problem clear. Cause I'm actually dealing with a lot of components initialization with dbContext operations. According to @dani_herrera mention that if you have more than 1 component execute Init at a time, probably the problem appears. As I took his advise to change my dbContext Service to Transient, and I get away from the problem.

Answer 6

I downloaded your sample and was able to reproduce your problem. The problem is caused because Blazor will re-render the component as soon as you await in code called from EventCallback (i.e. your Add method).

public async Task Add()
{
    await UserManager.CreateAsync(new IdentityUser { UserName = $"test_{Guid.NewGuid().ToString()}" });
}

If you add a System.Diagnostics.WriteLine to the start of Add and to the end of Add, and then also add one at the top of your Razor page and one at the bottom, you will see the following output when you click your button.

//First render
Start: BuildRenderTree
End: BuildRenderTree

//Button clicked
Start: Add
(This is where the `await` occurs`)
Start: BuildRenderTree
Exception thrown

You can prevent this mid-method rerender like so....

protected override bool ShouldRender() => MayRender;

public async Task Add()
{
    MayRender = false;
    try
    {
        await UserManager.CreateAsync(new IdentityUser { UserName = $"test_{Guid.NewGuid().ToString()}" });
    }
    finally
    {
        MayRender = true;
    }
}

This will prevent re-rendering whilst your method is running. Note that if you define Users as IdentityUser[] Users you will not see this problem because the array is not set until after the await has completed and is not lazy evaluated, so you don't get this reentrancy problem.

I believe you want to use IQueryable<T> because you need to pass it to 3rd party components. The problem is, different components can be rendered on different threads, so if you pass IQueryable<T> to other components then

1. They might render on different threads and cause the same problem.
2. They most likely will have an await in the code that consumes the IQueryable<T> and you'll have the same problem again.

Ideally, what you need is for the 3rd party component to have an event that asks you for data, giving you some kind of query definition (page number etc). I know Telerik Grid does this, as do others.

That way you can do the following

1. Acquire a lock
2. Run the query with the filter applied
3. Release the lock
4. Pass the results to the component

You cannot use lock() in async code, so you'd need to use something like SpinLock to lock a resource.

private SpinLock Lock = new SpinLock();

private async Task<WhatTelerikNeeds> ReadData(SomeFilterFromTelerik filter)
{
  bool gotLock = false;
  while (!gotLock) Lock.Enter(ref gotLock);
  try
  {
    IUserIdentity result = await ApplyFilter(MyDbContext.Users, filter).ToArrayAsync().ConfigureAwait(false);
    return new WhatTelerikNeeds(result);
  }
  finally
  {
    Lock.Exit();
  }
}