@khanacademy/wonder-blocks-data 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @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
+
+-   9931ae6b: Simplify GQL types
+
+## 3.1.2
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.2.1
+
+## 3.1.1
+
+### Patch Changes
+
+-   4ff59815: Add GraphQL fetch mock support to wonder-blocks-testing
+
 ## 3.1.0
 
 ### Minor 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
@@ -897,7 +913,10 @@ const useGql = () => {
       // 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]);
   return gqlFetch;

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
@@ -1066,7 +1081,10 @@ const useGql = () => {
       // 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]);
   return gqlFetch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,14 +14,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.0.0"
+    "@khanacademy/wonder-blocks-core": "^4.2.1"
   },
   "peerDependencies": {
     "@khanacademy/wonder-stuff-core": "^0.1.2",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.2.0"
+    "wb-dev-build-settings": "^0.3.0"
   },
   "author": "",
   "license": "MIT"

package/src/components/gql-router.js

@@ -5,7 +5,7 @@ import {GqlRouterContext} from "../util/gql-router-context.js";
 
 import type {
     GqlContext,
-    FetchFn,
+    GqlFetchFn,
     GqlRouterConfiguration,
 } from "../util/gql-types.js";
 
@@ -18,7 +18,7 @@ type Props<TContext: GqlContext> = {|
     /**
      * The function to use when fetching requests.
      */
-    fetch: FetchFn<any, any, any, TContext>,
+    fetch: GqlFetchFn<any, any, TContext>,
 
     /**
      * The children to be rendered inside the router.

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,14 +16,13 @@ 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,
->(
-    operation: GqlOperation<TType, TData, TVariables>,
+export const useGql = (): (<TData, TVariables: {...}, TContext: GqlContext>(
+    operation: GqlOperation<TData, TVariables>,
     options?: GqlFetchOptions<TVariables, TContext>,
 ) => Promise<?TData>) => {
     // This hook only works if the `GqlRouter` has been used to setup context.
@@ -41,33 +39,45 @@ export const useGql = (): (<
     // in hooks deps without fear of it triggering extra renders.
     const gqlFetch = useMemo(
         () =>
-            <
-                TType: GqlOperationType,
-                TData,
-                TVariables: {...},
-                TContext: GqlContext,
-            >(
-                operation: GqlOperation<TType, TData, TVariables>,
+            <TData, TVariables: {...}, TContext: GqlContext>(
+                operation: GqlOperation<TData, TVariables>,
                 options: GqlFetchOptions<TVariables, TContext> = Object.freeze(
                     {},
                 ),
             ) => {
-                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;
-                    }
-                });
+                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],
     );

package/src/index.js

@@ -60,4 +60,10 @@ export {useData} from "./hooks/use-data.js";
 export {GqlRouter} from "./components/gql-router.js";
 export {useGql} from "./hooks/use-gql.js";
 export * from "./util/gql-error.js";
-export type {GqlContext, GqlOperation} from "./util/gql-types.js";
+export type {
+    GqlContext,
+    GqlOperation,
+    GqlOperationType,
+    GqlFetchOptions,
+    GqlFetchFn,
+} from "./util/gql-types.js";

package/src/util/gql-types.js

@@ -8,7 +8,6 @@ export type GqlOperationType = "mutation" | "query";
  * A GraphQL operation.
  */
 export type GqlOperation<
-    TType: GqlOperationType,
     // TData is not used to define a field on this type, but it is used
     // to ensure that calls using this operation will properly return the
     // correct data type.
@@ -20,13 +19,14 @@ export type GqlOperation<
     // eslint-disable-next-line no-unused-vars
     TVariables: {...} = Empty,
 > = {
-    type: TType,
+    type: GqlOperationType,
     id: string,
     // We allow other things here to be passed along to the fetch function.
     // For example, we might want to pass the full query/mutation definition
     // as a string here to allow that to be sent to an Apollo server that
     // expects it. This is a courtesy to calling code; these additional
     // values are ignored by WB Data, and passed through as-is.
+    [key: string]: mixed,
     ...
 };
 
@@ -37,8 +37,8 @@ export type GqlContext = {|
 /**
  * Functions that make fetches of GQL operations.
  */
-export type FetchFn<TType, TData, TVariables: {...}, TContext: GqlContext> = (
-    operation: GqlOperation<TType, TData, TVariables>,
+export type GqlFetchFn<TData, TVariables: {...}, TContext: GqlContext> = (
+    operation: GqlOperation<TData, TVariables>,
     variables: ?TVariables,
     context: TContext,
 ) => Promise<Response>;
@@ -47,7 +47,7 @@ export type FetchFn<TType, TData, TVariables: {...}, TContext: GqlContext> = (
  * The configuration stored in the GqlRouterContext context.
  */
 export type GqlRouterConfiguration<TContext: GqlContext> = {|
-    fetch: FetchFn<any, any, any, any>,
+    fetch: GqlFetchFn<any, any, any>,
     defaultContext: TContext,
 |};