Offline mode in react native app

[loisteg]

Hello everyone. I'm glad to become a small part of the TanStack Query community. Recently, I was assigned the task of writing an application with offline mode support. I started searching for a solution, and TanStack Query seemed like the right fit. I began going through the guides, learning how it works, and writing my own alternative, but I faced several problems that are preventing me from moving forward. I would really appreciate any tips that could help with the project implementation. (All the code is test code, so don’t pay attention to the function names or where they are located.)

The test repository can be found here: https://github.com/loisteg/tanstack-example
I also went through the issues and tried to follow the practice mentioned in this comment: #5847 (comment)

Below, I’ve attached 4 videos that show how the production build works at this point.

A little about the app: I get a list of tasks from the API, and each task has a name and an ID. If a change occurs while offline, I add a field isNotSynced: false to the task to indicate that the task hasn’t been sent to the server and was only changed on the device. All the main actions happen in three files:

1. src\components\PersistQueryProvider.tsx - PersistQueryProvider
2. src\constants\querySettings.ts - queryClient and persister
3. app\(tabs)\index.tsx - layout and actions

Main requirements:

• If we are in the app and the internet is on, all mutations should be sent to the server, followed by invalidation.
• If we are in the app and the internet is off, all mutations should be saved and the local state should be updated. As soon as the internet connection is restored, all mutations should be sent to the server. Ideally, this should trigger invalidation for the entire app.
• If something is changed in the app while offline and we exit the app, we expect that if the user gets internet access while the app is inactive, then upon re-entering the app, all mutations will be sent to the server.
• If something is changed in the app while offline and we exit the app and then re-enter it (still offline), we expect that once the user gets internet access, all mutations will be sent to the server and all queries will be updated.

Current progress:

1. Below, I will share all 4 test cases. Based on my testing so far, the following works correctly:
   a) Turn off the internet, make changes offline, and then turn the internet back on (this works only the first time; further issues arise as described in point 2).
   b) Turn off the internet, make changes offline, exit the app, turn on the internet, and re-enter the app. In this case, the mutations are sent.

2. My observation is that if you change the onlineManager status manually a few times like this:

   <Button title={'CHANGE ONLINE'} style={{backgroundColor: 'black'}} onPress={() => {
       onlineManager.setOnline(status);
       status = !status;
   }}/>

   or if you make a few mutations offline while in the app, turn the internet on to let everything sync, and then turn it off again, make a few more mutations, and turn the internet back on, the mutations start behaving incorrectly: they either go in the wrong order or not all of them are sent.

   Build command: eas build -p android --profile preview

   Video examples:

3. Change task offline using "Change online" button
   https://github.com/user-attachments/assets/3581b02e-144e-4b91-a3c4-22e1a83306a0

4. Change task offline without internet connection
   https://github.com/user-attachments/assets/9ca2c096-64f8-4047-9c9a-2a2e95952099

5. Offilne change, restart app with internet connection
   https://github.com/user-attachments/assets/665b6add-54aa-416d-9b0d-ac49fa0b9e62

6. Offilne change, restart app without internet connection
   https://github.com/user-attachments/assets/369f08f8-5451-45e6-b45d-6fe6187912ab

So, what do we have? Out of the main requirements, points 1 and 3 are working stably. Point 2 works inconsistently, and point 4 doesn’t work at all.

And an additional question, do onlineManager and focusManager force mutations? If they were in a falsy state and then one or both changed to true.

I would appreciate any help!

P.S.: If you want to test it on your own device and encounter an error, it’s likely that the token has expired. I will be updating it as long as this discussion continues.

[AdolfTuring]

Same question

[furzich2015]

up, same question

[loisteg]

@TkDodo Hi, i don't wanna disturb you and, firstly, want to thank you for your time, but maybe someone from development team has any ideas?

[TkDodo]

Sorry for the late reply. The reproduction is far from minimal, but what I’m seeing is that retries aren’t turned on for mutations. If a mutation starts and you are offline, it will be paused immediately. However, if you are online, run a mutation, and go offline while it runs, you need at least retry:1 to make it go into paused state. Otherwise, it will go into error state immediately, and only paused mutations can be resumed. Retries default to 0 for mutations, so you need to opt-in to this, which the example repo does not do. Everything else looks good, judging from the code alone.