Handling more granular variants of fetch states with AsyncData or similar

[momentiris]

Hello!

I have a question rather than an issue. Hopefully not in the wrong forum, if so do tell and I will correct.

Library looks awesome. I've just recently been experimenting with something similar to AsyncData with its property .match(...) but I've been using ts-pattern for this instead.

My case is that I want to 'patch' the query result from a basic react-query/useQuery. This result and the patching does however lead me into another possible state, Refreshing<TData>.

My question is if there are any examples of how to model this with this library, or if someone could point me in the right direction.

Thanks!

[bloodyowl]

hi!

for that case I'd recommend to use two AsyncData instances:

type ReloadableAsyncData<T> = {
  data: AsyncData<T>;
  nextData: AsyncData<T>;
}

In data you can keep the last committed update, and in nextData the current update:

// initial state
{data: AsyncData.NotAsked(), nextData: AsyncData.NotAsked()}
// first load
{data: AsyncData.Loading(), nextData: AsyncData.NotAsked()}
// first data received
{data: AsyncData.Done(v1), nextData: AsyncData.NotAsked()}
// reload started
{data: AsyncData.Done(v1), nextData: AsyncData.Loading()}
// reload done
{data: AsyncData.Done(v2), nextData: AsyncData.NotAsked()}

this modeling also works for paginated queries, where you can aggregate in data and keep the last loaded page in nextData (which even allows diffing the newly loaded items)

[momentiris]

Ah, cool. I like this approach! Thanks for the guidance!