Offline mutations and the online manager

[timsun28]

Hi,

I'm building an application where it's important that users can save certain queries for offline usage, run mutations and then sync back online all the changes when they see fit.

My current implementation includes Tanstack query with a persister, so the mutations can be saved as well.
My use case has todo lists where the user needs to be able to click on a toggle that will put the entire page in an offline state. This means that it will not fetch new data and any mutations done on the page will not be sent. So, even if the user has an active internet connection, it should not run the queries and mutations.

When the user is ready to "save", they will have to click on a sync button that will resume all the mutations and refetch the queries from that page.

I'm currently setting the offline state in the URL, that updates the onlineManager to be in the same state in the user facing component.

I'm facing two issues where my queries and mutations still get resumed when the user leaves that page and they are still online. So my question would be, is there a way to manually mark the mutation to be paused/disabled, until they can be manually triggered?

My second issue that I'm facing is that when I'm testing this using the offline toggle in chrome - application - service worker tab, whenever I toggle the offline checkbox back online, the onlineManager goes online for a moment and some of the mutations get unpaused. Would there also be a possibility to prevent this from happening? I found the onlineManager.setEventListener in the documentation, but I am not sure if this is a good way to approach this issue.

If it is helpful to create a small demo project for this use case, I would be happy to.

I am looking forward to hearing how you would handle this!

Timo

[TkDodo]

So my question would be, is there a way to manually mark the mutation to be paused/disabled, until they can be manually triggered?

no, pausing is tied to the onlineManager. You need to keep it’s online value to false if you want to pause a query / mutation.

the onlineManager goes online for a moment and some of the mutations get unpaused

use onlineManager.setOnline(false) to get it into offline state. And yes, you would also need your own event listener to avoid it going back online when the normal event happens (the event handler basically calls setOnline under the hood).