Amplify-js: how to disable Storage files cache

[Zilvinaskli]

I have an app where JSON for graphs is stored as separate files in an s3 bucket.
If I save a file and go back to my chart it loads an older version for a while.

This problem only started to appear after I updated my aws amplify version that was already 2 years old and I also added converting from blob to JSON because it started to come back as blob instead of json.

So is there some sort of default caching enabled on s3 or is there a way my browser somehow caches s3 data file and is there a way to force getting the most recent version?

update

Currently, to avoid this issue, when the files are being saved I save them as new files with new filenames and I delete the old ones and update the references in the DB

[Zilvinaskli]

I found out that there are two similar open and unresolved issues (#6693 and #6413 ) can we expect any news about the solution?

[wei]

I tried to reproduce in both

• React: https://github.com/wei/amplify-js-6693-react
• React Native iOS: https://github.com/wei/amplify-js-6693-reactnative

and they both worked just fine. Could you pull down my project and check on your end? or provide a minimal reproducible example like the ones I have with latest cli and npm package versions? Thank you!

UPDATE: I can reproduce.

[Zilvinaskli]

I'm not even using a react just standard javascript library and my app is in Vue. I'll try to create a reproducible repository it might be related to larger filers or something different.

[wei]

Thank you, I really appreciate it. I can work on identifying the issue and finding a fix once it can be reproduced with your help.

[harrysolovay]

You can specify a custom Cache-Control header by including it under the key cacheControl on the config (optional) that you supply to Storage.get.

Supplying "no-cache", for instance, will ensure that it's always re-validated.

[wei]

By default, the HTTP Headers returned by S3 looks something like follows:

HTTP/1.1 200 OK
Content-Type: application/json
Access-Control-Allow-Origin: *
Last-Modified: Wed, 18 Nov 2020 16:53:16 GMT
Access-Control-Allow-Methods: GET, HEAD, PUT, POST, DELETE
Access-Control-Expose-Headers: x-amz-server-side-encryption, x-amz-request-id, x-amz-id-2, ETag
Date: Wed, 18 Nov 2020 17:49:49 GMT
Content-Length: 14
Accept-Ranges: bytes
ETag: "XXXXXXXX"
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-id-2: XXXXXXXXxX
Server: AmazonS3
x-amz-request-id: XXXXXXXXXX

Note there is no Cache-Control or Expires headers. When those headers are missing AND Last-Modified header is present, browsers calculates what's called Heuristic freshness and sets its own ttl in cache. e.g. Firefox docs

This results in subsequent requests getting cached by default as seen:

As @harrysolovay mentioned in https://github.com/aws-amplify/amplify-js/issues/7095#issuecomment-728355794 Doing something like

Storage.get(filename, { download: true, cacheControl: 'no-cache' })

will get S3 to return the appropriate Cache-Control headers which eliminates this issue.