Network Error fallback on cache

Hey guys 👋 ,

There was a previous issue on this topic #1653 but there wasn’t a resolution and it was autoclosed.

What I am wondering is how you can fallback on the cache when an apollo query fails due to a network error. Specifically I am working in the mobile realm where connections can be much more flakey and I am finding that if a user goes offline temporarily, I want to fallback on cached data. As far as I can tell the only option I have is to check data.error for a networkError and if so query my own cache and return that data to the children of my query component.

While this is possible, I am wondering if this is the best solution?

[audiolion]

Hey @mbaranovski, that is what I am currently doing, but it doesn’t work as expected. This is due to an issue documented in react-apollo, when the server is unreachable or if the user is offline, apollo throws an unhandled exception that is not part of networkError, it is just a message in data.error that says something like “Network error: Network request failed.” . This error needs to be caught on every query/mutation component written, you can write a HOC query/mutation that does it, but it is still annoying, my code ended up looking like this:

        if (data.error.message.includes('Network error')) {
          try {
            let cache = data.client.readQuery({ query, variables: props.variables || null });
            return children({ ...data, data: cache });
          } catch (err) {
            return null;
          }
        }

Because of how cache-and-network policy works, if the network request fails, I can’t just escape hatch out (like throw the error and have it be caught by apollo and fallback on the cache), I have to manually catch the error myself, and manually query the store, and catch any errors from reading from the store and return some other UI if that fails.

Essentially, cache request will succeed, if network request then fails in the cache-and-network policy, it crashes from the unhandled exception, if I return something different in the error event it overwrites the render from the cache response, so I am reading the cache on error and returning it if available.

[wzup]

@mbaranovski

How about doing it the opposite way? First display result from a cache and then fetch from network in the background?

How about tell us how we should find where in our code this error is thrown? Line number? file name? Current cryptic error message is absolutely uninformative.