react-native-onyx 1.0.80 → 1.0.82

package/README.md

@@ -137,6 +137,46 @@ export default withOnyx({
 
 It is preferable to use the HOC over `Onyx.connect()` in React code as `withOnyx()` will delay the rendering of the wrapped component until all keys have been accessed and made available.
 
+### Dependent Onyx Keys and withOnyx()
+Some components need to subscribe to multiple Onyx keys at once and sometimes, one key might rely on the data from another key. This is similar to a JOIN in SQL.
+
+Example: To get the policy of a report, the `policy` key depends on the `report` key.
+
+```javascript
+export default withOnyx({
+    report: {
+        key: ({reportID) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+    },
+    policy: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,
+    },
+})(App);
+```
+
+Background info:
+- The `key` value can be a function that returns the key that Onyx subscribes to
+- The first argument to the `key` function is the `props` from the component
+
+**Detailed explanation of how this is handled and rendered:**
+1. The component mounts with a `reportID={1234}` prop
+2. `withOnyx` evaluates the mapping
+3. `withOnyx` connects to the key `reports_1234` because of the prop passed to the component
+3. `withOnyx` connects to the key `policies_undefined` because `report` doesn't exist in the props yet, so the `policyID` defaults to `undefined`. * (see note below)
+4. Onyx reads the data and updates the state of `withOnyx` with:
+    - `report={{reportID: 1234, policyID: 1, ... the rest of the object ...}}`
+    - `policy={undefined}` (since there is no policy with ID `undefined`)
+5. There is still an `undefined` key in the mapping, so Onyx reads the data again
+6. This time `withOnyx` connects to the key `policies_1` because the `report` object exists in the component's state and it has a `policyID: 1`
+7. Onyx reads the data and updates the state of withOnyx with:
+    - `policy={{policyID: 1, ... the rest of the object ...}`
+8. Now all mappings have values that are defined (not undefined) and the component is rendered with all necessary data
+  
+* It is VERY important to NOT use empty string default values like `report.policyID || ''`. This results in the key returned to `withOnyx` as `policies_` which subscribes to the ENTIRE POLICY COLLECTION and is most assuredly not what you were intending. You can use a default of `0` (as long as you are reasonably sure that there is never a policyID=0). This allows Onyx to return `undefined` as the value of the policy key, which is handled by `withOnyx` appropriately.
+
+DO NOT use more than one `withOnyx` component at a time. It adds overhead and prevents some optimizations like batched rendering from working to its full potential.
+
+It's also beneficial to use a [selector](https://github.com/Expensify/react-native-onyx/blob/main/API.md#connectmapping--number) with the mapping in case you need to grab a single item in a collection (like a single report action).
+
 ## Collections
 
 Collections allow keys with similar value types to be subscribed together by subscribing to the collection key. To define one, it must be included in the `ONYXKEYS.COLLECTION` object and it must be suffixed with an underscore. Member keys should use a unique identifier or index after the collection key prefix (e.g. `report_42`).

package/dist/web.development.js

@@ -77,9 +77,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _OnyxCache__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./OnyxCache */ "./lib/OnyxCache.js");
 /* harmony import */ var _Str__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Str */ "./lib/Str.js");
 /* harmony import */ var _createDeferredTask__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./createDeferredTask */ "./lib/createDeferredTask.js");
-/* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js");
+/* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./fastMerge */ "./lib/fastMerge.js");
 /* harmony import */ var _metrics_PerformanceUtils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./metrics/PerformanceUtils */ "./lib/metrics/PerformanceUtils.js");
 /* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./storage */ "./lib/storage/index.web.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils */ "./lib/utils.js");
 /* harmony import */ var _batch__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./batch */ "./lib/batch.js");
 /* eslint-disable no-continue */
 
@@ -93,6 +94,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 // Method constants
 const METHOD = {
   SET: 'set',
@@ -1073,24 +1075,6 @@ function hasPendingMergeForKey(key) {
   return Boolean(mergeQueue[key]);
 }
 
-/**
- * We generally want to remove top-level nullish values from objects written to disk and cache, because it decreases the amount of data stored in memory and on disk.
- * On native, when merging an existing value with new changes, SQLite will use  JSON_PATCH, which removes top-level nullish values.
- * To be consistent with the behaviour for merge, we'll also want to remove nullish values for "set" operations.
- * On web, IndexedDB will keep the top-level keys along with a null value and this uses up storage and memory.
- * This method will ensure that keys for null values are removed before an object is written to disk and cache so that all platforms are storing the data in the same efficient way.
- * @private
- * @param {*} value
- * @returns {*}
- */
-function removeNullObjectValues(value) {
-  if (underscore__WEBPACK_IMPORTED_MODULE_1___default().isArray(value) || !underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(value)) {
-    return value;
-  }
-
-  return underscore__WEBPACK_IMPORTED_MODULE_1___default().omit(value, (objectValue) => underscore__WEBPACK_IMPORTED_MODULE_1___default().isNull(objectValue));
-}
-
 /**
  * Write a value to our store with the given key
  *
@@ -1108,7 +1092,7 @@ function set(key, value) {
     _Logger__WEBPACK_IMPORTED_MODULE_5__.logAlert(`Onyx.set() called after Onyx.merge() for key: ${key}. It is recommended to use set() or merge() not both.`);
   }
 
-  const valueWithNullRemoved = removeNullObjectValues(value);
+  const valueWithNullRemoved = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].removeNullObjectValues(value);
 
   const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasValueChanged(key, valueWithNullRemoved);
 
@@ -1178,7 +1162,7 @@ function applyMerge(existingValue, changes) {
     // Object values are merged one after the other
     // lodash adds a small overhead so we don't use it here
     // eslint-disable-next-line prefer-object-spread, rulesdir/prefer-underscore-method
-    return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(changes, (modifiedData, change) => (0,_fastMerge__WEBPACK_IMPORTED_MODULE_9__["default"])(modifiedData, change),
+    return underscore__WEBPACK_IMPORTED_MODULE_1___default().reduce(changes, (modifiedData, change) => (0,_fastMerge__WEBPACK_IMPORTED_MODULE_10__["default"])(modifiedData, change),
     existingValue || {});
   }
 
@@ -1227,14 +1211,14 @@ function merge(key, changes) {
       delete mergeQueuePromise[key];
 
       // After that we merge the batched changes with the existing value
-      const modifiedData = removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
+      const modifiedData = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].removeNullObjectValues(applyMerge(existingValue, [batchedChanges]));
 
       // On native platforms we use SQLite which utilises JSON_PATCH to merge changes.
       // JSON_PATCH generally removes top-level nullish values from the stored object.
       // When there is no existing value though, SQLite will just insert the changes as a new value and thus the top-level nullish values won't be removed.
       // Therefore we need to remove nullish values from the `batchedChanges` which are sent to the SQLite, if no existing value is present.
       if (!existingValue) {
-        batchedChanges = removeNullObjectValues(batchedChanges);
+        batchedChanges = _utils__WEBPACK_IMPORTED_MODULE_9__["default"].removeNullObjectValues(batchedChanges);
       }
 
       const hasChanged = _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].hasValueChanged(key, modifiedData);
@@ -1268,7 +1252,7 @@ function initializeWithDefaultKeyStates() {
   then((pairs) => {
     const asObject = underscore__WEBPACK_IMPORTED_MODULE_1___default().object(pairs);
 
-    const merged = (0,_fastMerge__WEBPACK_IMPORTED_MODULE_9__["default"])(asObject, defaultKeyStates);
+    const merged = (0,_fastMerge__WEBPACK_IMPORTED_MODULE_10__["default"])(asObject, defaultKeyStates);
     _OnyxCache__WEBPACK_IMPORTED_MODULE_3__["default"].merge(merged);
     underscore__WEBPACK_IMPORTED_MODULE_1___default().each(merged, (val, key) => keyChanged(key, val));
   });
@@ -1977,6 +1961,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
+/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! underscore */ "underscore");
+/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__);
+
+
 // Mostly copied from https://medium.com/@lubaka.a/how-to-remove-lodash-performance-improvement-b306669ad0e1
 
 /**
@@ -2033,10 +2021,7 @@ function mergeObject(target, source) {
  * @returns {Object|Array}
 */
 function fastMerge(target, source) {
-  // lodash adds a small overhead so we don't use it here
-  // eslint-disable-next-line rulesdir/prefer-underscore-method
-  const array = Array.isArray(source);
-  if (array) {
+  if (underscore__WEBPACK_IMPORTED_MODULE_0___default().isArray(source) || underscore__WEBPACK_IMPORTED_MODULE_0___default().isNull(source) || underscore__WEBPACK_IMPORTED_MODULE_0___default().isUndefined(source)) {
     return source;
   }
   return mergeObject(target, source);
@@ -2282,6 +2267,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ "underscore");
 /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _fastMerge__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../fastMerge */ "./lib/fastMerge.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ "./lib/utils.js");
+
 
 
 
@@ -2329,7 +2316,7 @@ const provider = {
       const upsertMany = underscore__WEBPACK_IMPORTED_MODULE_1___default().map(pairs, (_ref2, index) => {let [key, value] = _ref2;
         const prev = values[index];
         const newValue = underscore__WEBPACK_IMPORTED_MODULE_1___default().isObject(prev) ? (0,_fastMerge__WEBPACK_IMPORTED_MODULE_2__["default"])(prev, value) : value;
-        return (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.promisifyRequest)(store.put(newValue, key));
+        return (0,idb_keyval__WEBPACK_IMPORTED_MODULE_0__.promisifyRequest)(store.put(_utils__WEBPACK_IMPORTED_MODULE_3__["default"].removeNullObjectValues(newValue), key));
       });
       return Promise.all(upsertMany);
     });
@@ -2414,6 +2401,45 @@ const provider = {
 
 /***/ }),
 
+/***/ "./lib/utils.js":
+/*!**********************!*\
+  !*** ./lib/utils.js ***!
+  \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! underscore */ "underscore");
+/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__);
+
+
+/**
+ * We generally want to remove top-level nullish values from objects written to disk and cache, because it decreases the amount of data stored in memory and on disk.
+ * On native, when merging an existing value with new changes, SQLite will use  JSON_PATCH, which removes top-level nullish values.
+ * To be consistent with the behaviour for merge, we'll also want to remove nullish values for "set" operations.
+ * On web, IndexedDB will keep the top-level keys along with a null value and this uses up storage and memory.
+ * This method will ensure that keys for null values are removed before an object is written to disk and cache so that all platforms are storing the data in the same efficient way.
+ * @private
+ * @param {*} value
+ * @returns {*}
+ */
+function removeNullObjectValues(value) {
+  if (underscore__WEBPACK_IMPORTED_MODULE_0___default().isArray(value) || !underscore__WEBPACK_IMPORTED_MODULE_0___default().isObject(value)) {
+    return value;
+  }
+
+  const objectWithoutNullObjectValues = underscore__WEBPACK_IMPORTED_MODULE_0___default().omit(value, (objectValue) => underscore__WEBPACK_IMPORTED_MODULE_0___default().isNull(objectValue));
+
+  return objectWithoutNullObjectValues;
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ removeNullObjectValues });
+
+/***/ }),
+
 /***/ "./lib/withOnyx.js":
 /*!*************************!*\
   !*** ./lib/withOnyx.js ***!