Cache.getItem callback function doesn't exist

[AndyW22]

Before opening, please confirm:

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

JavaScript Framework

React, Next.js

Amplify APIs

Cache

Amplify Categories

Not applicable

Environment information

``` # Put output below this line System: OS: macOS 11.3 CPU: (8) x64 Apple M1 Memory: 184.10 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 15.5.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.5.4 - /usr/local/bin/npm Browsers: Chrome: 90.0.4430.93 Firefox: 88.0.1 Safari: 14.1 npmPackages: @ampproject/toolbox-optimizer: undefined () @babel/core: undefined () @material-ui/core: ^4.11.3 => 4.11.4 @material-ui/icons: ^4.11.2 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.58 @reduxjs/toolkit: ^1.5.0 => 1.5.1 @types/jest: ^26.0.22 => 26.0.23 @types/react: ^17.0.3 => 17.0.4 @types/react-google-recaptcha: ^2.1.0 => 2.1.0 @types/react-material-ui-form-validator: ^2.1.0 => 2.1.0 @types/redux-logger: ^3.0.8 => 3.0.8 @types/styled-components: ^5.1.9 => 5.1.9 @typescript-eslint/eslint-plugin: ^4.19.0 => 4.22.0 @typescript-eslint/parser: ^4.19.0 => 4.22.0 amphtml-validator: undefined () arg: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^3.3.26 => 3.3.27 axios: ^0.21.1 => 0.21.1 bfj: undefined () cacache: undefined () cache-loader: undefined () cacheable-response: ^2.1.12 => 2.1.12 ci-info: undefined () comment-json: undefined () compression: undefined () conf: undefined () content-type: undefined () cookie: undefined () cross-env: ^7.0.2 => 7.0.3 css-loader: undefined () cypress: 7.2.0 => 7.2.0 cypress-fail-on-console-error: ^2.1.0 => 2.1.0 debug: undefined () devalue: undefined () escape-string-regexp: undefined () eslint: ^7.22.0 => 7.25.0 eslint-config-prettier: ^8.1.0 => 8.3.0 eslint-plugin-react: ^7.23.1 => 7.23.2 express: ^4.17.1 => 4.17.1 file-loader: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () gzip-size: undefined () http-proxy: undefined () husky: ^6.0.0 => 6.0.0 ignore-loader: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () json5: undefined () jsonwebtoken: undefined () lint-staged: ^10.5.4 => 10.5.4 loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () mocha: ^8.3.2 => 8.3.2 mochawesome: 6.2.2 => 6.2.2 nanoid: undefined () neo-async: undefined () next: ^10.2.0 => 10.2.0 next-redux-wrapper: ^7.0.0-rc.2 => 7.0.0-rc.2 ora: undefined () postcss-flexbugs-fixes: undefined () postcss-loader: undefined () postcss-preset-env: undefined () postcss-scss: undefined () prettier: ^2.2.1 => 2.2.1 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 react-google-recaptcha: ^2.1.0 => 2.1.0 react-material-ui-form-validator: ^2.1.4 => 2.1.4 react-redux: ^7.2.3 => 7.2.4 react-responsive-modal: ^6.0.1 => 6.0.1 recast: undefined () redux-logger: ^3.0.6 => 3.0.6 resolve-url-loader: undefined () sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () source-map: undefined () start-server-and-test: ^1.12.1 => 1.12.1 string-hash: undefined () strip-ansi: undefined () styled-components: ^5.2.3 => 5.2.3 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () terser: undefined () text-table: undefined () thread-loader: undefined () typescript: ^4.2.3 => 4.2.4 unistore: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () npmGlobalPackages: @aws-amplify/cli: 4.41.2 eslint: 7.16.0 nodemon: 2.0.7 npm: 7.5.4 react-devtools: 4.10.1 source-map-explorer: 2.5.2 superplate-cli: 1.0.7 superplate: 0.0.1 typescript-express-starter: 4.3.0 typescript: 4.2.4 yarn: 1.22.10 ```

Describe the bug

Cache.getItem('key', { callback: callback }); does not exist. see https://github.com/aws-amplify/amplify-js/blob/a047ce73/packages/cache/src/Utils/CacheUtils.ts#L89

This is mentioned in the docs, and the types are there, but is not usable and will just return an empty object.

Expected behavior

Callback function exists and works as stated in the docs.

Reproduction steps

Use the callback function with the cache like so:

const result await Cache.getItem('key', {
      callback: async () => "value" ,
    });

The result will be an empty object

Code Snippet

const result = await Cache.getItem('key', {
      callback: async () => "value" ,
    });

Log output

``` // Put your logs below this line ```

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

[chrisbonifacio]

Hmm, I see what you mean about the docs. What I did find is this BrowserStorageCache util that seems to do what the docs suggest. I'll see if I can find out more about this.

https://github.com/aws-amplify/amplify-js/blob/main/packages/cache/src/BrowserStorageCache.ts#L357

edit: updated AsyncStorageCache to BrowserStorageCache

[chrisbonifacio]

Seems like if you console log the resolved promise, you get the value returned in the callback but an empty object is being set as the value in the cache.

[chrisbonifacio]

Try changing your code to this

const result = Cache.getItem("key", {
      callback: () => "value",
    });
    console.log(result);

The callback should not return a promise, getItem doesn't handle async functions.

[AndyW22]

Try changing your code to this

const result = Cache.getItem("key", {
      callback: () => "value",
    });
    console.log(result);

The callback should not return a promise, getItem doesn't handle async functions.

thanks that seems to fix it, would be great if amplify supported async functions for this as i imagine most of the time people will be adding data returned from an async function to the cache. This does work the long way (getting cache, checking if its null, getting the data, then setting that as the cache) since the cache itself doesn't involve any async functions then.

[chrisbonifacio]

Might be a good feature request or topic for discussion! And no problem, glad we could help 😄

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.