Potential issue with offline mutation queue / is online logic

[octodhruv]

Hi!

I've been testing the offline logic around firing mutations in our app, and it seems like the offline mutation queue isn't firing until we hard close our react-native app - then it fires.

When I come online, the queryRenderer completes queries correctly, but otherwise doesn't seem to fire the expected mutations, until later when we hard close the app.

There may be an issue here with the isOnline detection in the library - or maybe I'm not doing something right!

I hope that is helpful.

versions:

"react-relay": "~7.1.0",
"react-relay-network-modern": "~4.4.0",
"react-relay-offline": "~1.1.0",

[morrys]

hi @octodhruv, can you send me the creation of the environment?
also, did you use the useRestore hook correctly? I recommend you read this issue #33

[octodhruv]

Hi @morrys. Thanks for your reply. Of course, it is below:

const ttl = 1000 * 60 * 60 // 1 hour
const persistOptions: CacheOptions = {
    // disablePersist: true TODO Remove once we've tested how this behaves IRL
}

const persistStoreOptions = { defaultTTL: ttl }

const recordSource = new RecordSource(persistOptions)

class RelayEnvironment {
    environment?: RelayModernEnvironment

    constructor() {
        this.buildEnvironment()
    }

    createEnvironment = () => {
        const store = new Store(recordSource, persistStoreOptions)

        const env = new Environment(
            {
                network,
                store
            },
            {}
        )

        env.setOfflineOptions({
            start: async mutations => {
                //optional
                console.log('start offline', mutations)
                return mutations
            },
            finish: async (mutations, error) => {
                //optional
                console.log('finish offline', error, mutations)
            },
            onExecute: async mutation => {
                //optional
                console.log('onExecute offline', mutation)
                return mutation
            },
            onComplete: async options => {
                //optional
                console.log('onComplete offline', options)
                return true
            },
            onDiscard: async options => {
                //optional
                console.log('onDiscard offline', options)
                return true
            },
            onPublish: async offlinePayload => {
                //optional
                console.log('offlinePayload', offlinePayload)
                return offlinePayload
            }
        })

        return env
    }

    buildEnvironment = () => {
        this.environment = this.createEnvironment()
    }
}

export default new RelayEnvironment()

I'm sure we are using the useRestore hook correctly.

    let fetchPolicy: 'network-only' | 'store-and-network' | 'store-only' = 'network-only'
    const { useStoreThenNetwork, useCacheIfExists } = options
    if (useCacheIfExists) {
        fetchPolicy = 'store-only'
    } else if (useStoreThenNetwork) {
        fetchPolicy = 'store-and-network'
    }

    const isRehydrated = useRestore(relayEnv.environment)
    if (!isRehydrated) {
        return <Null />
    }

I also am not 100% sure what the useRestore hook would have to do with this issue of the offline mutation queue not firing correctly, immediately when we go online, but instead when we refresh the app in the simulator, or hard close and re-open the app. Maybe I am misunderstanding the issue?

Thanks for the help! Please let me know if I can provide anything else

[morrys]

@octodhruv the useRestore hooks in addition to rehydrating the stores, adds the listener on the events of the NetInfo library.

Another useful piece of information is the version of the @react-native-community/netinfo library.

I recommend trying to use the netinfo library and adding another listener and actually checking if the connection is detected.

[octodhruv]

"@react-native-community/[email protected]" is our current version.

Thanks for the recommendation! so you think we can use this library to see that it's firing correctly?

Thanks!

[morrys]

Offline mutation queue execution is performed here: https://github.com/morrys/wora/blob/master/packages/offline-first/src/OfflineFirst.ts#L103

In practice, when a change of connectivity is determined by the NetInfo library and the connection is present, the processing is performed.

[morrys]

Hi @octodhruv, any news?

[morrys]

hi @octodhruv,
I investigated your issue better and found that your problem may be related to the iOS simulator.

react-native-netinfo/react-native-netinfo#7
https://github.com/react-native-community/react-native-netinfo/blob/master/README.md#issues-with-the-ios-simulator

When you can you can confirm that you are using the iOS simulator and that the problem does not persist in android or real device?

[octodhruv]

Hi @morrys

Apologies for my delayed response, and thanks for looking into it! I can confirm that the problem is indeed with the simulator - i saw that issue myself.

Sorry for any problems! We believe our issue may be rooted somewhere else...

[morrys]

Don't worry :)

being a problem of the simulator I close the issue.

for doubts or other problems, open another issue :)