Optimistic mutation not working offline

[codazzo]

Hi! I'm fairly new to urql so I apologise in advance if I'm missing something obvious.
I'm trying to use @urql/exchange-graphcache to provide offline functionality for a React Native app.

I set up a client with an offline exchange

offlineExchange({
    storage, // <--- I created this using AsyncStorage
    schema,
    updates: {
        Mutation: {
            createRecommendation: (result, args, cache, info) => {
                // uses cache.updateQuery to update a "RECOMMENDATIONS" query
            },
        },
    },
    optimistic: {
        createRecommendation: (variables, cache, info) => {
            return {
                __typename: 'Recommendation',
                id: String(Math.random()), // we don't know what ID will be assigned by the API so creates a random one
            };
        },
    },
});

My idea would be the following: when the user creates a recommendation, and the device is offline, they are able to proceed to a "recommendation detail" screen where they can see the newly-created recommendation (which would be filled by the custom updater starting from the arguments provided to the mutation).

I have a React component that uses the mutation

const [createRecommendationResult, createRecommendation] = useMutation(CREATE_RECOMMENDATION_MUTATION);

createRecommendation({
    // rec data
}).then(
    ({ error, data }) => {
        // navigate to recommendation details screen
    }
);

The problem I have is that .then() is never called if the connection is unsuccessful (it is called if the connection is successful though). I have verified with some console.logs that both the optimistic mutation function and the custom updater are called.

Looking at the following code my understanding is that the result of the unsuccessful fetch is filtered out (and scheduled for synchronisation when the device gets back online) if the mutation is optimistic

https://github.com/FormidableLabs/urql/blob/a770f18005c395245725e853d36246111591c37f/exchanges/graphcache/src/offlineExchange.ts#L109-L117

What I don't understand is how the result from the optimistic mutation would "pipe through" back to the client's result$ stream and ultimately cause the .then to be called. Am I missing something?

I'm using these packages

"@urql/exchange-graphcache": "^3.1.4",
"@urql/introspection": "^0.1.0",
"urql": "^1.10.1",

[kitten]

So that's expected behaviour (which I suppose we need to highlight more aggressively once we fill out our Offline docs page with more templates and details)

The optimistic mutations aren't guaranteed to resolve when you're in offline mode. Conceptually you can think of what Graphcache does with optimistic updates as a barrier: We never want optimistic updates to pollute real data. That means it's not persisted (and instead re-created on startup), the optimistic results are never written to the permanent (non-optimistic) data, queries will never destroy optimistic results (instead they're paused while optimistic mutations are in-flight), and lastly optimistic results are never returned to you when you're offline.

This is to encourage you to not actively use optimistic results actively in your code. Instead you can assume that an optimistic mutation is executed immediately and should assume that it has succeeded.

This is also to mirror the non-offline behaviour: When you're not offline you won't see the optimistic results for mutations either. So tl;dr the promise in your createRecommendation call either never resolves or only resolves when you go back online eventually.

So what to do? In that case you can rely on any related query updating; Our assumption is that optimistic mutations should only be used for non-critical mutations and not creations, as it's hard to guarantee or know when the actual mutation will go through. In extreme cases of the user closing the app while offline it could even be days later.

I'll check in and see what our recommendation is in that case, but it's a tricky one to rely on offline for.

[codazzo]

Thanks for the prompt reply @kitten!

So what to do? In that case you can rely on any related query updating

I will give this a try.

In extreme cases of the user closing the app while offline it could even be days later.

That's kind of the use case i'm trying to cover. I expect users to be offline for hours at a time and create a number of recommendations.

[waweru-kamau]

@codazzo What solution did you end up with for offline mutations?

[codazzo]

Hi @KamauIan, it's been a while since I dealt with this issue but I think the idea as mentioned in the thread was to use a custom updater and rely on related queries updating. Then you can e.g. fire a side-effect in a useEffect hook (if you use React).

[dohomi]

@kitten does this mean any mutation in offline mode can't succeed? I had the understanding of the documentation if the use of offlineExchange and responsible updates and optimistic the mutation can succeed in offline mode? I always see offline error message and the .then is never been called.

fetchSource.ts:147 POST /v1/graphql net::ERR_INTERNET_DISCONNECTED

Would it be otherwise possible to change the requestPolicy to cache-only every time the device goes offline?

I would love to see an offline-first approach demo repo to get a better understanding how urql works. Thanks for your time