Offline Support

[PrinzJuliano]

Hi,

I am evaluating this library for a future project. I am a fan of React Query in general.
However, one of the key requirements is offline support.
I cannot get the example provided on https://tanstack.com/query/latest/docs/react/examples/react/offline to work in Angular.
Some types are mismatched, and I am required to install react.

Has anyone tried to get offline support to work?
Additionally, is it documented in any way, how to get it to work?

[stevebrowndotco]

You can use dexieJs for this, you can have the query return a conditional response based on the network state

[PrinzJuliano]

Thanks,
I know I can use all kind of different ways to introduce offline support to this library or to HTTP requests in general.
However, the Libraries (@ngneat/query) README states that offline support was implemented.

[stevebrowndotco]

Hey @PrinzJuliano Having recently attempted to do what I said in my first comment (put a dexieJs wrapper in my query function call), I agree with you. I have also scoured for ways of using offline out of the box with this library and don't have any success yet. Perhaps @NetanelBasal could you provide some advice please?

[PrinzJuliano]

My current solution is to not use this library and use angular Http Client together with ngneat/cashew for caching and a centralized caching / structured updating solution built and refined over many projects on top.

I would prefer to use this library instead, since it does all that automatically in a much better way.

[stevebrowndotco]

Just had a glance at that library, if it is a wrapper around http client, can you put the http calls inside useQuery and take advantage of cashew's caching?

[PrinzJuliano]

Does that update all subscribers to the query when the cache / Bucket is emptied / invalidated?

[luii]

Thanks, I know I can use all kind of different ways to introduce offline support to this library or to HTTP requests in general. However, the Libraries (@ngneat/query) README states that offline support was implemented.

@PrinzJuliano First of all tanstack/query (or @ngneat/query which is only a angular wrapper for it) doesnt "really" care about the status of your network, primarily it is a server-state manager, TkDodo clarified this in this post on what the Online/Offline Mode/Capabilities mean for the library: Clarify online support

The Offline Example from Tanstack uses msw which is a mock service worker, it only gives you the freedom to define some endpoints which most of the time return static data, this should only be used if you want to test things.

For angular though, i believe, you would need to setup the PWA Service Worker which caches your endpoints/data for the offline support.

If you still want to persist your data returned by either the cache or the real endpoint you'd have to use a lib like dexiejs or idb-keyval and create your own persister on top of it.

[PrinzJuliano]

Thanks for outlining this. With the example provided thanks to @stevebrowndotco in

I can confirm that using persistQueryClient and persistQueryClientRestore from @tanstack/query-persist-client-core following from this example allows me to use offline support in the application.

I will try to utilize the tanstack persist query client.

[stevebrowndotco]

I can confirm that using persistQueryClient and persistQueryClientRestore from @tanstack/query-persist-client-core following from this example allows me to use offline support in the application.