@khanacademy/wonder-blocks-data 3.0.0 → 3.1.2

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,
+    GqlFetchFn,
+    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: GqlFetchFn<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/hooks/__tests__/use-data.test.js

@@ -155,6 +155,42 @@ describe("#useData", () => {
                 error: "ERROR",
             });
         });
+
+        it("should track the intercepted request", async () => {
+            // Arrange
+            const intercepted = Promise.resolve("INTERCEPTED");
+            const notIntercepted = Promise.resolve("NOT INTERCEPTED");
+            const fakeHandler: IRequestHandler<string, string> = {
+                fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
+                getKey: (o) => o,
+                type: "MY_HANDLER",
+                hydrate: true,
+            };
+            const trackDataRequestSpy = jest.spyOn(
+                RequestTracker.Default,
+                "trackDataRequest",
+            );
+            const wrapper = ({children}) => (
+                <TrackData>
+                    <InterceptData
+                        fulfillRequest={() => intercepted}
+                        handler={fakeHandler}
+                    >
+                        {children}
+                    </InterceptData>
+                </TrackData>
+            );
+
+            // Act
+            serverRenderHook(() => useData(fakeHandler, "options"), {
+                wrapper,
+            });
+            const trackedHandler = trackDataRequestSpy.mock.calls[0][0];
+            const result = await trackedHandler.fulfillRequest();
+
+            // Assert
+            expect(result).toBe("INTERCEPTED");
+        });
     });
 
     describe("when client-side", () => {
@@ -668,122 +704,122 @@ describe("#useData", () => {
                 data: "DATA",
             });
         });
-    });
 
-    describe("with interceptor", () => {
-        it("should return the result of the interceptor request resolution", async () => {
-            // Arrange
-            const intercepted = Promise.resolve("INTERCEPTED");
-            const notIntercepted = Promise.resolve("NOT INTERCEPTED");
-            const fakeHandler: IRequestHandler<string, string> = {
-                fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
-                getKey: (o) => o,
-                type: "MY_HANDLER",
-                hydrate: true,
-            };
-            const wrapper = ({children}) => (
-                <InterceptData
-                    fulfillRequest={() => intercepted}
-                    handler={fakeHandler}
-                >
-                    {children}
-                </InterceptData>
-            );
+        describe("with interceptor", () => {
+            it("should return the result of the interceptor request resolution", async () => {
+                // Arrange
+                const intercepted = Promise.resolve("INTERCEPTED");
+                const notIntercepted = Promise.resolve("NOT INTERCEPTED");
+                const fakeHandler: IRequestHandler<string, string> = {
+                    fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
+                    getKey: (o) => o,
+                    type: "MY_HANDLER",
+                    hydrate: true,
+                };
+                const wrapper = ({children}) => (
+                    <InterceptData
+                        fulfillRequest={() => intercepted}
+                        handler={fakeHandler}
+                    >
+                        {children}
+                    </InterceptData>
+                );
 
-            // Act
-            const render = clientRenderHook(
-                () => useData(fakeHandler, "options"),
-                {
-                    wrapper,
-                },
-            );
-            await act((): Promise<mixed> =>
-                Promise.all([notIntercepted, intercepted]),
-            );
-            const result = render.result.current;
+                // Act
+                const render = clientRenderHook(
+                    () => useData(fakeHandler, "options"),
+                    {
+                        wrapper,
+                    },
+                );
+                await act((): Promise<mixed> =>
+                    Promise.all([notIntercepted, intercepted]),
+                );
+                const result = render.result.current;
 
-            // Assert
-            expect(result).toEqual({
-                status: "success",
-                data: "INTERCEPTED",
+                // Assert
+                expect(result).toEqual({
+                    status: "success",
+                    data: "INTERCEPTED",
+                });
             });
-        });
-
-        it("should return the result of the interceptor request rejection", async () => {
-            // Arrange
-            const intercepted = Promise.reject("INTERCEPTED");
-            const notIntercepted = Promise.resolve("NOT INTERCEPTED");
-            const fakeHandler: IRequestHandler<string, string> = {
-                fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
-                getKey: (o) => o,
-                type: "MY_HANDLER",
-                hydrate: true,
-            };
-            const wrapper = ({children}) => (
-                <InterceptData
-                    fulfillRequest={() => intercepted}
-                    handler={fakeHandler}
-                >
-                    {children}
-                </InterceptData>
-            );
 
-            // Act
-            const render = clientRenderHook(
-                () => useData(fakeHandler, "options"),
-                {
-                    wrapper,
-                },
-            );
-            await notIntercepted;
-            await act(async (): Promise<mixed> => {
-                try {
-                    await intercepted;
-                } catch (e) {
-                    /* ignore, it's ok */
-                }
-            });
-            const result = render.result.current;
+            it("should return the result of the interceptor request rejection", async () => {
+                // Arrange
+                const intercepted = Promise.reject("INTERCEPTED");
+                const notIntercepted = Promise.resolve("NOT INTERCEPTED");
+                const fakeHandler: IRequestHandler<string, string> = {
+                    fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
+                    getKey: (o) => o,
+                    type: "MY_HANDLER",
+                    hydrate: true,
+                };
+                const wrapper = ({children}) => (
+                    <InterceptData
+                        fulfillRequest={() => intercepted}
+                        handler={fakeHandler}
+                    >
+                        {children}
+                    </InterceptData>
+                );
 
-            // Assert
-            expect(result).toEqual({
-                status: "error",
-                error: "INTERCEPTED",
+                // Act
+                const render = clientRenderHook(
+                    () => useData(fakeHandler, "options"),
+                    {
+                        wrapper,
+                    },
+                );
+                await notIntercepted;
+                await act(async (): Promise<mixed> => {
+                    try {
+                        await intercepted;
+                    } catch (e) {
+                        /* ignore, it's ok */
+                    }
+                });
+                const result = render.result.current;
+
+                // Assert
+                expect(result).toEqual({
+                    status: "error",
+                    error: "INTERCEPTED",
+                });
             });
-        });
 
-        it("should return the result of the handler if the interceptor returns null", async () => {
-            // Arrange
-            const notIntercepted = Promise.resolve("NOT INTERCEPTED");
-            const fakeHandler: IRequestHandler<string, string> = {
-                fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
-                getKey: (o) => o,
-                type: "MY_HANDLER",
-                hydrate: true,
-            };
-            const wrapper = ({children}) => (
-                <InterceptData
-                    fulfillRequest={() => null}
-                    handler={fakeHandler}
-                >
-                    {children}
-                </InterceptData>
-            );
+            it("should return the result of the handler if the interceptor returns null", async () => {
+                // Arrange
+                const notIntercepted = Promise.resolve("NOT INTERCEPTED");
+                const fakeHandler: IRequestHandler<string, string> = {
+                    fulfillRequest: jest.fn().mockReturnValue(notIntercepted),
+                    getKey: (o) => o,
+                    type: "MY_HANDLER",
+                    hydrate: true,
+                };
+                const wrapper = ({children}) => (
+                    <InterceptData
+                        fulfillRequest={() => null}
+                        handler={fakeHandler}
+                    >
+                        {children}
+                    </InterceptData>
+                );
 
-            // Act
-            const render = clientRenderHook(
-                () => useData(fakeHandler, "options"),
-                {
-                    wrapper,
-                },
-            );
-            await act((): Promise<mixed> => notIntercepted);
-            const result = render.result.current;
+                // Act
+                const render = clientRenderHook(
+                    () => useData(fakeHandler, "options"),
+                    {
+                        wrapper,
+                    },
+                );
+                await act((): Promise<mixed> => notIntercepted);
+                const result = render.result.current;
 
-            // Assert
-            expect(result).toEqual({
-                status: "success",
-                data: "NOT INTERCEPTED",
+                // Assert
+                expect(result).toEqual({
+                    status: "success",
+                    data: "NOT INTERCEPTED",
+                });
             });
         });
     });

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

@@ -0,0 +1,233 @@
+// @flow
+import * as React from "react";
+import {renderHook} from "@testing-library/react-hooks";
+
+import * as GetGqlDataFromResponse from "../../util/get-gql-data-from-response.js";
+import {GqlRouterContext} from "../../util/gql-router-context.js";
+import {useGql} from "../use-gql.js";
+
+describe("#useGql", () => {
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it("should throw if there is no GqlRouterContext available", () => {
+        // Arrange
+
+        // Act
+        const {
+            result: {error: result},
+        } = renderHook(() => useGql());
+
+        // Assert
+        expect(result).toMatchInlineSnapshot(
+            `[GqlInternalError: No GqlRouter]`,
+        );
+    });
+
+    it("should return a function", () => {
+        // Arrange
+        const gqlRouterContext = {
+            fetch: jest.fn(),
+            defaultContext: {},
+        };
+
+        // Act
+        const {
+            result: {current: result},
+        } = renderHook(() => useGql(), {
+            wrapper: ({children}) => (
+                <GqlRouterContext.Provider value={gqlRouterContext}>
+                    {children}
+                </GqlRouterContext.Provider>
+            ),
+        });
+
+        // Assert
+        expect(result).toBeInstanceOf(Function);
+    });
+
+    describe("returned gqlFetch", () => {
+        it("should fetch the operation with combined context", async () => {
+            // Arrange
+            jest.spyOn(
+                GetGqlDataFromResponse,
+                "getGqlDataFromResponse",
+            ).mockResolvedValue({
+                some: "data",
+            });
+            const fetchFake = jest
+                .fn()
+                .mockResolvedValue(("FAKE_RESPONSE": any));
+            const gqlRouterContext = {
+                fetch: fetchFake,
+                defaultContext: {
+                    a: "defaultA",
+                    b: "defaultB",
+                },
+            };
+            const {
+                result: {current: gqlFetch},
+            } = renderHook(() => useGql(), {
+                wrapper: ({children}) => (
+                    <GqlRouterContext.Provider value={gqlRouterContext}>
+                        {children}
+                    </GqlRouterContext.Provider>
+                ),
+            });
+            const gqlOp = {
+                type: "query",
+                id: "MyQuery",
+            };
+            const gqlOpContext = {
+                b: "overrideB",
+            };
+            const gqlOpVariables = {
+                var1: "val1",
+            };
+
+            // Act
+            await gqlFetch(gqlOp, {
+                context: gqlOpContext,
+                variables: gqlOpVariables,
+            });
+
+            // Assert
+            expect(fetchFake).toHaveBeenCalledWith(gqlOp, gqlOpVariables, {
+                a: "defaultA",
+                b: "overrideB",
+            });
+        });
+
+        it("should parse the response", async () => {
+            // Arrange
+            const getGqlDataFromResponseSpy = jest
+                .spyOn(GetGqlDataFromResponse, "getGqlDataFromResponse")
+                .mockResolvedValue({
+                    some: "data",
+                });
+            const gqlRouterContext = {
+                fetch: jest.fn().mockResolvedValue(("FAKE_RESPONSE": any)),
+                defaultContext: {},
+            };
+            const {
+                result: {current: gqlFetch},
+            } = renderHook(() => useGql(), {
+                wrapper: ({children}) => (
+                    <GqlRouterContext.Provider value={gqlRouterContext}>
+                        {children}
+                    </GqlRouterContext.Provider>
+                ),
+            });
+            const gqlOp = {
+                type: "query",
+                id: "MyQuery",
+            };
+
+            // Act
+            await gqlFetch(gqlOp);
+
+            // Assert
+            expect(getGqlDataFromResponseSpy).toHaveBeenCalledWith(
+                "FAKE_RESPONSE",
+            );
+        });
+
+        it("should reject if the response parse rejects", async () => {
+            // Arrange
+            jest.spyOn(
+                GetGqlDataFromResponse,
+                "getGqlDataFromResponse",
+            ).mockRejectedValue(new Error("FAKE_ERROR"));
+            const gqlRouterContext = {
+                fetch: jest.fn().mockResolvedValue(("FAKE_RESPONSE": any)),
+                defaultContext: {},
+            };
+            const {
+                result: {current: gqlFetch},
+            } = renderHook(() => useGql(), {
+                wrapper: ({children}) => (
+                    <GqlRouterContext.Provider value={gqlRouterContext}>
+                        {children}
+                    </GqlRouterContext.Provider>
+                ),
+            });
+            const gqlOp = {
+                type: "query",
+                id: "MyQuery",
+            };
+
+            // Act
+            const act = gqlFetch(gqlOp);
+
+            // Assert
+            await expect(act).rejects.toThrowErrorMatchingInlineSnapshot(
+                `"FAKE_ERROR"`,
+            );
+        });
+
+        it("should resolve to null if the fetch was aborted", async () => {
+            // Arrange
+            const abortError = new Error("Aborted");
+            abortError.name = "AbortError";
+            const gqlRouterContext = {
+                fetch: jest.fn().mockRejectedValue(abortError),
+                defaultContext: {},
+            };
+            const {
+                result: {current: gqlFetch},
+            } = renderHook(() => useGql(), {
+                wrapper: ({children}) => (
+                    <GqlRouterContext.Provider value={gqlRouterContext}>
+                        {children}
+                    </GqlRouterContext.Provider>
+                ),
+            });
+            const gqlOp = {
+                type: "query",
+                id: "MyQuery",
+            };
+
+            // Act
+            const result = await gqlFetch(gqlOp);
+
+            // Assert
+            expect(result).toBeNull();
+        });
+
+        it("should resolve to the response data", async () => {
+            // Arrange
+            jest.spyOn(
+                GetGqlDataFromResponse,
+                "getGqlDataFromResponse",
+            ).mockResolvedValue({
+                some: "data",
+            });
+            const gqlRouterContext = {
+                fetch: jest.fn().mockResolvedValue(("FAKE_RESPONSE": any)),
+                defaultContext: {},
+            };
+            const {
+                result: {current: gqlFetch},
+            } = renderHook(() => useGql(), {
+                wrapper: ({children}) => (
+                    <GqlRouterContext.Provider value={gqlRouterContext}>
+                        {children}
+                    </GqlRouterContext.Provider>
+                ),
+            });
+            const gqlOp = {
+                type: "mutation",
+                id: "MyMutation",
+            };
+
+            // Act
+            const result = await gqlFetch(gqlOp);
+
+            // Assert
+            expect(result).toEqual({
+                some: "data",
+            });
+        });
+    });
+});

package/src/hooks/use-data.js

@@ -29,20 +29,41 @@ export const useData = <TOptions, TData: ValidData>(
     );
     const [result, setResult] = useState<?CacheEntry<TData>>(cachedResult);
 
+    // Lookup to see if there's an interceptor for the handler.
+    // If we have one, we need to replace the handler with one that
+    // uses the interceptor.
+    const interceptorMap = useContext(InterceptContext);
+    const interceptor = interceptorMap[handler.type];
+
+    // If we have an interceptor, we need to replace the handler with one that
+    // uses the interceptor. This helper function generates a new handler.
+    // We need this before we track the request as we want the interceptor
+    // to also work for tracked requests to simplify testing the server-side
+    // request fulfillment.
+    const getMaybeInterceptedHandler = () => {
+        if (interceptor == null) {
+            return handler;
+        }
+
+        const fulfillRequestFn = (options) =>
+            interceptor.fulfillRequest(options) ??
+            handler.fulfillRequest(options);
+        return {
+            fulfillRequest: fulfillRequestFn,
+            getKey: (options) => handler.getKey(options),
+            type: handler.type,
+            hydrate: handler.hydrate,
+        };
+    };
+
     // We only track data requests when we are server-side and we don't
     // already have a result, as given by the cachedData (which is also the
     // initial value for the result state).
     const maybeTrack = useContext(TrackerContext);
     if (result == null && Server.isServerSide()) {
-        maybeTrack?.(handler, options);
+        maybeTrack?.(getMaybeInterceptedHandler(), options);
     }
 
-    // Lookup to see if there's an interceptor for the handler.
-    // If we have one, we need to replace the handler with one that
-    // uses the interceptor.
-    const interceptorMap = useContext(InterceptContext);
-    const interceptor = interceptorMap[handler.type];
-
     // We need to update our request when the handler changes or the key
     // to the options change, so we keep track of those.
     // However, even if we are hydrating from cache, we still need to make the
@@ -74,22 +95,6 @@ export const useData = <TOptions, TData: ValidData>(
             setResult(null);
         }
 
-        const getMaybeInterceptedHandler = () => {
-            if (interceptor == null) {
-                return handler;
-            }
-
-            const fulfillRequestFn = (options) =>
-                interceptor.fulfillRequest(options) ??
-                handler.fulfillRequest(options);
-            return {
-                fulfillRequest: fulfillRequestFn,
-                getKey: (options) => handler.getKey(options),
-                type: handler.type,
-                hydrate: handler.hydrate,
-            };
-        };
-
         // We aren't server-side, so let's make the request.
         // The request handler is in control of whether that request actually
         // happens or not.