@khanacademy/wonder-blocks-data 2.3.3 → 3.1.0

package/src/components/__tests__/gql-router.test.js

@@ -0,0 +1,64 @@
+// @flow
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {GqlRouterContext} from "../../util/gql-router-context.js";
+import {GqlRouter} from "../gql-router.js";
+
+describe("GqlRouter", () => {
+    it("should provide the GqlRouterContext as configured", async () => {
+        // Arrange
+        const defaultContext = {
+            foo: "bar",
+        };
+        const fetch = jest.fn();
+        const CaptureContext = ({captureFn}) => {
+            captureFn(React.useContext(GqlRouterContext));
+            return null;
+        };
+
+        // Act
+        const result = await new Promise((resolve, reject) => {
+            render(
+                <GqlRouter defaultContext={defaultContext} fetch={fetch}>
+                    <CaptureContext captureFn={resolve} />
+                </GqlRouter>,
+            );
+        });
+
+        // Assert
+        expect(result).toStrictEqual({
+            defaultContext,
+            fetch,
+        });
+    });
+
+    it("should not render React.memo-ized children if props remain the same", () => {
+        // Arrange
+        const defaultContext = {
+            foo: "bar",
+        };
+        const fetch = jest.fn();
+        let renderCount = 0;
+        const Child = React.memo(() => {
+            const context = React.useContext(GqlRouterContext);
+            renderCount++;
+            return <div>{JSON.stringify(context)}</div>;
+        });
+
+        // Act
+        const {rerender} = render(
+            <GqlRouter defaultContext={defaultContext} fetch={fetch}>
+                <Child />
+            </GqlRouter>,
+        );
+        rerender(
+            <GqlRouter defaultContext={defaultContext} fetch={fetch}>
+                <Child />
+            </GqlRouter>,
+        );
+
+        // Assert
+        expect(renderCount).toBe(1);
+    });
+});

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

@@ -1,10 +1,9 @@
 // @flow
 import * as React from "react";
-import {mount} from "enzyme";
+import {render} from "@testing-library/react";
 
 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";
 
@@ -13,31 +12,22 @@ describe("InterceptData", () => {
         jest.resetAllMocks();
     });
 
-    it.each([
-        ["with only fulfillRequest method", {fulfillRequest: jest.fn()}],
-        [
-            "with only shouldRefreshCache method",
-            {shouldRefreshCache: jest.fn()},
-        ],
-        [
-            "with both fulfillRequest and shouldRefreshCache methods",
-            {fulfillRequest: jest.fn(), shouldRefreshCache: jest.fn()},
-        ],
-    ])("should update context %s", (_, props) => {
+    it("should update context with fulfillRequest method", () => {
         // Arrange
         const fakeHandler: IRequestHandler<string, string> = {
             fulfillRequest: () => Promise.resolve("data"),
             getKey: (o) => o,
-            shouldRefreshCache: () => false,
             type: "MY_HANDLER",
-            cache: null,
             hydrate: true,
         };
-        props.handler = fakeHandler;
+        const props = {
+            handler: fakeHandler,
+            fulfillRequest: jest.fn(),
+        };
         const captureContextFn = jest.fn();
 
         // Act
-        mount(
+        render(
             <InterceptData {...props}>
                 <InterceptContext.Consumer>
                     {captureContextFn}
@@ -49,8 +39,7 @@ describe("InterceptData", () => {
         expect(captureContextFn).toHaveBeenCalledWith(
             expect.objectContaining({
                 MY_HANDLER: {
-                    fulfillRequest: props.fulfillRequest || null,
-                    shouldRefreshCache: props.shouldRefreshCache || null,
+                    fulfillRequest: props.fulfillRequest,
                 },
             }),
         );
@@ -61,28 +50,23 @@ describe("InterceptData", () => {
         const fakeHandler: IRequestHandler<string, string> = {
             fulfillRequest: () => Promise.resolve("data"),
             getKey: (o) => o,
-            shouldRefreshCache: () => false,
             type: "MY_HANDLER",
             cache: null,
             hydrate: true,
         };
         const fulfillRequest1Fn = jest.fn();
-        const shouldRefreshCache1Fn = jest.fn();
         const fulfillRequest2Fn = jest.fn();
-        const shouldRefreshCache2Fn = jest.fn();
         const captureContextFn = jest.fn();
 
         // Act
-        mount(
+        render(
             <InterceptData
                 handler={fakeHandler}
                 fulfillRequest={fulfillRequest1Fn}
-                shouldRefreshCache={shouldRefreshCache1Fn}
             >
                 <InterceptData
                     handler={fakeHandler}
                     fulfillRequest={fulfillRequest2Fn}
-                    shouldRefreshCache={shouldRefreshCache2Fn}
                 >
                     <InterceptContext.Consumer>
                         {captureContextFn}
@@ -96,47 +80,6 @@ describe("InterceptData", () => {
             expect.objectContaining({
                 MY_HANDLER: {
                     fulfillRequest: fulfillRequest2Fn,
-                    shouldRefreshCache: shouldRefreshCache2Fn,
-                },
-            }),
-        );
-    });
-
-    it("should not change InterceptCache 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 getEntryFn = jest.fn();
-        const captureContextFn = jest.fn();
-
-        // Act
-        mount(
-            <InterceptCache handler={fakeHandler} getEntry={getEntryFn}>
-                <InterceptData
-                    handler={fakeHandler}
-                    fulfillRequest={fulfillRequestFn}
-                >
-                    <InterceptContext.Consumer>
-                        {captureContextFn}
-                    </InterceptContext.Consumer>
-                </InterceptData>
-            </InterceptCache>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith(
-            expect.objectContaining({
-                MY_HANDLER: {
-                    fulfillRequest: fulfillRequestFn,
-                    shouldRefreshCache: null,
-                    getEntry: getEntryFn,
                 },
             }),
         );

package/src/components/__tests__/track-data.test.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 import {Server} from "@khanacademy/wonder-blocks-core";
-import {mount, shallow} from "enzyme";
+import {render, screen} from "@testing-library/react";
 
 import TrackData from "../track-data.js";
 import {RequestTracker, TrackerContext} from "../../util/request-tracking.js";
@@ -16,7 +16,7 @@ describe("TrackData", () => {
         jest.spyOn(Server, "isServerSide").mockReturnValue(false);
 
         // Act
-        const underTest = () => shallow(<TrackData>SOME CHILDREN</TrackData>);
+        const underTest = () => render(<TrackData>SOME CHILDREN</TrackData>);
 
         // Assert
         expect(underTest).toThrowErrorMatchingInlineSnapshot(
@@ -29,10 +29,11 @@ describe("TrackData", () => {
         jest.spyOn(Server, "isServerSide").mockReturnValue(true);
 
         // Act
-        const result = shallow(<TrackData>SOME CHILDREN</TrackData>);
+        render(<TrackData>SOME CHILDREN</TrackData>);
+        const result = screen.getByText("SOME CHILDREN");
 
         // Assert
-        expect(result).toHaveHTML("SOME CHILDREN");
+        expect(result).toBeInTheDocument();
     });
 
     it("should provide tracker function for tracking context", async () => {
@@ -41,7 +42,7 @@ describe("TrackData", () => {
 
         // Act
         const result = await new Promise((resolve, reject) => {
-            mount(
+            render(
                 <TrackData>
                     <TrackerContext.Consumer>
                         {(fn) => resolve(fn)}

package/src/components/data.js

@@ -1,18 +1,9 @@
 // @flow
 import * as React from "react";
 
-import {ResponseCache} from "../util/response-cache.js";
-import InternalData from "./internal-data.js";
+import {useData} from "../hooks/use-data.js";
 
-import InterceptContext from "./intercept-context.js";
-
-import type {
-    CacheEntry,
-    Interceptor,
-    Result,
-    IRequestHandler,
-    ValidData,
-} from "../util/types.js";
+import type {Result, IRequestHandler, ValidData} from "../util/types.js";
 
 type Props<
     /**
@@ -54,111 +45,10 @@ type Props<
  * requirements can be placed in a React application in a manner that will
  * support server-side rendering and efficient caching.
  */
-export default class Data<TOptions, TData: ValidData> extends React.Component<
-    Props<TOptions, TData>,
-> {
-    _getHandlerFromInterceptor(
-        interceptor: ?Interceptor,
-    ): IRequestHandler<TOptions, TData> {
-        const {handler} = this.props;
-        if (!interceptor) {
-            return handler;
-        }
-
-        const {fulfillRequest, shouldRefreshCache} = interceptor;
-        const fulfillRequestFn = fulfillRequest
-            ? (options: TOptions): Promise<TData> => {
-                  const interceptedResult = fulfillRequest(options);
-                  return interceptedResult != null
-                      ? interceptedResult
-                      : handler.fulfillRequest(options);
-              }
-            : (options) => handler.fulfillRequest(options);
-        const shouldRefreshCacheFn = shouldRefreshCache
-            ? (
-                  options: TOptions,
-                  cacheEntry: ?$ReadOnly<CacheEntry<TData>>,
-              ): boolean => {
-                  const interceptedResult = shouldRefreshCache(
-                      options,
-                      cacheEntry,
-                  );
-                  return interceptedResult != null
-                      ? interceptedResult
-                      : handler.shouldRefreshCache(options, cacheEntry);
-              }
-            : (options, cacheEntry) =>
-                  handler.shouldRefreshCache(options, cacheEntry);
-
-        return {
-            fulfillRequest: fulfillRequestFn,
-            shouldRefreshCache: shouldRefreshCacheFn,
-            getKey: (options) => handler.getKey(options),
-            type: handler.type,
-            cache: handler.cache,
-            hydrate: handler.hydrate,
-        };
-    }
-
-    _getCacheLookupFnFromInterceptor(
-        interceptor: ?Interceptor,
-    ): $PropertyType<ResponseCache, "getEntry"> {
-        const getEntry = interceptor && interceptor.getEntry;
-        if (!getEntry) {
-            return ResponseCache.Default.getEntry;
-        }
-
-        return <TOptions, TData: ValidData>(
-            handler: IRequestHandler<TOptions, TData>,
-            options: TOptions,
-        ): ?$ReadOnly<CacheEntry<TData>> => {
-            // 1. Lookup the current cache value.
-            const cacheEntry = ResponseCache.Default.getEntry<TOptions, TData>(
-                handler,
-                options,
-            );
-
-            // 2. See if our interceptor wants to override it.
-            const interceptedData = getEntry(options, cacheEntry);
-
-            // 3. Return the appropriate response.
-            return interceptedData != null ? interceptedData : cacheEntry;
-        };
-    }
-
-    render(): React.Node {
-        return (
-            <InterceptContext.Consumer>
-                {(value) => {
-                    const handlerType = this.props.handler.type;
-                    const interceptor = value[handlerType];
-                    const handler = this._getHandlerFromInterceptor(
-                        interceptor,
-                    );
-                    const getEntry = this._getCacheLookupFnFromInterceptor(
-                        interceptor,
-                    );
-
-                    /**
-                     * Need to share our types with InternalData so Flow
-                     * doesn't need to infer them and find mismatches.
-                     * However, just deriving a new component creates issues
-                     * where InternalData starts rerendering too often.
-                     * Couldn't track down why, so suppressing the error
-                     * instead.
-                     */
-                    return (
-                        <InternalData
-                            // $FlowIgnore[incompatible-type-arg]
-                            handler={handler}
-                            options={this.props.options}
-                            getEntry={getEntry}
-                        >
-                            {(result) => this.props.children(result)}
-                        </InternalData>
-                    );
-                }}
-            </InterceptContext.Consumer>
-        );
-    }
-}
+const Data = <TOptions, TData: ValidData>(
+    props: Props<TOptions, TData>,
+): React.Node => {
+    const data = useData(props.handler, props.options);
+    return props.children(data);
+};
+export default Data;

package/src/components/data.md

@@ -3,34 +3,36 @@ most folks will use. It describes a data requirement in terms of a handler, and
 some options. Handlers must implement the
 `IRequestHandler` interface.
 
-Among other things, the handler is responsible for fulfilling the request when
-asked to do so.
+The handler is responsible for fulfilling the request when asked to do so.
 
-#### Caching
+#### Server-side Rendering and Hydration
 
-The Wonder Blocks Data framework utilizes a core internal in-memory cache for
-supporting server-side rendering (SSR) and client-side provision of data
-obtained during SSR to support hydration of the SSR result.
+The Wonder Blocks Data framework uses an in-memory cache for supporting
+server-side rendering (SSR) and hydration.
 
-In addition to this internal cache, a custom cache can be provided by a request
-handler. Custom caches allow for different client-side caching
-strategies (such as using local storage instead of memory). Any custom cache
-provided is ignored during SSR.
+##### Server-side behavior
 
-When retrieving data from cache, the framework will ask the custom cache for its
-entry. If the custom cache returns an entry, that is used. If the custom cache
-returns `null`, the framework will look for a corresponding in-memory entry with
-which the framework has been initialzied, and if there, store the entry in the
-custom cache and then return it.
+###### Cache miss
 
-`removeFromCache` and `removeAllFromCache` methods are also provided for
-removing values from the in-memory and custom caches.
+When the `Data` component does not get data or an error from the cache and it
+is rendering server-side, it tells our request tracking that it wants data, and
+it renders in its `loading` state. It will always render in this state if there
+is no cached response.
 
-#### Client-side behavior
+###### Cache hit
 
-##### Cache Miss
+When the `Data` component gets data or an error from the cache and it is
+rendering server-side, it will render as loaded, with that data or error,
+as it would client-side. In this situation, it does not track the request it
+would have made, as it already has the data and doesn't need to.
 
-When the cache does not yet contain the data, the data must be requested.
+
+##### Client-side behavior
+
+###### Cache miss
+
+When the hydration cache does not contain the data, the data will be requested.
+While the request is pending, the data is rendered in the loading state.
 In this example, we use a 3 second delayed promise to simulate the request.
 We start out without any data and so the request is made. Upon receipt of that
 data or an error, we re-render.
@@ -103,21 +105,16 @@ const invalid = new MyInvalidHandler();
 </View>
 ```
 
-##### Cache Hit
-
-If the cache already contains data or an error for our request, then the `Data`
-component will render it immediately. The cache data is placed there either
-by prior successful requests as in the above Cache Miss example, or via calling
-`initializeCache` before any requests have been made. A cache hit may also
-occur due to the use of the `InterceptCache` component.
+###### Cache hit
 
-For the example below, we called `initializeData` data in our examples for
-that method. That way we'd have data ready for us here!
+If the hydration cache already contains data or an error for our request, then
+the `Data` component will render it immediately. The hydration cache is
+populated using the `initializeCache` method before rendering.
 
 ```jsx
 import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {InterceptCache, Data, RequestHandler} from "@khanacademy/wonder-blocks-data";
+import {Data, RequestHandler, initializeCache} from "@khanacademy/wonder-blocks-data";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -135,24 +132,21 @@ class MyHandler extends RequestHandler {
             "If you're seeing this error, the examples are broken and data isn't in the cache that should be.",
         );
     }
-
-    shouldRefreshCache(options, cachedEntry) {
-        /**
-         * For our purposes, the cache never needs a refresh.
-         */
-        return false;
-    }
 }
 
 const handler = new MyHandler();
-const getEntryInterceptor = function(options) {
-    if (options === "DATA") {
-        return  { data: "I'm DATA from the cache" };
+initializeCache({
+    CACHE_HIT_HANDLER: {
+        DATA: {
+            data: "I'm DATA from the hydration cache"
+        },
+        ERROR: {
+            error: "I'm an ERROR from hydration cache"
+        }
     }
-    return {error: "I'm an ERROR from the cache" };
-};
+});
 
-<InterceptCache handler={handler} getEntry={getEntryInterceptor}>
+<View>
     <View>
         <Body>This cache has data!</Body>
         <Data handler={handler} options={"DATA"}>
@@ -182,21 +176,5 @@ const getEntryInterceptor = function(options) {
             }}
         </Data>
     </View>
-</InterceptCache>
+</View>
 ```
-
-#### Server-side behavior
-
-##### Cache miss
-
-When the `Data` component does not get data or an error from the cache and it
-is rendering server-side, it tells our request tracking that it wants data, and
-it renders in its `loading` state. It will always render in this state if there
-is no cached response.
-
-##### Cache hit
-
-When the `Data` component gets data or an error from the cache and it is
-rendering server-side, it will render as loaded, with that data or error,
-as it would client-side. In this situation, it does not track the request it
-would have made, as it already has the data and doesn't need to.

package/src/components/gql-router.js

@@ -0,0 +1,66 @@
+// @flow
+import * as React from "react";
+
+import {GqlRouterContext} from "../util/gql-router-context.js";
+
+import type {
+    GqlContext,
+    FetchFn,
+    GqlRouterConfiguration,
+} from "../util/gql-types.js";
+
+type Props<TContext: GqlContext> = {|
+    /**
+     * The default context to be used by operations when no context is provided.
+     */
+    defaultContext: TContext,
+
+    /**
+     * The function to use when fetching requests.
+     */
+    fetch: FetchFn<any, any, any, TContext>,
+
+    /**
+     * The children to be rendered inside the router.
+     */
+    children: React.Node,
+|};
+
+/**
+ * Configure GraphQL routing for GraphQL hooks and components.
+ *
+ * These can be nested. Components and hooks relying on the GraphQL routing
+ * will use the configuration from their closest ancestral GqlRouter.
+ */
+export const GqlRouter = <TContext: GqlContext>({
+    defaultContext: thisDefaultContext,
+    fetch: thisFetch,
+    children,
+}: Props<TContext>): React.Node => {
+    // We don't care if we're nested. We always force our callers to define
+    // everything. It makes for a clearer API and requires less error checking
+    // code (assuming our flow types are correct). We also don't default fetch
+    // to anything - our callers can tell us what function to use quite easily.
+    // If code that consumes this wants more nuanced nesting, it can implement
+    // it within its own GqlRouter than then defers to this one.
+
+    // We want to always use the same object if things haven't changed to avoid
+    // over-rendering consumers of our context, let's memoize the configuration.
+    // By doing this, if a component under children that uses this context
+    // uses React.memo, we won't force it to re-render every time we render
+    // because we'll only change the context value if something has actually
+    // changed.
+    const configuration: GqlRouterConfiguration<TContext> = React.useMemo(
+        () => ({
+            fetch: thisFetch,
+            defaultContext: thisDefaultContext,
+        }),
+        [thisDefaultContext, thisFetch],
+    );
+
+    return (
+        <GqlRouterContext.Provider value={configuration}>
+            {children}
+        </GqlRouterContext.Provider>
+    );
+};

package/src/components/intercept-context.js

@@ -8,8 +8,7 @@ import type {InterceptContextData} from "../util/types.js";
  *
  * INTERNAL USE ONLY
  */
-const InterceptContext: React.Context<InterceptContextData> = React.createContext<InterceptContextData>(
-    {},
-);
+const InterceptContext: React.Context<InterceptContextData> =
+    React.createContext<InterceptContextData>({});
 
 export default InterceptContext;

package/src/components/intercept-data.js

@@ -7,10 +7,9 @@ import type {
     ValidData,
     IRequestHandler,
     InterceptFulfillRequestFn,
-    InterceptShouldRefreshCacheFn,
 } from "../util/types.js";
 
-type BaseProps<TOptions, TData> = {|
+type Props<TOptions, TData> = {|
     /**
      * A handler of the type to be intercepted.
      */
@@ -24,9 +23,7 @@ type BaseProps<TOptions, TData> = {|
      * one).
      */
     children: React.Node,
-|};
 
-type FulfillRequestProps<TOptions, TData> = {|
     /**
      * Called to fulfill a request.
      * If this returns null, the request will be fulfilled by the
@@ -35,38 +32,11 @@ type FulfillRequestProps<TOptions, TData> = {|
     fulfillRequest: InterceptFulfillRequestFn<TOptions, TData>,
 |};
 
-type ShouldRefreshCacheProps<TOptions, TData> = {|
-    /**
-     * Called to determine if the cache should be refreshed.
-     * If this returns null, the handler being intercepted will be asked if
-     * the cache should be refreshed.
-     */
-    shouldRefreshCache: InterceptShouldRefreshCacheFn<TOptions, TData>,
-|};
-
-type Props<TOptions, TData> =
-    | {|
-          ...BaseProps<TOptions, TData>,
-          ...FulfillRequestProps<TOptions, TData>,
-          ...ShouldRefreshCacheProps<TOptions, TData>,
-      |}
-    | {|
-          ...BaseProps<TOptions, TData>,
-          ...FulfillRequestProps<TOptions, TData>,
-      |}
-    | {|
-          ...BaseProps<TOptions, TData>,
-          ...ShouldRefreshCacheProps<TOptions, TData>,
-      |};
-
 /**
  * This component provides a mechanism to intercept the data requests for the
  * type of a given handler and provide alternative results. This is mostly
  * useful for testing.
  *
- * Results from this interceptor will end up in the cache. If you
- * wish to only override the cache, use `InterceptCache` instead.
- *
  * This component is not recommended for use in production code as it
  * can prevent predictable functioning of the Wonder Blocks Data framework.
  * One possible side-effect is that inflight requests from the interceptor could
@@ -89,9 +59,7 @@ export default class InterceptData<
                     const handlerType = this.props.handler.type;
                     const interceptor = {
                         ...value[handlerType],
-                        fulfillRequest: this.props.fulfillRequest || null,
-                        shouldRefreshCache:
-                            this.props.shouldRefreshCache || null,
+                        fulfillRequest: this.props.fulfillRequest,
                     };
                     const newValue = {
                         ...value,