Home > OS >  How can I get session data in Blazor Server App in sync mode
How can I get session data in Blazor Server App in sync mode

Time:04-18

I need to read user id and some more data from session which is crucial to get specific data from the server, check permissions and rendering the screen.

I use Blazored.SessionStorage nuget to do that and use the following code line:

curData = await sessionStorage.GetItemAsync<CurrentData>("CurrentData");

At start I set the following line in OnInitializedAsync procedure but since session reading is async, the code proceeds and try loading data when there is no value in curData variable.

Then I tried to move session reading to SetParametersAsync which seems to be a better approach since this is the first procedure in the lifecycle. Same problem here.

So I tried some methods to wait for the await session to end but it did not work and it stuck the code and the code will not continue.

Bottom line I need help to find a way to load session data in SetParametersAsync and wait for it to finish reading before continue the component lifecycle.

Thanks all

CodePudding user response:

At start I set the following line in OnInitializedAsync procedure but since session reading is async, the code proceeds and try loading data when there is no value in curData variable.

That's not the issue... The issue is that in Blazor Server you can't perform any JS interop before your app is rendered.

Use the OnAfterRender{Async} lifecycle methods instead.

Note: The above answer is relevant only if your Blazor Server App has prerendering enabled. However, if prerendering is disabled, you should use OnParametersSetAsync, not OnInitializedAsync

UPDATE:

After previewing your code once again, I believe that the setting of CurentData had been successful, right? Without knowing wether pre-rendering in your app is enabled or not, you may do the following:

This code snippet may be used with pre-rendering disabled:

I believe this is the thing you're looking for...

@if (curData == null)
{
     @* Display here a spinner to indicate that data is being  
        loaded*@
     <p>Loading...</p>
}
else
{
   // put here your code that should be render when CurrentData 
   // is available 
}

@code {
    
  
    private CurrentData curData;

    protected override async Task OnInitializedAsync()
    {
         curData = await sessionStorage.GetItemAsync<CurrentData> 
                                               ("CurrentData");
    }

}

This code snippet may be used with pre-rendering enabled:

@if (isConnected)
{
    // put here your code that should be render when CurrentData 
    // is available
}
else
{
    <p>Loading...</p>
}

@code {
    
    private bool isConnected;
    private CurrentData curData;

    protected override async Task OnAfterRenderAsync(bool 
                                                   firstRender)
    {
        if (firstRender)
        {
            isConnected = true;
            await LoadStateAsync();
            StateHasChanged();
        }
    }

    private async Task LoadStateAsync()
    {
       curData = await sessionStorage.GetItemAsync<CurrentData> 
                                               ("CurrentData");
    }

}

CodePudding user response:

I need help to find a way to load session data in SetParametersAsync

No, do not use SetParametersAsync() , it is very tricky and time-sensitive. Doing an await there will probbaly derail your normal paramter setting.

since session reading is async, the code proceeds and try loading data when there is no value in curData variable.

When you put the 'loading' in OnInitialziedAsync, after getting curData then that problem is solved.

But your markup section will have to deal with null in the first render though. Keep it simple and use @if(curdata != null) ...

  • Related