Aws-mobile-appsync-sdk-js: reduxPersist:appsync localstorage size unbounded, eventually crashes JS app

[ack210]

I am using the JavaScript AWS AppSync client to perform three basic operations: Get a document, Put a document, and List recent documents. The payloads of all of these operations are relatively small (~2kb for the Get/Put and ~8kb for the list), however the PUT request especially is made frequently. I am using "cache-and-network' fetch policy as indicated in the AppSync docs for offline mode support, and have disableOffline set to false in my appsync client config.

The AppSync client seems to be working fine both when online and offline, however the issue I am running into is with the 'reduxPersist:appsync' localstorage item. This seems to be persisting every single request made with the appsync client and the full response. More problematically, it doesn't seem to ever be removing old items. As more and more of these requests are persisted, my app starts freezing up every time a request is made using the AppSync client. Using Chrome profiler reports that "Timer Fired" in createPersistor.js:54 is taking 126ms to run. I am not surprised given the size that this value gets to be. In fact, just trying to view the value in developer console causes the browser to freeze up for 10 seconds or so.

Eventually the localstorage fills up and my entire app crashes because it relies on being able to write/read from localstorage. A temporary workaround to avoid this issue is to simply set disableOffline to true, however I really would like to support offline mode.

Is there something I'm not doing right that's causing the reduxPersist value to grow so large? Is there some way to specify a max size or safely expire the values myself?

[jessedoyle]

I'd like to chime in and mention that we're encountering this issue as well. Some of our mutations require many parameters/variables. These all get written to the reduxPersist:appsync item as the mutation is enqueued.

Is there any way to set a limit on the cache size?

[elorzafe]

For reseting cache I did something like this:

Using withApollo from react-apollo on my Component (to get the client from the props, I reset the cache (that clean first and refetch queries for my component) like this.

resetCache = async () => {
    const { client } = this.props;
    client.resetStore();
}

[jessedoyle]

@elorzafe - Thanks for the suggestion! Does this also work for the HOC syntax (i.e. via compose)?

It seems awkward that this would have to be managed manually. What would be preventing setting an upper bound limit and having the client manage the size of the cache?

Edit: Sorry, I missed your mention of withApollo - I'd imagine that's required.

[elorzafe]

Correct you need withApollo so you can get the client from this.props

[elorzafe]

I will mark this as a feature request, thanks for your feedback!

[elorzafe]

@ack210 On the latest release (1.4.0) we added custom storage engine I will close the issue now, but feel free to create a new one in case that doesn't work for you.