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

&lt;PageTitle&gt;Search Bar Example&lt;/PageTitle&gt;

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

        @if(Suggestions.IsFetching)
        {
            &lt;div&gt;
                Loading...
            &lt;/div&gt;
        }
    &lt;/div&gt;

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

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

    IQueryState&lt;List&lt;string&gt;&gt; Suggestions =&gt; UseQuery(
        key: ("search", SearchTerm),
        handler: async static ctx =&gt;
        {
            var res = await SearchService.SearchAsync(ctx.Key.SearchTerm);
            return QueryResult.Success(res);
        },
        options =&gt; options
            .ConfigureFetch(fetch =&gt; 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.

why react developers are leaving next.js for tanstack

I'm making Tanstack Query for blazor: RevalQuery