@khanacademy/wonder-blocks-data 2.3.3 → 3.1.0

package/src/util/response-cache.js

@@ -1,13 +1,11 @@
 // @flow
 import {Server} from "@khanacademy/wonder-blocks-core";
 import MemoryCache from "./memory-cache.js";
-import NoCache from "./no-cache.js";
 
 import type {
     ValidData,
     CacheEntry,
     Cache,
-    ICache,
     IRequestHandler,
     ResponseCache as ResCache,
 } from "./types.js";
@@ -31,32 +29,17 @@ export class ResponseCache {
         return _default;
     }
 
-    _hydrationAndDefaultCache: MemoryCache<any, any>;
+    _hydrationCache: MemoryCache<any, any>;
     _ssrOnlyCache: ?MemoryCache<any, any>;
 
     constructor(
-        memoryCache: ?MemoryCache<any, any> = null,
+        hydrationCache: ?MemoryCache<any, any> = null,
         ssrOnlyCache: ?MemoryCache<any, any> = null,
     ) {
         this._ssrOnlyCache = Server.isServerSide()
             ? ssrOnlyCache || new MemoryCache()
             : undefined;
-        this._hydrationAndDefaultCache = memoryCache || new MemoryCache();
-    }
-
-    /**
-     * Returns the default cache to use for the given handler.
-     */
-    _defaultCache<TOptions, TData: ValidData>(
-        handler: IRequestHandler<TOptions, TData>,
-    ): ICache<TOptions, TData> {
-        if (handler.hydrate) {
-            return this._hydrationAndDefaultCache;
-        }
-
-        // If the handler doesn't want to hydrate, we return the SSR-only cache.
-        // If we are client-side, we return our non-caching implementation.
-        return this._ssrOnlyCache || NoCache.Default;
+        this._hydrationCache = hydrationCache || new MemoryCache();
     }
 
     _setCacheEntry<TOptions, TData: ValidData>(
@@ -65,15 +48,14 @@ export class ResponseCache {
         entry: CacheEntry<TData>,
     ): CacheEntry<TData> {
         const frozenEntry = Object.freeze(entry);
-
-        if (this._ssrOnlyCache == null && handler.cache != null) {
-            // We are not server-side, and our handler has its own cache,
-            // so we use that to store values.
-            handler.cache.store(handler, options, frozenEntry);
-        } else {
-            // We are either server-side, or our handler doesn't provide
-            // a caching override.
-            this._defaultCache(handler).store(handler, options, frozenEntry);
+        if (this._ssrOnlyCache != null) {
+            // We are server-side.
+            // We need to store this value.
+            if (handler.hydrate) {
+                this._hydrationCache.store(handler, options, frozenEntry);
+            } else {
+                this._ssrOnlyCache.store(handler, options, frozenEntry);
+            }
         }
         return frozenEntry;
     }
@@ -84,14 +66,14 @@ export class ResponseCache {
      * This can only be called if the cache is not already in use.
      */
     initialize: (source: ResCache) => void = (source) => {
-        if (this._hydrationAndDefaultCache.inUse) {
+        if (this._hydrationCache.inUse) {
             throw new Error(
                 "Cannot initialize data response cache more than once",
             );
         }
 
         try {
-            this._hydrationAndDefaultCache = new MemoryCache(source);
+            this._hydrationCache = new MemoryCache(source);
         } catch (e) {
             throw new Error(
                 `An error occurred trying to initialize the data response cache: ${e}`,
@@ -101,6 +83,8 @@ export class ResponseCache {
 
     /**
      * Cache data for a specific response.
+     *
+     * This is a noop when client-side.
      */
     cacheData: <TOptions, TData: ValidData>(
         handler: IRequestHandler<TOptions, TData>,
@@ -110,12 +94,12 @@ export class ResponseCache {
         handler: IRequestHandler<TOptions, TData>,
         options: TOptions,
         data: TData,
-    ): CacheEntry<TData> => {
-        return this._setCacheEntry(handler, options, {data});
-    };
+    ): CacheEntry<TData> => this._setCacheEntry(handler, options, {data});
 
     /**
      * Cache an error for a specific response.
+     *
+     * This is a noop when client-side.
      */
     cacheError: <TOptions, TData: ValidData>(
         handler: IRequestHandler<TOptions, TData>,
@@ -140,42 +124,27 @@ export class ResponseCache {
         handler: IRequestHandler<TOptions, TData>,
         options: TOptions,
     ): ?$ReadOnly<CacheEntry<TData>> => {
-        // If we're not server-side, and the handler has a custom cache
-        // let's try to use it.
-        if (this._ssrOnlyCache == null && handler.cache != null) {
-            const entry = handler.cache.retrieve(handler, options);
-            if (entry != null) {
-                // Custom cache has an entry, so use it.
-                return entry;
-            }
-        }
-
-        // Get the internal entry for the handler.
-        // This allows us to use our hydrated cache during hydration.
-        // If we just returned null when the custom cache didn't have it,
-        // we would never hydrate properly.
-        const internalEntry = this._defaultCache<TOptions, TData>(
-            handler,
-        ).retrieve(handler, options);
-
-        // If we are not server-side and we hydrated something that the custom
-        // cache didn't have, we need to make sure the custom cache contains
-        // that value.
-        if (
-            this._ssrOnlyCache == null &&
-            handler.cache != null &&
-            internalEntry != null
-        ) {
-            // Yes, if this throws, we will have a problem. We want that.
-            // Bad cache implementations should be overt.
-            handler.cache.store(handler, options, internalEntry);
+        // Get the cached entry for this value.
+        // If the handler wants WB Data to hydrate (i.e. handler.hydrate is
+        // true), we use our hydration cache. Otherwise, if we're server-side
+        // we use our SSR-only cache. Otherwise, there's no entry to return.
+        const cache = handler.hydrate
+            ? this._hydrationCache
+            : Server.isServerSide()
+            ? this._ssrOnlyCache
+            : undefined;
+        const internalEntry = cache?.retrieve(handler, options);
 
-            // We now delete this from our in-memory cache as we don't need it.
+        // If we are not server-side and we hydrated something, let's clear
+        // that from the hydration cache to save memory.
+        if (this._ssrOnlyCache == null && internalEntry != null) {
+            // We now delete this from our hydration cache as we don't need it.
             // This does mean that if another handler of the same type but
-            // without a custom cache won't get the value, but that's not an
-            // expected valid usage of this framework - two handlers with
-            // different caching options shouldn't be using the same type name.
-            this._hydrationAndDefaultCache.remove(handler, options);
+            // without some sort of linked cache won't get the value, but
+            // that's not an expected use-case. If two different places use the
+            // same handler and options (i.e. the same request), then the
+            // handler should cater to that to ensure they share the result.
+            this._hydrationCache.remove(handler, options);
         }
         return internalEntry;
     };
@@ -199,31 +168,19 @@ export class ResponseCache {
         // to match the key of the entry we're removing, but that's an
         // inefficient way to remove a single item, so let's not do that.
 
-        // If we're not server-side, and the handler has a custom cache
-        // let's try to use it.
-        const customCache = this._ssrOnlyCache == null ? handler.cache : null;
-        const removedCustom: boolean = !!customCache?.remove(handler, options);
-
-        // Delete the entry from our internal cache.
-        // Even if we have a custom cache, we want to make sure we still
-        // removed the same value from internal cache since this could be
-        // getting called before hydration for some complex advanced usage
-        // reason.
-        return (
-            this._defaultCache(handler).remove(handler, options) ||
-            removedCustom
-        );
+        // Delete the entry from the appropriate cache.
+        return handler.hydrate
+            ? this._hydrationCache.remove(handler, options)
+            : this._ssrOnlyCache?.remove(handler, options) ?? false;
     };
 
     /**
      * Remove from cache, any entries matching the given handler and predicate.
      *
-     * This will, if present therein, remove matching values from the custom
-     * cache associated with the handler and the framework in-memory cache.
+     * This will, if present therein, remove matching values from the framework
+     * in-memory cache.
      *
-     * It returns a count of all records removed. This is not a count of unique
-     * keys, but of unique entries. So if the same key is removed from both the
-     * framework and custom caches, that will be 2 records removed.
+     * It returns a count of all records removed.
      */
     removeAll: <TOptions, TData: ValidData>(
         handler: IRequestHandler<TOptions, TData>,
@@ -238,36 +195,19 @@ export class ResponseCache {
             cachedEntry: $ReadOnly<CacheEntry<TData>>,
         ) => boolean,
     ): number => {
-        // If we're not server-side, and the handler has a custom cache
-        // let's try to use it.
-        const customCache = this._ssrOnlyCache == null ? handler.cache : null;
-        const removedCountCustom: number =
-            customCache?.removeAll(handler, predicate) || 0;
-
-        // Apply the predicate to what we have in our internal cached.
-        // Even if we have a custom cache, we want to make sure we still
-        // removed the same value from internal cache since this could be
-        // getting called before hydration for some complex advanced usage
-        // reason.
-        const removedCount = this._defaultCache(handler).removeAll(
-            handler,
-            predicate,
-        );
-
-        // We have no idea which keys were removed from which caches,
-        // so we can't dedupe the remove counts based on keys.
-        // That's why we return the total records deleted rather than the
-        // total keys deleted.
-        return removedCount + removedCountCustom;
+        // Apply the predicate to what we have in the appropriate cache.
+        return handler.hydrate
+            ? this._hydrationCache.removeAll(handler, predicate)
+            : this._ssrOnlyCache?.removeAll(handler, predicate) ?? 0;
     };
 
     /**
      * Deep clone the hydration cache.
      *
-     * By design, this does not clone anything held in custom caches.
+     * By design, this only clones the data that is to be used for hydration.
      */
     cloneHydratableData: () => $ReadOnly<Cache> = (): $ReadOnly<Cache> => {
         // We return our hydration cache only.
-        return this._hydrationAndDefaultCache.cloneData();
+        return this._hydrationCache.cloneData();
     };
 }

package/src/util/result-from-cache-entry.js

@@ -0,0 +1,38 @@
+// @flow
+import type {ValidData, CacheEntry, Result} from "./types.js";
+
+/**
+ * Turns a cache entry into a stateful result.
+ */
+export const resultFromCacheEntry = <TData: ValidData>(
+    cacheEntry: ?CacheEntry<TData>,
+): Result<TData> => {
+    // No cache entry means we didn't load one yet.
+    if (cacheEntry == null) {
+        return {
+            status: "loading",
+        };
+    }
+
+    const {data, error} = cacheEntry;
+
+    if (data != null) {
+        return {
+            status: "success",
+            data,
+        };
+    }
+
+    if (error == null) {
+        // We should never get here ever.
+        return {
+            status: "error",
+            error: "Loaded result has invalid state where data and error are missing",
+        };
+    }
+
+    return {
+        status: "error",
+        error,
+    };
+};

package/src/util/types.js

@@ -1,16 +1,19 @@
 // @flow
 export type ValidData = string | boolean | number | {...};
 
+export type Status = "loading" | "success" | "error";
+
 export type Result<TData: ValidData> =
     | {|
-          loading: true,
-          data?: void,
-          error?: void,
+          status: "loading",
       |}
     | {|
-          loading: false,
+          status: "success",
           data?: TData,
-          error?: string,
+      |}
+    | {|
+          status: "error",
+          error: string,
       |};
 
 export type CacheEntry<TData: ValidData> =
@@ -28,24 +31,12 @@ type HandlerSubcache = {
     ...
 };
 
-export type InterceptCacheFn<TOptions, TData: ValidData> = (
-    options: TOptions,
-    cacheEntry: ?$ReadOnly<CacheEntry<TData>>,
-) => ?$ReadOnly<CacheEntry<TData>>;
-
 export type InterceptFulfillRequestFn<TOptions, TData: ValidData> = (
     options: TOptions,
 ) => ?Promise<TData>;
 
-export type InterceptShouldRefreshCacheFn<TOptions, TData: ValidData> = (
-    options: TOptions,
-    cachedEntry: ?$ReadOnly<CacheEntry<TData>>,
-) => ?boolean;
-
 export type Interceptor = {|
-    getEntry?: ?InterceptCacheFn<any, any>,
-    fulfillRequest?: ?InterceptFulfillRequestFn<any, any>,
-    shouldRefreshCache?: ?InterceptShouldRefreshCacheFn<any, any>,
+    fulfillRequest: InterceptFulfillRequestFn<any, any>,
 |};
 
 export type InterceptContextData = {
@@ -120,31 +111,19 @@ export interface IRequestHandler<TOptions, TData: ValidData> {
      */
     get type(): string;
 
-    /**
-     * A custom cache to use with data that this handler requests.
-     * This only affects client-side caching of data.
-     */
-    get cache(): ?ICache<TOptions, TData>;
-
     /**
      * When true, server-side results are cached and hydrated in the client.
      * When false, the server-side cache is not used and results are not
      * hydrated.
      * This should only be set to false if something is ensuring that the
      * hydrated client result will match the server result.
-     */
-    get hydrate(): boolean;
-
-    /**
-     * Determine if the cached data should be refreshed.
      *
-     * If this returns true, the framework will fulfill a new request by
-     * calling `fulfillRequest`.
+     * For example, if Apollo is used to handle GraphQL requests in SSR mode,
+     * it has its own cache that is used to hydrate the client. Setting this
+     * to false makes sure we don't store the data twice, which would
+     * unnecessarily bloat the data sent back to the client.
      */
-    shouldRefreshCache(
-        options: TOptions,
-        cachedEntry: ?$ReadOnly<CacheEntry<TData>>,
-    ): boolean;
+    get hydrate(): boolean;
 
     /**
      * Get the key to use for a given request. This should be idempotent for a

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/components/__tests__/intercept-cache.test.js

@@ -1,124 +0,0 @@
-// @flow
-import * as React from "react";
-import {mount} from "enzyme";
-
-import InterceptContext from "../intercept-context.js";
-import InterceptData from "../intercept-data.js";
-import InterceptCache from "../intercept-cache.js";
-
-import type {IRequestHandler} from "../../util/types.js";
-
-describe("InterceptCache", () => {
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
-
-    it("should update context with getEntry", () => {
-        // Arrange
-        const fakeHandler: IRequestHandler<string, string> = {
-            fulfillRequest: () => Promise.resolve("data"),
-            getKey: (o) => o,
-            shouldRefreshCache: () => false,
-            type: "MY_HANDLER",
-            cache: null,
-            hydrate: true,
-        };
-        const getEntryFn = jest.fn();
-        const captureContextFn = jest.fn();
-
-        // Act
-        mount(
-            <InterceptCache handler={fakeHandler} getEntry={getEntryFn}>
-                <InterceptContext.Consumer>
-                    {captureContextFn}
-                </InterceptContext.Consumer>
-            </InterceptCache>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith(
-            expect.objectContaining({
-                MY_HANDLER: {
-                    getEntry: getEntryFn,
-                },
-            }),
-        );
-    });
-
-    it("should override parent InterceptData", () => {
-        // Arrange
-        const fakeHandler: IRequestHandler<string, string> = {
-            fulfillRequest: () => Promise.resolve("data"),
-            getKey: (o) => o,
-            shouldRefreshCache: () => false,
-            type: "MY_HANDLER",
-            cache: null,
-            hydrate: true,
-        };
-        const getEntry1Fn = jest.fn();
-        const getEntry2Fn = jest.fn();
-        const captureContextFn = jest.fn();
-
-        // Act
-        mount(
-            <InterceptCache handler={fakeHandler} getEntry={getEntry1Fn}>
-                <InterceptCache handler={fakeHandler} getEntry={getEntry2Fn}>
-                    <InterceptContext.Consumer>
-                        {captureContextFn}
-                    </InterceptContext.Consumer>
-                </InterceptCache>
-            </InterceptCache>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith(
-            expect.objectContaining({
-                MY_HANDLER: {
-                    getEntry: getEntry2Fn,
-                },
-            }),
-        );
-    });
-
-    it("should not change InterceptData methods on existing interceptor", () => {
-        // Arrange
-        const fakeHandler: IRequestHandler<string, string> = {
-            fulfillRequest: () => Promise.resolve("data"),
-            getKey: (o) => o,
-            shouldRefreshCache: () => false,
-            type: "MY_HANDLER",
-            cache: null,
-            hydrate: true,
-        };
-        const fulfillRequestFn = jest.fn();
-        const shouldRefreshCacheFn = jest.fn();
-        const getEntryFn = jest.fn();
-        const captureContextFn = jest.fn();
-
-        // Act
-        mount(
-            <InterceptData
-                handler={fakeHandler}
-                fulfillRequest={fulfillRequestFn}
-                shouldRefreshCache={shouldRefreshCacheFn}
-            >
-                <InterceptCache handler={fakeHandler} getEntry={getEntryFn}>
-                    <InterceptContext.Consumer>
-                        {captureContextFn}
-                    </InterceptContext.Consumer>
-                </InterceptCache>
-            </InterceptData>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith(
-            expect.objectContaining({
-                MY_HANDLER: {
-                    fulfillRequest: fulfillRequestFn,
-                    shouldRefreshCache: shouldRefreshCacheFn,
-                    getEntry: getEntryFn,
-                },
-            }),
-        );
-    });
-});