@khanacademy/wonder-blocks-data 9.0.0 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-data
 
+## 9.1.0
+
+### Minor Changes
+
+-   944c3071: Make sure objects and arrays in variables are sorted and readable in generated request identifiers
+
 ## 9.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -683,14 +683,27 @@ const InterceptRequests = ({
   }, children);
 };
 
-const toString = valid => {
+const toString = value => {
   var _JSON$stringify;
 
-  if (typeof valid === "string") {
-    return valid;
+  if (typeof value === "string") {
+    return value;
   }
 
-  return (_JSON$stringify = JSON.stringify(valid)) != null ? _JSON$stringify : "";
+  return (_JSON$stringify = JSON.stringify(value)) != null ? _JSON$stringify : "";
+};
+
+const toStringifiedVariables = (acc, key, value) => {
+  if (typeof value === "object" && value !== null) {
+    return Object.entries(value).reduce((innerAcc, [i, v]) => {
+      const subKey = `${key}.${i}`;
+      return toStringifiedVariables(innerAcc, subKey, v);
+    }, acc);
+  } else {
+    acc[key] = toString(value);
+  }
+
+  return acc;
 };
 
 const getGqlRequestId = (operation, variables, context) => {
@@ -702,8 +715,8 @@ const getGqlRequestId = (operation, variables, context) => {
 
   if (variables != null) {
     const stringifiedVariables = Object.keys(variables).reduce((acc, key) => {
-      acc[key] = toString(variables[key]);
-      return acc;
+      const value = variables[key];
+      return toStringifiedVariables(acc, key, value);
     }, {});
     const sortableVariables = new URLSearchParams(stringifiedVariables);
     sortableVariables.sort();

package/dist/index.js

@@ -1843,14 +1843,32 @@ const InterceptRequests = ({
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getGqlRequestId; });
-const toString = valid => {
+const toString = value => {
   var _JSON$stringify;
 
-  if (typeof valid === "string") {
-    return valid;
+  if (typeof value === "string") {
+    return value;
   }
 
-  return (_JSON$stringify = JSON.stringify(valid)) != null ? _JSON$stringify : "";
+  return (_JSON$stringify = JSON.stringify(value)) != null ? _JSON$stringify : "";
+};
+
+const toStringifiedVariables = (acc, key, value) => {
+  if (typeof value === "object" && value !== null) {
+    // If we have an object or array, we build sub-variables so that
+    // the ID is easily human-readable rather than having lots of
+    // extra %-encodings. This means that an object or array variable
+    // turns into x variables, where x is the field or element count of
+    // variable. See below for example.
+    return Object.entries(value).reduce((innerAcc, [i, v]) => {
+      const subKey = `${key}.${i}`;
+      return toStringifiedVariables(innerAcc, subKey, v);
+    }, acc);
+  } else {
+    acc[key] = toString(value);
+  }
+
+  return acc;
 };
 /**
  * Get an identifier for a given request.
@@ -1871,9 +1889,36 @@ const getGqlRequestId = (operation, variables, context) => {
 
   if (variables != null) {
     // We need to turn each variable into a string.
+    // We also need to ensure we sort any sub-object keys.
+    // `toStringifiedVariables` helps us with this by hoisting nested
+    // data to individual variables for the purposes of ID generation.
+    //
+    // For example, consider variables:
+    //    {x: [1,2,3], y: {a: 1, b: 2, c: 3}, z: 123}
+    //
+    // Each variable, x, y and z, would be stringified into
+    // stringifiedVariables as follows:
+    //  x becomes {"x.0": "1", "x.1": "2", "x.2": "3"}
+    //  y becomes {"y.a": "1", "y.b": "2", "y.c": "3"}
+    //  z becomes {"z": "123"}
+    //
+    // This then leads to stringifiedVariables being:
+    //  {
+    //    "x.0": "1",
+    //    "x.1": "2",
+    //    "x.2": "3",
+    //    "y.a": "1",
+    //    "y.b": "2",
+    //    "y.c": "3",
+    //    "z": "123",
+    //  }
+    //
+    // Thus allowing our use of URLSearchParams to both sort and easily
+    // encode the variables into an idempotent identifier for those
+    // variable values that is also human-readable.
     const stringifiedVariables = Object.keys(variables).reduce((acc, key) => {
-      acc[key] = toString(variables[key]);
-      return acc;
+      const value = variables[key];
+      return toStringifiedVariables(acc, key, value);
     }, {}); // We use the same mechanism as context to sort and arrange the
     // variables.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"

package/src/util/__tests__/get-gql-request-id.test.js

@@ -71,4 +71,37 @@ describe("#getGqlRequestId", () => {
             `variable1=value1&variable2=42&variable3=&variable4=null&variable5=true`,
         );
     });
+
+    it("should sort nested variable properties", () => {
+        // Arrange
+        const operation = {
+            type: "query",
+            id: "myQuery",
+        };
+        const variables = {
+            variable4: null,
+            variable2: 42,
+            variable1: "value1",
+            variable5: true,
+            variable3: undefined,
+            variable6: {
+                nested2: "nested2",
+                nested1: "nested1",
+            },
+            variable7: [1, 2, 3],
+        };
+
+        // Act
+        const requestId = getGqlRequestId(operation, variables, {
+            module: "MODULE",
+            curriculum: "CURRICULUM",
+            targetLocale: "LOCALE",
+        });
+        const result = new Set(requestId.split("|"));
+
+        // Assert
+        expect(result).toContain(
+            `variable1=value1&variable2=42&variable3=&variable4=null&variable5=true&variable6.nested1=nested1&variable6.nested2=nested2&variable7.0=1&variable7.1=2&variable7.2=3`,
+        );
+    });
 });

package/src/util/get-gql-request-id.js

@@ -1,11 +1,28 @@
 // @flow
 import type {GqlOperation, GqlContext} from "./gql-types.js";
 
-const toString = (valid: mixed): string => {
-    if (typeof valid === "string") {
-        return valid;
+const toString = (value: mixed): string => {
+    if (typeof value === "string") {
+        return value;
     }
-    return JSON.stringify(valid) ?? "";
+    return JSON.stringify(value) ?? "";
+};
+
+const toStringifiedVariables = (acc: any, key: string, value: mixed): any => {
+    if (typeof value === "object" && value !== null) {
+        // If we have an object or array, we build sub-variables so that
+        // the ID is easily human-readable rather than having lots of
+        // extra %-encodings. This means that an object or array variable
+        // turns into x variables, where x is the field or element count of
+        // variable. See below for example.
+        return Object.entries(value).reduce((innerAcc, [i, v]) => {
+            const subKey = `${key}.${i}`;
+            return toStringifiedVariables(innerAcc, subKey, v);
+        }, acc);
+    } else {
+        acc[key] = toString(value);
+    }
+    return acc;
 };
 
 /**
@@ -32,10 +49,37 @@ export const getGqlRequestId = <TData, TVariables: {...}>(
     // Finally, if we have variables, we add those too.
     if (variables != null) {
         // We need to turn each variable into a string.
+        // We also need to ensure we sort any sub-object keys.
+        // `toStringifiedVariables` helps us with this by hoisting nested
+        // data to individual variables for the purposes of ID generation.
+        //
+        // For example, consider variables:
+        //    {x: [1,2,3], y: {a: 1, b: 2, c: 3}, z: 123}
+        //
+        // Each variable, x, y and z, would be stringified into
+        // stringifiedVariables as follows:
+        //  x becomes {"x.0": "1", "x.1": "2", "x.2": "3"}
+        //  y becomes {"y.a": "1", "y.b": "2", "y.c": "3"}
+        //  z becomes {"z": "123"}
+        //
+        // This then leads to stringifiedVariables being:
+        //  {
+        //    "x.0": "1",
+        //    "x.1": "2",
+        //    "x.2": "3",
+        //    "y.a": "1",
+        //    "y.b": "2",
+        //    "y.c": "3",
+        //    "z": "123",
+        //  }
+        //
+        // Thus allowing our use of URLSearchParams to both sort and easily
+        // encode the variables into an idempotent identifier for those
+        // variable values that is also human-readable.
         const stringifiedVariables = Object.keys(variables).reduce(
             (acc, key) => {
-                acc[key] = toString(variables[key]);
-                return acc;
+                const value = variables[key];
+                return toStringifiedVariables(acc, key, value);
             },
             {},
         );