You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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
Beta Was this translation helpful? Give feedback.
All reactions