@khanacademy/wonder-blocks-data 3.1.3 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-data
 
+## 3.2.0
+
+### Minor Changes
+
+-   6973afa2: useGql method now merges defaultContext and partial context by ignoring values explicitly set to undefined in the partial context. This ensures that that existing default context values are not overridden unless explicitly given a value other than undefined.
+
 ## 3.1.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -865,6 +865,10 @@ const getGqlDataFromResponse = async response => {
  *
  * The fetch function will resolve null if the request was aborted, otherwise
  * it will resolve the data returned by the GraphQL server.
+ *
+ * Context is merged with the default context provided to the GqlRouter.
+ * Values in the partial context given to the returned fetch function will
+ * only be included if they have a value other than undefined.
  */
 const useGql = () => {
   // This hook only works if the `GqlRouter` has been used to setup context.
@@ -886,10 +890,22 @@ const useGql = () => {
   const gqlFetch = useMemo(() => (operation, options = Object.freeze({})) => {
     const {
       variables,
-      context
-    } = options; // Invoke the fetch and extract the data.
+      context = {}
+    } = options; // Let's merge the partial context of the fetch with the
+    // default context. We deliberately don't spread because
+    // spreading would overwrite default context values with
+    // undefined if the partial context includes a value explicitly
+    // set to undefined. Instead, we use a map/reduce of keys.
+
+    const mergedContext = Object.keys(context).reduce((acc, key) => {
+      if (context[key] !== undefined) {
+        acc[key] = context[key];
+      }
+
+      return acc;
+    }, _extends({}, defaultContext)); // Invoke the fetch and extract the data.
 
-    return fetch(operation, variables, _extends({}, defaultContext, context)).then(getGqlDataFromResponse, error => {
+    return fetch(operation, variables, mergedContext).then(getGqlDataFromResponse, error => {
       // Return null if the request was aborted.
       // The only way to detect this reliably, it seems, is to
       // check the error name and see if it's "AbortError" (this

package/dist/index.js

@@ -1032,6 +1032,10 @@ const GqlRouter = ({
  *
  * The fetch function will resolve null if the request was aborted, otherwise
  * it will resolve the data returned by the GraphQL server.
+ *
+ * Context is merged with the default context provided to the GqlRouter.
+ * Values in the partial context given to the returned fetch function will
+ * only be included if they have a value other than undefined.
  */
 const useGql = () => {
   // This hook only works if the `GqlRouter` has been used to setup context.
@@ -1053,12 +1057,23 @@ const useGql = () => {
   const gqlFetch = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(() => (operation, options = Object.freeze({})) => {
     const {
       variables,
-      context
-    } = options; // Invoke the fetch and extract the data.
+      context = {}
+    } = options; // Let's merge the partial context of the fetch with the
+    // default context. We deliberately don't spread because
+    // spreading would overwrite default context values with
+    // undefined if the partial context includes a value explicitly
+    // set to undefined. Instead, we use a map/reduce of keys.
+
+    const mergedContext = Object.keys(context).reduce((acc, key) => {
+      if (context[key] !== undefined) {
+        acc[key] = context[key];
+      }
+
+      return acc;
+    }, { ...defaultContext
+    }); // Invoke the fetch and extract the data.
 
-    return fetch(operation, variables, { ...defaultContext,
-      ...context
-    }).then(_util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__[/* getGqlDataFromResponse */ "a"], error => {
+    return fetch(operation, variables, mergedContext).then(_util_get_gql_data_from_response_js__WEBPACK_IMPORTED_MODULE_2__[/* getGqlDataFromResponse */ "a"], error => {
       // Return null if the request was aborted.
       // The only way to detect this reliably, it seems, is to
       // check the error name and see if it's "AbortError" (this

package/package.json

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

package/src/hooks/__tests__/use-gql.test.js

@@ -80,6 +80,7 @@ describe("#useGql", () => {
                 id: "MyQuery",
             };
             const gqlOpContext = {
+                a: undefined, // This should not get included.
                 b: "overrideB",
             };
             const gqlOpVariables = {

package/src/hooks/use-gql.js

@@ -9,7 +9,6 @@ import type {
     GqlContext,
     GqlOperation,
     GqlFetchOptions,
-    GqlOperationType,
 } from "../util/gql-types.js";
 
 /**
@@ -17,13 +16,12 @@ import type {
  *
  * The fetch function will resolve null if the request was aborted, otherwise
  * it will resolve the data returned by the GraphQL server.
+ *
+ * Context is merged with the default context provided to the GqlRouter.
+ * Values in the partial context given to the returned fetch function will
+ * only be included if they have a value other than undefined.
  */
-export const useGql = (): (<
-    TType: GqlOperationType,
-    TData,
-    TVariables: {...},
-    TContext: GqlContext,
->(
+export const useGql = (): (<TData, TVariables: {...}, TContext: GqlContext>(
     operation: GqlOperation<TData, TVariables>,
     options?: GqlFetchOptions<TVariables, TContext>,
 ) => Promise<?TData>) => {
@@ -47,24 +45,39 @@ export const useGql = (): (<
                     {},
                 ),
             ) => {
-                const {variables, context} = options;
+                const {variables, context = {}} = options;
+
+                // Let's merge the partial context of the fetch with the
+                // default context. We deliberately don't spread because
+                // spreading would overwrite default context values with
+                // undefined if the partial context includes a value explicitly
+                // set to undefined. Instead, we use a map/reduce of keys.
+                const mergedContext = Object.keys(context).reduce(
+                    (acc, key) => {
+                        if (context[key] !== undefined) {
+                            acc[key] = context[key];
+                        }
+                        return acc;
+                    },
+                    {...defaultContext},
+                );
 
                 // Invoke the fetch and extract the data.
-                return fetch(operation, variables, {
-                    ...defaultContext,
-                    ...context,
-                }).then(getGqlDataFromResponse, (error) => {
-                    // Return null if the request was aborted.
-                    // The only way to detect this reliably, it seems, is to
-                    // check the error name and see if it's "AbortError" (this
-                    // is also what Apollo does).
-                    // Even then, it's reliant on the fetch supporting aborts.
-                    if (error.name === "AbortError") {
-                        return null;
-                    }
-                    // Need to make sure we pass other errors along.
-                    throw error;
-                });
+                return fetch(operation, variables, mergedContext).then(
+                    getGqlDataFromResponse,
+                    (error) => {
+                        // Return null if the request was aborted.
+                        // The only way to detect this reliably, it seems, is to
+                        // check the error name and see if it's "AbortError" (this
+                        // is also what Apollo does).
+                        // Even then, it's reliant on the fetch supporting aborts.
+                        if (error.name === "AbortError") {
+                            return null;
+                        }
+                        // Need to make sure we pass other errors along.
+                        throw error;
+                    },
+                );
             },
         [fetch, defaultContext],
     );