Merges an existing key value with an input value, assuming both values are stringified JSON (with TypeScript)

[tiavina-mika]

What happened?

I'm using TypeScript and I have this error when using mergeItem:
Merges an existing key value with an input value, assuming both values are stringified JSON

Here is my code:

export const mergeAsyncStorage = async (key: string, value: Record<string, any>): Promise<void> => {
  try {
    if (!key || !value) {
      throw new Error('Missing key and data params');
    }

    await AsyncStorage.mergeItem(key, JSON.stringify(value));
  } catch (e) {
    console.error('setAsyncStorage error:', e);
  }
};

Here is the complet error messages:
`
Merges an existing key value with an input value, assuming both values are stringified JSON.

NOTE: This is not supported by all native implementations.

See https://react-native-async-storage.github.io/async-storage/docs/api#mergeitem

Cannot invoke an object which is possibly 'undefined'.ts(2722)
`

Version

~1.17.3

What platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows
• web

System Information

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-4710HQ CPU @ 2.50GHz
    Memory: 7.00 GB / 15.95 GB
  Binaries:
    Node: 14.18.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210110.135312.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 28, 29, 30, 31, 32
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 32.0.0
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom_64, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64, android-30 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version     2020.3.0.0 AI-203.7717.56.2031.7935034
    Visual Studio: Not Found
  Languages:
    Java: 11.0.13 - /c/Program Files/Common Files/Oracle/Java/javapath/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.68.2 => 0.68.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to Reproduce

1. Create an app with Expo managed workflow and TypeScript.
2. Add this function, the IDE will show the warning :

export const mergeAsyncStorage = async (key: string, value: Record<string, any>): Promise<void> => {
  try {
    if (!key || !value) {
      throw new Error('Missing key and data params');
    }

    await AsyncStorage.mergeItem(key, JSON.stringify(value));
  } catch (e) {
    console.error('setAsyncStorage error:', e);
  }
};

[jayfunk]

I am seeing something similar when using mergeItem.

[jayfunk]

I think this type definition is the culprit. It appears that multiMerge is the same way. I think they are defined this way because they may not be present for some platforms. I guess the only way to work around this is to ignore it in TS or provide some kind of checking like:

      if (AsyncStorage.mergeItem != null) {
        await AsyncStorage.mergeItem('SomeKey', JSON.stringify({ [someField]: { enabled: false } }))
      }

I have implemented a similar approach in my project for the time being. Is there a better solution going forward?

[tido64]

I think this type definition is the culprit. It appears that multiMerge is the same way. I think they are defined this way because they may not be present for some platforms. I guess the only way to work around this is to ignore it in TS or provide some kind of checking like:

      if (AsyncStorage.mergeItem != null) {
        await AsyncStorage.mergeItem('SomeKey', JSON.stringify({ [someField]: { enabled: false } }))
      }

I have implemented a similar approach in my project for the time being. Is there a better solution going forward?

This would be the correct way of using a function if it's optional. However, we had a look and multiMerge should be implemented on all platforms now. As of v1.17.8, you should no longer need the if-check. Let us know if you still hit issues.