@trpc/client 10.0.0-alpha.5 → 10.0.0-alpha.52

package/src/internals/dataLoader.ts

@@ -1,18 +1,32 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { CancelFn, PromiseAndCancel } from '../links/types';
 
 type BatchItem<TKey, TValue> = {
-  cancelled: boolean;
+  aborted: boolean;
   key: TKey;
   resolve: (value: TValue) => void;
   reject: (error: Error) => void;
+  batch: Batch<TKey, TValue> | null;
 };
 type Batch<TKey, TValue> = {
   items: BatchItem<TKey, TValue>[];
   cancel: CancelFn;
 };
-type BatchLoadFn<TKey, TValue> = (keys: TKey[]) => {
-  promise: Promise<TValue[]>;
-  cancel: CancelFn;
+type BatchLoader<TKey, TValue> = {
+  validate: (keys: TKey[]) => boolean;
+  fetch: (keys: TKey[]) => {
+    promise: Promise<TValue[]>;
+    cancel: CancelFn;
+  };
+};
+
+/**
+ * A function that should never be called unless we messed something up.
+ */
+const throwFatalError = () => {
+  throw new Error(
+    'Something went wrong. Please submit an issue at https://github.com/trpc/trpc/issues/new',
+  );
 };
 
 /**
@@ -20,67 +34,128 @@ type BatchLoadFn<TKey, TValue> = (keys: TKey[]) => {
  * Less configuration, no caching, and allows you to cancel requests
  * When cancelling a single fetch the whole batch will be cancelled only when _all_ items are cancelled
  */
-export function dataLoader<TKey, TValue>(fetchMany: BatchLoadFn<TKey, TValue>) {
-  let batch: Batch<TKey, TValue> | null = null;
-  let dispatchTimer: NodeJS.Timer | number | null = null;
+export function dataLoader<TKey, TValue>(
+  batchLoader: BatchLoader<TKey, TValue>,
+) {
+  let pendingItems: BatchItem<TKey, TValue>[] | null = null;
+  let dispatchTimer: ReturnType<typeof setTimeout> | null = null;
 
-  const destroyTimerAndBatch = () => {
+  const destroyTimerAndPendingItems = () => {
     clearTimeout(dispatchTimer as any);
     dispatchTimer = null;
-    batch = null;
+    pendingItems = null;
   };
+
+  /**
+   * Iterate through the items and split them into groups based on the `batchLoader`'s validate function
+   */
+  function groupItems(items: BatchItem<TKey, TValue>[]) {
+    const groupedItems: BatchItem<TKey, TValue>[][] = [[]];
+    let index = 0;
+    while (true) {
+      const item = items[index];
+      if (!item) {
+        // we're done
+        break;
+      }
+      const lastGroup = groupedItems[groupedItems.length - 1]!;
+
+      if (item.aborted) {
+        // Item was aborted before it was dispatched
+        item.reject(new Error('Aborted'));
+        index++;
+        continue;
+      }
+
+      const isValid = batchLoader.validate(
+        lastGroup.concat(item).map((it) => it.key),
+      );
+
+      if (isValid) {
+        lastGroup.push(item);
+        index++;
+        continue;
+      }
+
+      if (lastGroup.length === 0) {
+        item.reject(new Error('Input is too big for a single dispatch'));
+        index++;
+        continue;
+      }
+      // Create new group, next iteration will try to add the item to that
+      groupedItems.push([]);
+    }
+    return groupedItems;
+  }
+
   function dispatch() {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const batchCopy = batch!;
-    destroyTimerAndBatch();
-    const { promise, cancel } = fetchMany(batchCopy.items.map((v) => v.key));
-    batchCopy.cancel = cancel;
-
-    promise
-      .then((result) => {
-        for (let i = 0; i < result.length; i++) {
-          const value = result[i];
-          batchCopy.items[i].resolve(value);
-        }
-      })
-      .catch((cause) => {
-        for (const item of batchCopy.items) {
-          item.reject(cause);
-        }
-      });
+    const groupedItems = groupItems(pendingItems!);
+    destroyTimerAndPendingItems();
+
+    // Create batches for each group of items
+    for (const items of groupedItems) {
+      if (!items.length) {
+        continue;
+      }
+      const batch: Batch<TKey, TValue> = {
+        items,
+        cancel: throwFatalError,
+      };
+      for (const item of items) {
+        item.batch = batch;
+      }
+      const { promise, cancel } = batchLoader.fetch(
+        batch.items.map((_item) => _item.key),
+      );
+      batch.cancel = cancel;
+
+      promise
+        .then((result) => {
+          for (let i = 0; i < result.length; i++) {
+            const value = result[i]!;
+            const item = batch.items[i]!;
+            item.resolve(value);
+            item.batch = null;
+          }
+        })
+        .catch((cause) => {
+          for (const item of batch.items) {
+            item.reject(cause);
+            item.batch = null;
+          }
+        });
+    }
   }
   function load(key: TKey): PromiseAndCancel<TValue> {
-    const batchItem = {
-      cancelled: false,
+    const item: BatchItem<TKey, TValue> = {
+      aborted: false,
       key,
+      batch: null,
+      resolve: throwFatalError,
+      reject: throwFatalError,
     };
 
-    if (!batch) {
-      batch = {
-        items: [],
-        cancel() {
-          destroyTimerAndBatch();
-        },
-      };
-    }
-    const thisBatch = batch;
     const promise = new Promise<TValue>((resolve, reject) => {
-      const item = batchItem as any as BatchItem<TKey, TValue>;
       item.reject = reject;
       item.resolve = resolve;
-      thisBatch.items.push(item);
+
+      if (!pendingItems) {
+        pendingItems = [];
+      }
+      pendingItems.push(item);
     });
+
     if (!dispatchTimer) {
       dispatchTimer = setTimeout(dispatch);
     }
     const cancel = () => {
-      batchItem.cancelled = true;
+      item.aborted = true;
 
-      if (thisBatch.items.some((item) => !item.cancelled)) {
-        // there are still things that can be resolved
-        return;
+      if (item.batch?.items.every((item) => item.aborted)) {
+        // All items in the batch have been cancelled
+        item.batch.cancel();
+        item.batch = null;
       }
-      thisBatch.cancel();
     };
 
     return { promise, cancel };

package/src/links/dedupeLink.test.ts

@@ -1,7 +1,7 @@
 import { waitFor } from '@testing-library/dom';
 import { AnyRouter } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
 import { OperationLink } from '..';
-import { observable } from '../rx/observable';
 import { dedupeLink } from './dedupeLink';
 import { createChain } from './internals/createChain';
 
@@ -17,13 +17,10 @@ test('dedupeLink', async () => {
         const timer = setTimeout(() => {
           timerTriggered();
           subscribe.next({
-            data: {
-              id: null,
-              result: {
-                type: 'data',
-                data: {
-                  input: op.input,
-                },
+            result: {
+              type: 'data',
+              data: {
+                input: op.input,
               },
             },
           });
@@ -80,13 +77,10 @@ test('dedupe - cancel one does not cancel the other', async () => {
         const timer = setTimeout(() => {
           timerTriggered();
           subscribe.next({
-            data: {
-              id: null,
-              result: {
-                type: 'data',
-                data: {
-                  input: op.input,
-                },
+            result: {
+              type: 'data',
+              data: {
+                input: op.input,
               },
             },
           });

package/src/links/dedupeLink.ts

@@ -1,7 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../rx/observable';
-import { share } from '../rx/operators';
-import { Observable } from '../rx/types';
+import { Observable, observable, share } from '@trpc/server/observable';
 import { TRPCLink } from './types';
 
 export function dedupeLink<
@@ -19,16 +17,17 @@ export function dedupeLink<
         return next(op);
       }
       const key = JSON.stringify([op.path, op.input]);
-      if (pending[key]) {
+      const obs$ = pending[key];
+      if (obs$) {
         // console.log('hooking into pending', { op });
-        return observable((observer) => pending[key].subscribe(observer));
+        return observable((observer) => obs$.subscribe(observer));
       }
 
       const shared$ = observable((observer) => {
         function reset() {
           delete pending[key];
         }
-        const next$ = next(op).subscribe({
+        const subscription = next(op).subscribe({
           next(v) {
             observer.next(v);
           },
@@ -43,7 +42,7 @@ export function dedupeLink<
         });
         return () => {
           reset();
-          next$.unsubscribe();
+          subscription.unsubscribe();
         };
       }).pipe(share());
       pending[key] = shared$;

package/src/links/httpBatchLink.ts

@@ -1,47 +1,80 @@
 import { AnyRouter, ProcedureType } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import { TRPCClientError } from '../TRPCClientError';
 import { dataLoader } from '../internals/dataLoader';
-import { observable } from '../rx/observable';
+import {
+  HTTPLinkOptions,
+  HTTPResult,
+  getUrl,
+  httpRequest,
+} from './internals/httpUtils';
+import { transformResult } from './internals/transformResult';
 import { TRPCLink } from './types';
-import { HTTPLinkOptions, httpRequest, ResponseShape } from './httpUtils';
+
+export interface HttpBatchLinkOptions extends HTTPLinkOptions {
+  maxURLLength?: number;
+}
 
 export function httpBatchLink<TRouter extends AnyRouter>(
-  opts: HTTPLinkOptions,
+  opts: HttpBatchLinkOptions,
 ): TRPCLink<TRouter> {
-  const { url } = opts;
+  // initialized config
   return (runtime) => {
-    type Key = { id: number; path: string; input: unknown };
-    const fetcher = (type: ProcedureType) => (keyInputPairs: Key[]) => {
-      const path = keyInputPairs.map((op) => op.path).join(',');
-      const inputs = keyInputPairs.map((op) => op.input);
-
-      const { promise, cancel } = httpRequest({
-        url,
-        inputs,
-        path,
-        runtime,
-        type,
-      });
+    type BatchOperation = { id: number; path: string; input: unknown };
+
+    const maxURLLength = opts.maxURLLength || Infinity;
+
+    const batchLoader = (type: ProcedureType) => {
+      const validate = (batchOps: BatchOperation[]) => {
+        if (maxURLLength === Infinity) {
+          // escape hatch for quick calcs
+          return true;
+        }
+        const path = batchOps.map((op) => op.path).join(',');
+        const inputs = batchOps.map((op) => op.input);
+
+        const url = getUrl({ url: opts.url, runtime, type, path, inputs });
+        return url.length <= maxURLLength;
+      };
 
-      return {
-        promise: promise.then((res) => {
-          const resJSON = Array.isArray(res.json)
-            ? res.json
-            : keyInputPairs.map(() => res.json);
+      const fetch = (batchOps: BatchOperation[]) => {
+        const path = batchOps.map((op) => op.path).join(',');
+        const inputs = batchOps.map((op) => op.input);
 
-          const result = resJSON.map((item) => ({
-            meta: res.meta,
-            json: item,
-          }));
+        const { promise, cancel } = httpRequest({
+          url: opts.url,
+          runtime,
+          type,
+          path,
+          inputs,
+        });
 
-          return result;
-        }),
-        cancel,
+        return {
+          promise: promise.then((res) => {
+            const resJSON = Array.isArray(res.json)
+              ? res.json
+              : batchOps.map(() => res.json);
+
+            const result = resJSON.map((item) => ({
+              meta: res.meta,
+              json: item,
+            }));
+
+            return result;
+          }),
+          cancel,
+        };
       };
+
+      return { validate, fetch };
     };
-    const query = dataLoader<Key, ResponseShape>(fetcher('query'));
-    const mutation = dataLoader<Key, ResponseShape>(fetcher('mutation'));
-    const subscription = dataLoader<Key, ResponseShape>(
-      fetcher('subscription'),
+
+    const query = dataLoader<BatchOperation, HTTPResult>(batchLoader('query'));
+    const mutation = dataLoader<BatchOperation, HTTPResult>(
+      batchLoader('mutation'),
+    );
+    const subscription = dataLoader<BatchOperation, HTTPResult>(
+      batchLoader('subscription'),
     );
 
     const loaders = { query, subscription, mutation };
@@ -52,13 +85,23 @@ export function httpBatchLink<TRouter extends AnyRouter>(
 
         promise
           .then((res) => {
+            const transformed = transformResult(res.json, runtime);
+
+            if (!transformed.ok) {
+              observer.error(
+                TRPCClientError.from(transformed.error, {
+                  meta: res.meta,
+                }),
+              );
+              return;
+            }
             observer.next({
               context: res.meta,
-              data: res.json as any,
+              result: transformed.result,
             });
             observer.complete();
           })
-          .catch((err) => observer.error(err as any));
+          .catch((err) => observer.error(TRPCClientError.from(err)));
 
         return () => {
           cancel();

package/src/links/httpLink.ts

@@ -1,7 +1,9 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../rx/observable';
+import { observable } from '@trpc/server/observable';
+import { TRPCClientError } from '../TRPCClientError';
+import { HTTPLinkOptions, httpRequest } from './internals/httpUtils';
+import { transformResult } from './internals/transformResult';
 import { TRPCLink } from './types';
-import { HTTPLinkOptions, httpRequest } from './httpUtils';
 
 export function httpLink<TRouter extends AnyRouter>(
   opts: HTTPLinkOptions,
@@ -12,21 +14,31 @@ export function httpLink<TRouter extends AnyRouter>(
       observable((observer) => {
         const { path, input, type } = op;
         const { promise, cancel } = httpRequest({
+          url,
           runtime,
+          type,
           path,
           input,
-          type,
-          url,
         });
         promise
           .then((res) => {
+            const transformed = transformResult(res.json, runtime);
+
+            if (!transformed.ok) {
+              observer.error(
+                TRPCClientError.from(transformed.error, {
+                  meta: res.meta,
+                }),
+              );
+              return;
+            }
             observer.next({
               context: res.meta,
-              data: res.json as any,
+              result: transformed.result,
             });
             observer.complete();
           })
-          .catch(observer.error);
+          .catch((cause) => observer.error(TRPCClientError.from(cause)));
 
         return () => {
           cancel();

package/src/links/index.ts

@@ -0,0 +1,8 @@
+export * from './dedupeLink';
+export * from './httpBatchLink';
+export * from './httpLink';
+export * from './loggerLink';
+export * from './retryLink';
+export * from './splitLink';
+export * from './wsLink';
+export * from './types';

package/src/links/internals/createChain.test.ts

@@ -1,6 +1,6 @@
+import { observable } from '@trpc/server/observable';
 import { AnyRouter } from '@trpc/server/src';
 import { createChain } from './createChain';
-import { observable } from '../../rx/observable';
 
 describe('chain', () => {
   test('trivial', () => {
@@ -8,9 +8,9 @@ describe('chain', () => {
       links: [
         ({ next, op }) => {
           return observable((observer) => {
-            const next$ = next(op).subscribe(observer);
+            const subscription = next(op).subscribe(observer);
             return () => {
-              next$.unsubscribe();
+              subscription.unsubscribe();
             };
           });
         },
@@ -18,13 +18,10 @@ describe('chain', () => {
           return observable((observer) => {
             observer.next({
               context: {},
-              data: {
-                id: null,
-                result: {
-                  type: 'data',
-                  data: {
-                    input: op.input,
-                  },
+              result: {
+                type: 'data',
+                data: {
+                  input: op.input,
                 },
               },
             });
@@ -54,30 +51,24 @@ describe('chain', () => {
           return observable((observer) => {
             observer.next({
               context: {},
-              data: {
-                id: null,
-                result: {
-                  type: 'data',
-                  data: 'from cache',
-                },
+              result: {
+                type: 'data',
+                data: 'from cache',
               },
             });
-            const next$ = next(op).subscribe(observer);
+            const subscription = next(op).subscribe(observer);
             return () => {
-              next$.unsubscribe();
+              subscription.unsubscribe();
             };
           });
         },
         ({ op }) => {
           return observable((observer) => {
             observer.next({
-              data: {
-                id: null,
-                result: {
-                  type: 'data',
-                  data: {
-                    input: op.input,
-                  },
+              result: {
+                type: 'data',
+                data: {
+                  input: op.input,
                 },
               },
             });
@@ -103,12 +94,9 @@ describe('chain', () => {
       Array [
         Object {
           "context": Object {},
-          "data": Object {
-            "id": null,
-            "result": Object {
-              "data": "from cache",
-              "type": "data",
-            },
+          "result": Object {
+            "data": "from cache",
+            "type": "data",
           },
         },
       ]
@@ -116,14 +104,11 @@ describe('chain', () => {
     expect(next.mock.calls[1]).toMatchInlineSnapshot(`
       Array [
         Object {
-          "data": Object {
-            "id": null,
-            "result": Object {
-              "data": Object {
-                "input": "world",
-              },
-              "type": "data",
+          "result": Object {
+            "data": Object {
+              "input": "world",
             },
+            "type": "data",
           },
         },
       ]

package/src/links/internals/createChain.ts

@@ -1,5 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../../rx/observable';
+import { observable } from '@trpc/server/observable';
 import { Operation, OperationLink, OperationResultObservable } from '../types';
 
 /** @internal */
@@ -14,7 +14,12 @@ export function createChain<
   return observable((observer) => {
     function execute(index = 0, op = opts.op) {
       const next = opts.links[index];
-      const next$ = next({
+      if (!next) {
+        throw new Error(
+          'No more links to execute - did you forget to add an ending link?',
+        );
+      }
+      const subscription = next({
         op,
         next(nextOp) {
           const nextObserver = execute(index + 1, nextOp);
@@ -22,7 +27,7 @@ export function createChain<
           return nextObserver;
         },
       });
-      return next$;
+      return subscription;
     }
 
     const obs$ = execute();