How to achieve caching with Blazor-State ?

[kanachrisi]

Hello,
I am trying to implement caching on the front-end of my application and i am using Blazor-State libray.
But each time i run the application for manging customers it send an api request to get the customers store them in the state.
My need is to use use api for the first time and then state for subsquent times when nothing has changed in back-end server.

How can i accomplish caching with Blazor-State library ?

Thank you for the feedback.

[StevenTCramer]

You likely have an ActionHandler that does the Fetch. If you only want to fetch them once you could check if the list is empty and if so send the request to the server. If populated don't.

But the question is how do you know when to invalidate your cache? Unless the server is pushing events to the client somehow (signalR maybe?)

[sokrethchhem]

Hi,
What is the reason that ActionHandler return only Unit. I would like to return a TResponse so I can Implement a CacheBehaviour. It is achievable?

Thanks

[StevenTCramer]

It returns only Unit because in the client handler you are updating your state. There is nothing to send the response to.

Example: If the User clicks the "Increment" button it sends the IncrementAction. The handler updates the state which then tells the UI to render modified controls. There is no place to return a "response" to. The components are notified they need to re-render (go get the info they need from state)

Or I read this thread again. You want to cache your server side fetch.

You may have defined CustomerState that stores the result of your API call and this is what want to cache. You could add a timestamp to this state that indicates when the last fetch was performed.

In your Handler that calls the API you could look at the CustomerState.LastFetch and only fetch if last fetch was greater than X amount of time.

The key to caching is how do you invalidate your cache.
If you just want to rate limit the client or debounce a little you could use time only and set to some low number.

But if you want to only fetch when something changes on the server side then you have to implement some subscription mechanism on the server and that tells the client when its cache has been invalidated.

[sokrethchhem]

Steven, thanks for your answer. When come to store your're right and it make senses that it shoud not return anything.

And when come time to fetching server side data and caching the info. I was trying to find a generic solution that will be part of a behavior pipeline, not specific to a State (I try to remove the reponsability from developpers to manipulate caching). Like

public class CachingBehaviour<TRequest, TResponse> : IPipelineBehavior<TRequest, TResponse>
        where TRequest : IRequest<TResponse>
    {
        ...
        public async Task<TResponse> Handle(TRequest request,
            RequestHandlerDelegate<TResponse> next,
            CancellationToken cancellationToken)
        {
            if (request is ICacheableMediatrQuery cacheableQuery)
            {
                 IDistributedCache distributeCache = new MemoryDistributedCache(opts);
                 //logic to invalidate and caching data
            }
        }
    }

I try to inject a Mediator and dispatch a Request from a State so it can goes throught all behaviors that I need to configure but it never reach the request Handler in the Front-end. Can we registed IRequestHandler in addition to all IActions within the Dependency Injection in Blazor-State?

public partial class FaqRequest
{
    public record GetList() : IRequest<List<FaqDto>>, ICacheableMediatrQuery;

    public class GetListHandler: IRequestHandler<GetList, List<FaqDto>>
    {
        private readonly IFaqRepository _faqRepository;
        private readonly IMapper _mapper;

        public GetListHandler(IFaqRepository faqRepository, IMapper mapper)
        {
            _faqRepository = faqRepository;
            _mapper = mapper;
        }
        public async Task<List<FaqDto>> Handle(GetList request, CancellationToken cancellationToken)
        {
            var faqs = await _httpRequest.GetListAsync(false, cancellationToken);
            return _mapper.Map<List<FaqDto>>(faqs);
        }
    }
     
}