r/tanstack

A little bit of context: I'm a Typescript React Developer that a few months back had the privilege to start learning .NET, and I love it. Aside from doing backend, I started doing a little bit of Blazor, and I liked it, though found curious there's no Asynchronous State Management library like the famous one from the JS ecosystem 'TanstackQuery' (available for the major frameworks/libraries Angular, Vue, React), at least not that I could found.

So, I took as an exercise, and as some way of contributing the community, to try and kind of "port" Tanstack's solution into the framework.

The repo https://github.com/kolostring/RevalQuery and the Nuget Package https://www.nuget.org/packages/RevalQuery.Blazor/

Here a quick example of how can be used both in the markup and the code.

@page "/search-bar-reval-query"
@using CachingDemo.Client.Services
@using RevalQuery.Core
@rendermode InteractiveWebAssembly
@inherits RevalQuery.Blazor.QueryComponentBase

<PageTitle>Search Bar Example</PageTitle>

<div class="search-box">
    <div style="display: flex; gap: 8px;">
        <input ="SearchTerm" :event="oninput" placeholder="Type to search..."/>

        @if(Suggestions.IsFetching)
        {
            <div>
                Loading...
            </div>
        }
    </div>

    @if(Suggestions.Error is not null)
    {
        <p style="color:red">Error: .Error.Message</p>
    }
    else if (Suggestions.Data is not null)
    {
        <ul>
             (var item in Suggestions.Data)
            {
                <li>@item</li>
            }
        </ul>
    }
    else if (!Suggestions.IsFetching)
    {
        <p><em>Nothing to show</em></p>
    }
</div>

@code {
    private string SearchTerm { get; set; } = string.Empty;

    IQueryState<List<string>> Suggestions => UseQuery(
        key: ("search", SearchTerm),
        handler: async static ctx =>
        {
            var res = await SearchService.SearchAsync(ctx.Key.SearchTerm);
            return QueryResult.Success(res);
        },
        options => options
            .ConfigureFetch(fetch => fetch
                .StaleTime(TimeSpan.FromMinutes(5))
            )
    );
}

Main features include:

• Key-based caching.
• Shows stale data while revalidates it, following the pattern SWR and also has configurable data polling, retries (even tho I know HttpClient is configurable, but the library it's not limited only to network request since it works with any asynchronous handler)
• Precalculated state booleans for your components conditional rendering (𝘐𝘴𝘓𝘰𝘢𝘥𝘪𝘯𝘨, 𝘐𝘴𝘍𝘦𝘵𝘤𝘩𝘪𝘯𝘨, 𝘐𝘴𝘌𝘹𝘤𝘦𝘱𝘵𝘪𝘰𝘯, 𝘐𝘴𝘙𝘦𝘴𝘰𝘭𝘷𝘦𝘥)
• Side effects management with query canceling, invalidation and lifecycle callbacks that brings optimistic updates out of the box.
• Memory Leak Protection by promoting stateless handlers via static callbacks.
• Completely headless and compatible with any Components library like MudBlazor.

It's open-source MIT and I would like to get feedback since there's not much people that I know who could genuinely try it and/or contribute code wise.

EDIT: Broken code block due to using '@'.

EDIT2: The library isn't an AI generated solution. There's a lot of effort and learning behind it.