Cache.clear() doesn't work

[lwang-79]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Cache

Amplify Version

v6

Amplify Categories

Not applicable

Backend

None

Environment information

# Put output below this line
  System:
    OS: macOS 14.6.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 77.84 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: 7.26.3 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.120
    Safari: 17.6
  npmPackages:
    %name%:  0.1.0 
    @aws-amplify/backend: ^1.2.1 => 1.2.1 
    @aws-amplify/backend-cli: ^1.2.5 => 1.2.5 
    @testing-library/jest-dom: ^5.17.0 => 5.17.0 
    @testing-library/react: ^13.4.0 => 13.4.0 
    @testing-library/user-event: ^13.5.0 => 13.5.0 
    @types/jest: ^27.5.2 => 27.5.2 
    @types/node: ^16.18.108 => 16.18.108 (20.16.5)
    @types/react: ^18.3.5 => 18.3.5 
    @types/react-dom: ^18.3.0 => 18.3.0 
    aws-amplify: ^6.6.0 => 6.6.0 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    aws-cdk: ^2.156.0 => 2.156.0 
    aws-cdk-lib: ^2.156.0 => 2.156.0 
    constructs: ^10.3.0 => 10.3.0 
    esbuild: ^0.23.1 => 0.23.1 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    react-scripts: 5.0.1 => 5.0.1 
    tsx: ^4.19.0 => 4.19.0 
    typescript: ^5.5.4 => 5.5.4 (4.4.4, 4.9.5)
    web-vitals: ^2.1.4 => 2.1.4 
  npmGlobalPackages:
    @angular/cli: 14.2.8
    @aws-amplify/cli: 12.12.6
    @expo/ngrok: 2.5.0
    @microsoft/rush: 5.90.0
    amplify-category-video: 2.5.1
    appium-doctor: 1.16.0
    appium: 1.22.3
    aws-cdk: 2.92.0
    corepack: 0.18.0
    create-react-app: 5.0.1
    expo-cli: 5.4.12
    n: 9.1.0
    npm-bundle: 3.0.3
    npm: 10.7.0
    pnpm: 7.26.3
    wscat: 5.2.0
    yarn: 1.22.19

Describe the bug

The Cache.clear() API doesn't work, the cache items are not removed from local storage after this API is called.
Cache.removeItem() API works but need a quick way to remove all cache items after user log out.

Expected behavior

All cache items created by Amplify Cache util can be removed.

Reproduction steps

1. Create a simple React app.
2. Test with the following useEffect code.

  useEffect(() => {
    Cache.setItem("test", "test")
    setTimeout(()=>{
      Cache.clear().then(()=>{
        console.log("cleared")
      })
      .catch(e=>{
        console.log("error", e)
      })
    },2000)
  }, []);

Code Snippet

  useEffect(() => {
    Cache.setItem("test", "test")
    setTimeout(()=>{
      Cache.clear().then(()=>{
        console.log("cleared")
      })
      .catch(e=>{
        console.log("error", e)
      })
    },2000)
  }, []);

Log output

Navigated to http://localhost:3000/
App.tsx:8 [DEBUG] 59:35.837 StorageCache - Set item: key is test, value is test with options: undefined
App.tsx:10 [DEBUG] 59:37.840 StorageCache - Clear Cache
App.tsx:11 cleared

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @lwang-79 👋. Can you clarify if you're experiencing this in Dev Mode? It's possible this behavior is due to how React's development mode will invoke the useEffect hook twice. It doesn't look like you're running a "cleanup function" that would help with this, so can you see if the following changes the behavior:

useEffect(() => {
  Cache.setItem("test", "test")
  const timer = setTimeout(() => {
    Cache.clear().then(() => {
      console.log("cleared")
    })
    .catch(e => {
      console.log("error", e)
    })
  }, 2000)

  // Cleanup function
  return () => {
    clearTimeout(timer)
  }
}, []);

Alternatively, you could test this in production mode (rather than development mode) and it should also make the Cache.clear() call work as expected. Let me know if this helps!

[lwang-79]

Hi @cwomack, thank you for checking this issue. I have verified that it's not due to the React restrict mode.

1. I have disabled restrict mode.
2. Even the useEffect is invoked twice, the last Cache.clear() should clear the cache.
3. Adding clearTimeout doesn't change the behaviour.
4. Deploy the app doesn't change the behaviour.
5. The Cache.removeItem() API and the V5 Cache.clear() API works well.

[cwomack]

@lwang-79, appreciate the quick follow up. After testing this further on our side, we've confirmed there is a bug in v6 of Amplify with Cache.clear(). The cache is not updating it's state as expected after some. refactoring we did in the latest major version.

Thank you for opening this and helping us identify the bug! We'll update this issue with progress as it's made.