@khanacademy/wonder-blocks-data 7.0.1 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-data
 
+## 8.0.0
+
+### Major Changes
+
+-   0720470e: Renamed `initializeCache` to `initializeHydrationCache`, deleted `removeFromCache`, renamed `removeAllFromCache` to `purgeHydrationCache`
+-   cf9ed87f: Add `fetchPolicy` to `useCachedEffect` options, add `refetch` to `useCachedEffect` return value (return value is now a tuple of [result, refetch]), add abort API to request fulfillment (not truly aborting though)
+-   b882b082: Stop exporting `RequestFulfillment`, update `useCachedEffect` to consider scope with sharing inflight requests
+-   0720470e: Rename `fulfillAllDataRequests` to `fetchTrackedRequests`, rename `hasUnfulfilledRequests` to `hasTrackedRequestsToBeFetched`
+-   0720470e: Renamed `clearSharedCache` to `purgeSharedCache`
+
+### Minor Changes
+
+-   0720470e: Add `purgeCaches` export for purging all caches with one call
+-   75c10036: Add `abortInflightRequests` to exports
+-   a85f2f3a: Provide `getGqlRequestId` function
+
+### Patch Changes
+
+-   1385f468: Removed unnecessary `new` on tracking context creation
+
 ## 7.0.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -4,11 +4,14 @@ import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import { useContext, useRef, useMemo, useCallback } from 'react';
 
+const FetchPolicy = require("flow-enums-runtime").Mirrored(["CacheBeforeNetwork", "CacheAndNetwork", "CacheOnly", "NetworkOnly"]);
+
 const DataErrors = Object.freeze({
   Unknown: "Unknown",
   Internal: "Internal",
   InvalidInput: "InvalidInput",
   Network: "Network",
+  NotAllowed: "NotAllowed",
   Parse: "Parse",
   Hydrated: "Hydrated"
 });
@@ -180,20 +183,14 @@ class SsrCache {
       return internalEntry;
     };
 
-    this.remove = id => {
-      var _this$_ssrOnlyCache$p, _this$_ssrOnlyCache2;
-
-      return this._hydrationCache.purge(DefaultScope$2, id) || ((_this$_ssrOnlyCache$p = (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.purge(DefaultScope$2, id)) != null ? _this$_ssrOnlyCache$p : false);
-    };
-
-    this.removeAll = predicate => {
-      var _this$_ssrOnlyCache3;
+    this.purgeData = predicate => {
+      var _this$_ssrOnlyCache2;
 
       const realPredicate = predicate ? (_, key, cachedEntry) => predicate(key, cachedEntry) : undefined;
 
       this._hydrationCache.purgeAll(realPredicate);
 
-      (_this$_ssrOnlyCache3 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache3.purgeAll(realPredicate);
+      (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.purgeAll(realPredicate);
     };
 
     this.cloneHydratableData = () => {
@@ -215,9 +212,9 @@ class SsrCache {
       if (hydrate) {
         this._hydrationCache.set(DefaultScope$2, id, frozenEntry);
       } else {
-        var _this$_ssrOnlyCache4;
+        var _this$_ssrOnlyCache3;
 
-        (_this$_ssrOnlyCache4 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache4.set(DefaultScope$2, id, frozenEntry);
+        (_this$_ssrOnlyCache3 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache3.set(DefaultScope$2, id, frozenEntry);
       }
     }
 
@@ -226,6 +223,9 @@ class SsrCache {
 
 }
 
+const initializeHydrationCache = source => SsrCache.Default.initialize(source);
+const purgeHydrationCache = predicate => SsrCache.Default.purgeData(predicate);
+
 let _default$1;
 
 class RequestFulfillment {
@@ -268,6 +268,14 @@ class RequestFulfillment {
       this._requests[id] = request;
       return request;
     };
+
+    this.abort = id => {
+      delete this._requests[id];
+    };
+
+    this.abortAll = () => {
+      Object.keys(this._requests).forEach(id => this.abort(id));
+    };
   }
 
   static get Default() {
@@ -280,7 +288,7 @@ class RequestFulfillment {
 
 }
 
-const TrackerContext = new React.createContext(null);
+const TrackerContext = React.createContext(null);
 
 let _default;
 
@@ -352,6 +360,77 @@ class RequestTracker {
 
 }
 
+const SSRCheck = () => {
+  if (Server.isServerSide()) {
+    return null;
+  }
+
+  if (process.env.NODE_ENV === "production") {
+    return new DataError("No CSR tracking", DataErrors.NotAllowed);
+  } else {
+    return new DataError("Data requests are not tracked for fulfillment when when client-side", DataErrors.NotAllowed);
+  }
+};
+
+const fetchTrackedRequests = () => {
+  const ssrCheck = SSRCheck();
+
+  if (ssrCheck != null) {
+    return Promise.reject(ssrCheck);
+  }
+
+  return RequestTracker.Default.fulfillTrackedRequests();
+};
+const hasTrackedRequestsToBeFetched = () => {
+  const ssrCheck = SSRCheck();
+
+  if (ssrCheck != null) {
+    throw ssrCheck;
+  }
+
+  return RequestTracker.Default.hasUnfulfilledRequests;
+};
+const abortInflightRequests = () => {
+  RequestFulfillment.Default.abortAll();
+};
+
+const cache$1 = new ScopedInMemoryCache();
+const purgeSharedCache = (scope = "") => {
+  if (scope && typeof scope === "string") {
+    cache$1.purgeScope(scope);
+  } else {
+    cache$1.purgeAll();
+  }
+};
+const useSharedCache = (id, scope, initialValue) => {
+  if (!id || typeof id !== "string") {
+    throw new DataError("id must be a non-empty string", DataErrors.InvalidInput);
+  }
+
+  if (!scope || typeof scope !== "string") {
+    throw new DataError("scope must be a non-empty string", DataErrors.InvalidInput);
+  }
+
+  const cacheValue = React.useCallback(value => value == null ? cache$1.purge(scope, id) : cache$1.set(scope, id, value), [id, scope]);
+  let currentValue = cache$1.get(scope, id);
+
+  if (currentValue == null && initialValue !== undefined) {
+    const value = typeof initialValue === "function" ? initialValue() : initialValue;
+
+    if (value != null) {
+      cacheValue(value);
+      currentValue = value;
+    }
+  }
+
+  return [currentValue, cacheValue];
+};
+
+const purgeCaches = () => {
+  purgeSharedCache();
+  purgeHydrationCache();
+};
+
 class TrackData extends React.Component {
   render() {
     if (!Server.isServerSide()) {
@@ -438,41 +517,12 @@ const useServerEffect = (requestId, handler, options = {}) => {
   return cachedResult == null ? null : resultFromCachedResponse(cachedResult);
 };
 
-const cache = new ScopedInMemoryCache();
-const clearSharedCache = (scope = "") => {
-  if (scope && typeof scope === "string") {
-    cache.purgeScope(scope);
-  } else {
-    cache.purgeAll();
-  }
-};
-const useSharedCache = (id, scope, initialValue) => {
-  if (!id || typeof id !== "string") {
-    throw new DataError("id must be a non-empty string", DataErrors.InvalidInput);
-  }
-
-  if (!scope || typeof scope !== "string") {
-    throw new DataError("scope must be a non-empty string", DataErrors.InvalidInput);
-  }
-
-  const cacheValue = React.useCallback(value => value == null ? cache.purge(scope, id) : cache.set(scope, id, value), [id, scope]);
-  let currentValue = cache.get(scope, id);
-
-  if (currentValue == null && initialValue !== undefined) {
-    const value = typeof initialValue === "function" ? initialValue() : initialValue;
-
-    if (value != null) {
-      cacheValue(value);
-      currentValue = value;
-    }
-  }
-
-  return [currentValue, cacheValue];
-};
-
 const DefaultScope$1 = "useCachedEffect";
 const useCachedEffect = (requestId, handler, options = {}) => {
+  var _ref;
+
   const {
+    fetchPolicy = FetchPolicy.CacheBeforeNetwork,
     skip: hardSkip = false,
     retainResultOnChange = false,
     onResultChanged,
@@ -481,55 +531,102 @@ const useCachedEffect = (requestId, handler, options = {}) => {
   const interceptedHandler = useRequestInterception(requestId, handler);
   const [mostRecentResult, setMostRecentResult] = useSharedCache(requestId, scope);
   const forceUpdate = useForceUpdate();
-  const setCacheAndNotify = React.useCallback(value => {
-    setMostRecentResult(value);
+  const networkResultRef = React.useRef();
+  const currentRequestRef = React.useRef();
+  const fetchRequest = React.useMemo(() => {
+    var _currentRequestRef$cu;
 
-    if (onResultChanged != null) {
-      onResultChanged(value);
-    } else {
-      forceUpdate();
-    }
-  }, [setMostRecentResult, onResultChanged, forceUpdate]);
-  const requestIdRef = React.useRef();
-  const previousRequestId = requestIdRef.current;
-  const softSkip = React.useMemo(() => {
-    if (requestId === previousRequestId) {
-      return true;
-    }
+    (_currentRequestRef$cu = currentRequestRef.current) == null ? void 0 : _currentRequestRef$cu.cancel();
+    currentRequestRef.current = null;
+    networkResultRef.current = null;
 
-    if (mostRecentResult != null) {
-      return true;
-    }
+    const fetchFn = () => {
+      var _currentRequestRef$cu2, _currentRequestRef$cu3;
 
-    return false;
-  }, [requestId, previousRequestId, mostRecentResult]);
-  React.useEffect(() => {
-    let cancel = false;
+      if (fetchPolicy === FetchPolicy.CacheOnly) {
+        throw new DataError("Cannot fetch with CacheOnly policy", DataErrors.NotAllowed);
+      }
 
-    if (hardSkip || softSkip) {
-      return;
-    }
+      const request = RequestFulfillment.Default.fulfill(`${requestId}|${scope}`, {
+        handler: interceptedHandler
+      });
 
-    requestIdRef.current = requestId;
-    RequestFulfillment.Default.fulfill(requestId, {
-      handler: interceptedHandler
-    }).then(result => {
-      if (cancel) {
+      if (request === ((_currentRequestRef$cu2 = currentRequestRef.current) == null ? void 0 : _currentRequestRef$cu2.request)) {
         return;
       }
 
-      setCacheAndNotify(result);
+      networkResultRef.current = null;
+      (_currentRequestRef$cu3 = currentRequestRef.current) == null ? void 0 : _currentRequestRef$cu3.cancel();
+      let cancel = false;
+      request.then(result => {
+        currentRequestRef.current = null;
+
+        if (cancel) {
+          return;
+        }
+
+        setMostRecentResult(result);
+        networkResultRef.current = result;
+
+        if (onResultChanged != null) {
+          onResultChanged(result);
+        } else {
+          forceUpdate();
+        }
+
+        return;
+      });
+      currentRequestRef.current = {
+        requestId,
+        request,
+
+        cancel() {
+          cancel = true;
+          RequestFulfillment.Default.abort(requestId);
+        }
+
+      };
+    };
+
+    return fetchFn;
+  }, [requestId, onResultChanged, forceUpdate, setMostRecentResult, fetchPolicy]);
+  const requestIdRef = React.useRef(requestId);
+  const shouldFetch = React.useMemo(() => {
+    if (hardSkip) {
+      return false;
+    }
+
+    switch (fetchPolicy) {
+      case FetchPolicy.CacheOnly:
+        return false;
+
+      case FetchPolicy.CacheBeforeNetwork:
+        return mostRecentResult == null || requestId !== requestIdRef.current;
+
+      case FetchPolicy.CacheAndNetwork:
+      case FetchPolicy.NetworkOnly:
+        return networkResultRef.current == null;
+    }
+  }, [requestId, mostRecentResult, fetchPolicy, hardSkip]);
+  requestIdRef.current = requestId;
+  React.useEffect(() => {
+    if (!shouldFetch) {
       return;
-    });
+    }
+
+    fetchRequest();
     return () => {
-      cancel = true;
+      var _currentRequestRef$cu4;
+
+      (_currentRequestRef$cu4 = currentRequestRef.current) == null ? void 0 : _currentRequestRef$cu4.cancel();
+      currentRequestRef.current = null;
     };
-  }, [hardSkip, requestId]);
+  }, [shouldFetch, fetchRequest]);
   const lastResultAgnosticOfIdRef = React.useRef(Status.loading());
   const loadingResult = retainResultOnChange ? lastResultAgnosticOfIdRef.current : Status.loading();
-  const result = React.useMemo(() => mostRecentResult != null ? mostRecentResult : loadingResult, [mostRecentResult, loadingResult]);
+  const result = (_ref = fetchPolicy === FetchPolicy.NetworkOnly ? networkResultRef.current : mostRecentResult) != null ? _ref : loadingResult;
   lastResultAgnosticOfIdRef.current = result;
-  return result;
+  return [result, fetchRequest];
 };
 
 const WhenClientSide = require("flow-enums-runtime").Mirrored(["DoNotHydrate", "ExecuteWhenNoResult", "ExecuteWhenNoSuccessResult", "AlwaysExecute"]);
@@ -564,11 +661,12 @@ const useHydratableEffect = (requestId, handler, options = {}) => {
     }
   }, [serverResult]);
   useSharedCache(requestId, scope, getDefaultCacheValue);
-  const clientResult = useCachedEffect(requestId, handler, {
+  const [clientResult] = useCachedEffect(requestId, handler, {
     skip,
     onResultChanged,
     retainResultOnChange,
-    scope
+    scope,
+    fetchPolicy: FetchPolicy.CacheBeforeNetwork
   });
   return serverResult != null ? serverResult : clientResult;
 };
@@ -598,6 +696,110 @@ const InterceptRequests = ({
   }, children);
 };
 
+const toString = valid => {
+  var _JSON$stringify;
+
+  if (typeof valid === "string") {
+    return valid;
+  }
+
+  return (_JSON$stringify = JSON.stringify(valid)) != null ? _JSON$stringify : "";
+};
+
+const getGqlRequestId = (operation, variables, context) => {
+  const parts = [];
+  const sortableContext = new URLSearchParams(context);
+  sortableContext.sort();
+  parts.push(sortableContext.toString());
+  parts.push(operation.id);
+
+  if (variables != null) {
+    const stringifiedVariables = Object.keys(variables).reduce((acc, key) => {
+      acc[key] = toString(variables[key]);
+      return acc;
+    }, {});
+    const sortableVariables = new URLSearchParams(stringifiedVariables);
+    sortableVariables.sort();
+    parts.push(sortableVariables.toString());
+  }
+
+  return parts.join("|");
+};
+
+const DocumentTypes = Object.freeze({
+  query: "query",
+  mutation: "mutation"
+});
+const cache = new Map();
+function graphQLDocumentNodeParser(document) {
+  var _definition$name;
+
+  const cached = cache.get(document);
+
+  if (cached) {
+    return cached;
+  }
+
+  if (!(document != null && document.kind)) {
+    if (process.env.NODE_ENV === "production") {
+      throw new DataError("Bad DocumentNode", DataErrors.InvalidInput);
+    } else {
+      throw new DataError(`Argument of ${JSON.stringify(document)} passed to parser was not a valid GraphQL ` + `DocumentNode. You may need to use 'graphql-tag' or another method ` + `to convert your operation into a document`, DataErrors.InvalidInput);
+    }
+  }
+
+  const fragments = document.definitions.filter(x => x.kind === "FragmentDefinition");
+  const queries = document.definitions.filter(x => x.kind === "OperationDefinition" && x.operation === "query");
+  const mutations = document.definitions.filter(x => x.kind === "OperationDefinition" && x.operation === "mutation");
+  const subscriptions = document.definitions.filter(x => x.kind === "OperationDefinition" && x.operation === "subscription");
+
+  if (fragments.length && !queries.length && !mutations.length) {
+    if (process.env.NODE_ENV === "production") {
+      throw new DataError("Fragment only", DataErrors.InvalidInput);
+    } else {
+      throw new DataError(`Passing only a fragment to 'graphql' is not supported. ` + `You must include a query or mutation as well`, DataErrors.InvalidInput);
+    }
+  }
+
+  if (subscriptions.length) {
+    if (process.env.NODE_ENV === "production") {
+      throw new DataError("No subscriptions", DataErrors.InvalidInput);
+    } else {
+      throw new DataError(`We do not support subscriptions. ` + `${JSON.stringify(document)} had ${subscriptions.length} subscriptions`, DataErrors.InvalidInput);
+    }
+  }
+
+  if (queries.length + mutations.length > 1) {
+    if (process.env.NODE_ENV === "production") {
+      throw new DataError("Too many ops", DataErrors.InvalidInput);
+    } else {
+      throw new DataError(`We only support one query or mutation per component. ` + `${JSON.stringify(document)} had ${queries.length} queries and ` + `${mutations.length} mutations. `, DataErrors.InvalidInput);
+    }
+  }
+
+  const type = queries.length ? DocumentTypes.query : DocumentTypes.mutation;
+  const definitions = queries.length ? queries : mutations;
+  const definition = definitions[0];
+  const variables = definition.variableDefinitions || [];
+  const name = ((_definition$name = definition.name) == null ? void 0 : _definition$name.kind) === "Name" ? definition.name.value : "data";
+  const payload = {
+    name,
+    type,
+    variables
+  };
+  cache.set(document, payload);
+  return payload;
+}
+
+const toGqlOperation = documentNode => {
+  const definition = graphQLDocumentNodeParser(documentNode);
+  const wbDataOperation = {
+    id: definition.name,
+    type: definition.type
+  };
+  return wbDataOperation;
+};
+
 const GqlRouterContext = React.createContext(null);
 
 const GqlRouter = ({
@@ -739,22 +941,4 @@ const useGql = (context = {}) => {
   return gqlFetch;
 };
 
-const initializeCache = source => SsrCache.Default.initialize(source);
-const fulfillAllDataRequests = () => {
-  if (!Server.isServerSide()) {
-    return Promise.reject(new Error("Data requests are not tracked when client-side"));
-  }
-
-  return RequestTracker.Default.fulfillTrackedRequests();
-};
-const hasUnfulfilledRequests = () => {
-  if (!Server.isServerSide()) {
-    throw new Error("Data requests are not tracked when client-side");
-  }
-
-  return RequestTracker.Default.hasUnfulfilledRequests;
-};
-const removeFromCache = id => SsrCache.Default.remove(id);
-const removeAllFromCache = predicate => SsrCache.Default.removeAll(predicate);
-
-export { Data, DataError, DataErrors, GqlError, GqlErrors, GqlRouter, InterceptRequests, RequestFulfillment, ScopedInMemoryCache, SerializableInMemoryCache, Status, TrackData, WhenClientSide, clearSharedCache, fulfillAllDataRequests, hasUnfulfilledRequests, initializeCache, removeAllFromCache, removeFromCache, useCachedEffect, useGql, useHydratableEffect, useServerEffect, useSharedCache };
+export { Data, DataError, DataErrors, FetchPolicy, GqlError, GqlErrors, GqlRouter, InterceptRequests, ScopedInMemoryCache, SerializableInMemoryCache, Status, TrackData, WhenClientSide, abortInflightRequests, fetchTrackedRequests, getGqlRequestId, graphQLDocumentNodeParser, hasTrackedRequestsToBeFetched, initializeHydrationCache, purgeCaches, purgeHydrationCache, purgeSharedCache, toGqlOperation, useCachedEffect, useGql, useHydratableEffect, useServerEffect, useSharedCache };