Merge branch 'cache-config' into master

Author: jquense

package.json

@@ -24,10 +24,8 @@
     "testonly": "jest",
     "typecheck": "tsc --noEmit && tsc --noEmit -p test"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+  "gitHooks": {
+    "pre-commit": "lint-staged"
   },
   "lint-staged": {
     "*": "yarn 4c lint --fix"
@@ -77,7 +75,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "fetch-mock": "^9.11.0",
     "fetch-mock-jest": "^1.5.1",
-    "husky": "^5.2.0",
+    "hookem": "^2.0.1",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",

src/NetworkLayer.ts

@@ -1,6 +1,6 @@
 import { ExecuteFunction, Network } from 'relay-runtime';
 
-import createFetch from './createFetch';
+import createFetch, { BatchConfig } from './createFetch';
 import type { SubscriptionClientOptions } from './createSubscribe';
 import createSubscribe from './createSubscribe';
 
@@ -42,18 +42,7 @@ export interface NetworkLayerOptions {
    *
    * **Requires a Graphql server that understands batching"
    */
-  batch?:
-    | boolean
-    | {
-        enabled: boolean;
-
-        /**
-         * The amount of time to wait before a batch is closed and sent to the server.
-         *
-         * The default is `0ms`, or about the next tick of the event loop.
-         */
-        timeoutMs?: number;
-      };
+  batch?: boolean | BatchConfig;
 
   /** The authorization configuration or token for a convenient shorthand */
   authorization?:

src/createFetch.ts

@@ -10,6 +10,16 @@ import {
 } from 'relay-runtime';
 import { Sink } from 'relay-runtime/lib/network/RelayObservable';
 
+export interface BatchConfig {
+  enabled: boolean;
+  timeoutMs?: number;
+  shouldRequestBeBatched?: (
+    operation: RequestParameters,
+    variables: Variables,
+    cacheConfig?: CacheConfig,
+    uploadables?: UploadableMap,
+  ) => boolean;
+}
 export interface FetchOptions {
   url?: string;
   init?: RequestInit | (() => RequestInit);
@@ -22,12 +32,7 @@ export interface FetchOptions {
         headerName?: string;
         scheme?: string;
       };
-  batch?:
-    | boolean
-    | {
-        enabled: boolean;
-        timeoutMs?: number;
-      };
+  batch?: boolean | BatchConfig;
 }
 
 export interface Data {
@@ -65,9 +70,9 @@ let batcher: null | {
   sinks: Sink<GraphQLResponse>[];
 } = null;
 
-function normalizeBatch(batch: FetchOptions['batch'] = true) {
-  const p = typeof batch === 'boolean' ? { enabled: batch } : {};
-  return { timeoutMs: 0, ...p };
+function normalizeBatch(batch: FetchOptions['batch'] = true): BatchConfig {
+  const p = typeof batch === 'boolean' ? { enabled: batch } : batch;
+  return { timeoutMs: 0, shouldRequestBeBatched: () => true, ...p };
 }
 
 function normalizeAuth(auth: FetchOptions['authorization'] = '') {
@@ -169,7 +174,7 @@ function createFetch({
                 const resp = processJson(batchResp[idx]);
                 sink.next!(resp);
                 sink.complete!();
-              } catch (err) {
+              } catch (err: any) {
                 sink.error!(err);
               }
             });
@@ -190,7 +195,7 @@ function createFetch({
   function fetchFn(
     operation: RequestParameters,
     variables: Variables,
-    _cacheConfig?: CacheConfig,
+    cacheConfig?: CacheConfig,
     uploadables?: UploadableMap,
   ) {
     // We use observables directly here instead of the promise value
@@ -210,7 +215,13 @@ function createFetch({
       if (
         batching.enabled &&
         !uploadables &&
-        operation.operationKind !== 'mutation'
+        operation.operationKind !== 'mutation' &&
+        batching.shouldRequestBeBatched!(
+          operation,
+          variables,
+          cacheConfig,
+          uploadables,
+        )
       ) {
         addToBatch(body as string, sink);
 

test/NetworkLayer.test.ts

@@ -18,7 +18,7 @@ describe('NetworkLayer', () => {
   // eslint-disable-next-line require-await
   async function run(
     layer: Network,
-    { files, kind = 'query', variables = {} }: any = {},
+    { files, kind = 'query', variables = {}, cacheConfig = {} }: any = {},
   ) {
     const $req = layer.execute(
       {
@@ -33,7 +33,7 @@ describe('NetworkLayer', () => {
         metadata: {},
       },
       variables,
-      {}, // cacheConfig
+      cacheConfig,
       files,
     );
 
@@ -145,6 +145,44 @@ describe('NetworkLayer', () => {
       expect(req2).toEqual(defaultResponse);
     });
 
+    it('should conditionally batch requests', async () => {
+      const networkLayer = NetworkLayer.create({
+        batch: {
+          enabled: true,
+          shouldRequestBeBatched(_op, _v, config) {
+            if (config!.metadata?.donotBatch) return false;
+            return true;
+          },
+        },
+      });
+
+      fetchMock.post('/graphql', (_url: string, opts: any) => {
+        const body = JSON.parse(opts.body);
+        return Array.isArray(body)
+          ? Array(body.length).fill(defaultResponse)
+          : defaultResponse;
+      });
+
+      let [req1, req2] = await Promise.all([
+        run(networkLayer),
+        run(networkLayer),
+      ]);
+
+      expect(fetchMock).toHaveFetchedTimes(1);
+
+      [req1, , req2] = await Promise.all([
+        run(networkLayer),
+        run(networkLayer),
+        run(networkLayer, { cacheConfig: { metadata: { donotBatch: true } } }),
+      ]);
+
+      expect(fetchMock).toHaveFetchedTimes(3);
+
+      expect(req1).toEqual(defaultResponse);
+
+      expect(req2).toEqual(defaultResponse);
+    });
+
     it('should error for invalid response', async () => {
       const networkLayer = NetworkLayer.create();