@trpc/client 10.0.0-alpha.21 → 10.0.0-alpha.24

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',
+  );
 };
 
 /**
@@ -21,79 +35,127 @@ type BatchLoadFn<TKey, TValue> = (keys: TKey[]) => {
  * 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>,
-  opts?: { maxBatchSize?: number },
+  batchLoader: BatchLoader<TKey, TValue>,
 ) {
-  let batch: Batch<TKey, TValue> | null = null;
-  let dispatchTimer: NodeJS.Timer | number | null = null;
+  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];
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          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 (
-        typeof opts?.maxBatchSize !== 'undefined' &&
-        thisBatch.items.length >= opts.maxBatchSize
-      ) {
-        dispatch();
-        return;
+
+      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 '../observable';
 import { dedupeLink } from './dedupeLink';
 import { createChain } from './internals/createChain';
 

package/src/links/dedupeLink.ts

@@ -1,6 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable, share } from '../observable';
-import { Observable } from '../observable/types';
+import { Observable, observable, share } from '@trpc/server/observable';
 import { TRPCLink } from './types';
 
 export function dedupeLink<

package/src/links/httpBatchLink.ts

@@ -1,57 +1,80 @@
 import { AnyRouter, ProcedureType } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
 import { dataLoader } from '../internals/dataLoader';
-import { observable } from '../observable';
 import {
   HTTPLinkOptions,
   ResponseShape,
+  getUrl,
   httpRequest,
 } from './internals/httpUtils';
 import { TRPCLink } from './types';
 
 export interface HttpBatchLinkOptions extends HTTPLinkOptions {
-  maxBatchSize?: number;
+  maxURLLength?: number;
 }
+
 export function httpBatchLink<TRouter extends AnyRouter>(
   opts: HttpBatchLinkOptions,
 ): TRPCLink<TRouter> {
-  const { url } = opts;
   // initialized config
   return (runtime) => {
-    type Key = { id: number; path: string; input: unknown };
+    type BatchOperation = { 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 maxURLLength = opts.maxURLLength || Infinity;
 
-      const { promise, cancel } = httpRequest({
-        url,
-        inputs,
-        path,
-        runtime,
-        type,
-      });
+    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;
+      };
+
+      const fetch = (batchOps: BatchOperation[]) => {
+        const path = batchOps.map((op) => op.path).join(',');
+        const inputs = batchOps.map((op) => op.input);
+
+        const { promise, cancel } = httpRequest({
+          url: opts.url,
+          runtime,
+          type,
+          path,
+          inputs,
+        });
 
-      return {
-        promise: promise.then((res) => {
-          const resJSON = Array.isArray(res.json)
-            ? res.json
-            : keyInputPairs.map(() => res.json);
+        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,
-          }));
+            const result = resJSON.map((item) => ({
+              meta: res.meta,
+              json: item,
+            }));
 
-          return result;
-        }),
-        cancel,
+            return result;
+          }),
+          cancel,
+        };
       };
+
+      return { validate, fetch };
     };
-    const query = dataLoader<Key, ResponseShape>(fetcher('query'), opts);
-    const mutation = dataLoader<Key, ResponseShape>(fetcher('mutation'), opts);
-    const subscription = dataLoader<Key, ResponseShape>(
-      fetcher('subscription'),
-      opts,
+
+    const query = dataLoader<BatchOperation, ResponseShape>(
+      batchLoader('query'),
+    );
+    const mutation = dataLoader<BatchOperation, ResponseShape>(
+      batchLoader('mutation'),
+    );
+    const subscription = dataLoader<BatchOperation, ResponseShape>(
+      batchLoader('subscription'),
     );
 
     const loaders = { query, subscription, mutation };

package/src/links/httpLink.ts

@@ -1,5 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../observable';
+import { observable } from '@trpc/server/observable';
 import { HTTPLinkOptions, httpRequest } from './internals/httpUtils';
 import { TRPCLink } from './types';
 
@@ -12,11 +12,11 @@ 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) => {

package/src/links/index.ts

@@ -2,9 +2,7 @@ export * from './dedupeLink';
 export * from './httpBatchLink';
 export * from './httpLink';
 export * from './loggerLink';
-export * from './loggerLink';
 export * from './retryLink';
 export * from './splitLink';
-export * from './transformerLink';
 export * from './wsLink';
 export * from './types';

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

@@ -1,5 +1,5 @@
+import { observable } from '@trpc/server/observable';
 import { AnyRouter } from '@trpc/server/src';
-import { observable } from '../../observable';
 import { createChain } from './createChain';
 
 describe('chain', () => {

package/src/links/internals/createChain.ts

@@ -1,5 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../../observable/observable';
+import { observable } from '@trpc/server/observable';
 import { Operation, OperationLink, OperationResultObservable } from '../types';
 
 /** @internal */

package/src/links/internals/httpUtils.ts

@@ -1,5 +1,5 @@
 import { ProcedureType } from '@trpc/server';
-import { LinkRuntime, PromiseAndCancel } from '../types';
+import { PromiseAndCancel, TRPCClientRuntime } from '../types';
 
 export interface HTTPLinkOptions {
   url: string;
@@ -14,6 +14,7 @@ function arrayToDict(array: unknown[]) {
   }
   return dict;
 }
+
 const METHOD = {
   query: 'GET',
   mutation: 'POST',
@@ -26,50 +27,70 @@ export interface ResponseShape {
     response: Response;
   };
 }
-export function httpRequest(
-  props: {
-    runtime: LinkRuntime;
+
+type GetInputOptions = {
+  runtime: TRPCClientRuntime;
+} & ({ inputs: unknown[] } | { input: unknown });
+
+function getInput(opts: GetInputOptions) {
+  return 'input' in opts
+    ? opts.runtime.transformer.serialize(opts.input)
+    : arrayToDict(
+        opts.inputs.map((_input) => opts.runtime.transformer.serialize(_input)),
+      );
+}
+
+export type HTTPRequestOptions = HTTPLinkOptions &
+  GetInputOptions & {
     type: ProcedureType;
     path: string;
-    url: string;
-  } & ({ inputs: unknown[] } | { input: unknown }),
-): PromiseAndCancel<ResponseShape> {
-  const { type, runtime: rt, path } = props;
-  const ac = rt.AbortController ? new rt.AbortController() : null;
-
-  const input = 'input' in props ? props.input : arrayToDict(props.inputs);
+  };
 
-  function getUrl() {
-    let url = props.url + '/' + path;
-    const queryParts: string[] = [];
-    if ('inputs' in props) {
-      queryParts.push('batch=1');
-    }
-    if (type === 'query' && input !== undefined) {
+export function getUrl(opts: HTTPRequestOptions) {
+  let url = opts.url + '/' + opts.path;
+  const queryParts: string[] = [];
+  if ('inputs' in opts) {
+    queryParts.push('batch=1');
+  }
+  if (opts.type === 'query') {
+    const input = getInput(opts);
+    if (input !== undefined) {
       queryParts.push(`input=${encodeURIComponent(JSON.stringify(input))}`);
     }
-    if (queryParts.length) {
-      url += '?' + queryParts.join('&');
-    }
-    return url;
   }
-  function getBody() {
-    if (type === 'query') {
-      return undefined;
-    }
-    return input !== undefined ? JSON.stringify(input) : undefined;
+  if (queryParts.length) {
+    url += '?' + queryParts.join('&');
+  }
+  return url;
+}
+
+type GetBodyOptions = { type: ProcedureType } & GetInputOptions;
+
+export function getBody(opts: GetBodyOptions) {
+  if (opts.type === 'query') {
+    return undefined;
   }
+  const input = getInput(opts);
+  return input !== undefined ? JSON.stringify(input) : undefined;
+}
+
+export function httpRequest(
+  opts: HTTPRequestOptions,
+): PromiseAndCancel<ResponseShape> {
+  const { type, runtime } = opts;
+  const ac = runtime.AbortController ? new runtime.AbortController() : null;
 
   const promise = new Promise<ResponseShape>((resolve, reject) => {
-    const url = getUrl();
+    const url = getUrl(opts);
+    const body = getBody(opts);
 
     const meta = {} as any as ResponseShape['meta'];
-    Promise.resolve(rt.headers())
+    Promise.resolve(runtime.headers())
       .then((headers) =>
-        rt.fetch(url, {
+        runtime.fetch(url, {
           method: METHOD[type],
           signal: ac?.signal,
-          body: getBody(),
+          body: body,
           headers: {
             'content-type': 'application/json',
             ...headers,

package/src/links/internals/transformOperationResult.ts

@@ -1,25 +1,53 @@
 import { AnyRouter } from '@trpc/server';
+import { TRPCResultMessage } from '@trpc/server/rpc';
+import { TRPCClientRuntime } from '..';
 import { TRPCClientError } from '../../TRPCClientError';
 import { OperationResult } from '../types';
 
 /** @internal */
 export function transformOperationResult<TRouter extends AnyRouter, TOutput>(
   result: OperationResult<TRouter, TOutput>,
+  runtime: TRPCClientRuntime,
 ) {
   const { context } = result;
 
   if ('error' in result.data) {
-    const error = TRPCClientError.from<TRouter>(result.data);
-    return {
-      ok: false,
-      error,
-      context,
-    } as const;
+    const error = TRPCClientError.from<TRouter>({
+      ...result.data,
+      error: runtime.transformer.deserialize(result.data.error),
+    });
+    return { ok: false, error, context } as const;
   }
-  const data = (result.data.result as any).data as TOutput;
-  return {
-    ok: true,
-    data,
-    context,
-  } as const;
+
+  const data = runtime.transformer.deserialize(
+    (result.data.result as any).data,
+  ) as TOutput;
+  return { ok: true, data, context } as const;
+}
+
+/** @internal */
+export function transformSubscriptionOperationResult<
+  TRouter extends AnyRouter,
+  TOutput,
+>(result: OperationResult<TRouter, TOutput>, runtime: TRPCClientRuntime) {
+  const { context } = result;
+
+  if ('error' in result.data) {
+    const error = TRPCClientError.from<TRouter>(
+      {
+        ...result.data,
+        error: runtime.transformer.deserialize(result.data.error),
+      },
+      { meta: context },
+    );
+    return { ok: false, error, context } as const;
+  }
+
+  const data = {
+    ...result.data.result,
+    ...((result.data.result as any).type === 'data' && {
+      data: runtime.transformer.deserialize((result.data.result as any).data),
+    }),
+  } as TRPCResultMessage<TOutput>;
+  return { ok: true, data, context } as const;
 }

package/src/links/loggerLink.ts

@@ -1,6 +1,6 @@
 import { AnyRouter } from '@trpc/server';
+import { observable, tap } from '@trpc/server/observable';
 import { TRPCClientError } from '..';
-import { observable, tap } from '../observable';
 import { Operation, OperationResult, TRPCLink } from './types';
 
 type ConsoleEsque = {

package/src/links/retryLink.ts

@@ -1,6 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../observable/observable';
-import { Unsubscribable } from '../observable/types';
+import { Unsubscribable, observable } from '@trpc/server/observable';
 import { TRPCLink } from './types';
 
 export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {

package/src/links/splitLink.test.ts

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
+import { observable } from '@trpc/server/observable';
 import { splitLink } from '../';
 import { OperationLink, TRPCLink } from '../';
 import { AnyRouter } from '../../../server/src';
 import { createChain } from '../links/internals/createChain';
-import { observable } from '../observable';
 
 test('splitLink', () => {
   const wsLinkSpy = jest.fn();

package/src/links/splitLink.ts

@@ -1,5 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../observable';
+import { observable } from '@trpc/server/observable';
 import { createChain } from './internals/createChain';
 import { Operation, TRPCLink } from './types';
 
@@ -17,9 +17,9 @@ export function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
    */
   false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
 }): TRPCLink<TRouter> {
-  return (rt) => {
-    const yes = asArray(opts.true).map((link) => link(rt));
-    const no = asArray(opts.false).map((link) => link(rt));
+  return (runtime) => {
+    const yes = asArray(opts.true).map((link) => link(runtime));
+    const no = asArray(opts.false).map((link) => link(runtime));
     return (props) => {
       return observable((observer) => {
         const links = opts.condition(props.op) ? yes : no;

package/src/links/types.ts

@@ -1,7 +1,7 @@
-import { AnyRouter, inferRouterError } from '@trpc/server';
-import { TRPCResponse } from '@trpc/server/rpc';
+import { AnyRouter, DataTransformer, inferRouterError } from '@trpc/server';
+import { Observable, Observer } from '@trpc/server/observable';
+import { TRPCResponse, TRPCResponseMessage } from '@trpc/server/rpc';
 import { TRPCClientError } from '../TRPCClientError';
-import { Observable, Observer } from '../observable/types';
 
 export type CancelFn = () => void;
 
@@ -30,14 +30,19 @@ export type TRPCFetch = (
   options?: RequestInit,
 ) => Promise<Response>;
 
-export interface LinkRuntime {
-  headers: () => HTTPHeaders | Promise<HTTPHeaders>;
+export interface TRPCClientRuntime {
   fetch: TRPCFetch;
   AbortController?: typeof AbortController;
+  headers: () => HTTPHeaders | Promise<HTTPHeaders>;
+  transformer: DataTransformer;
 }
 
+type OperationResultData<TRouter extends AnyRouter, TOutput> =
+  | TRPCResponse<TOutput, inferRouterError<TRouter>>
+  | TRPCResponseMessage<TOutput, inferRouterError<TRouter>>;
+
 export interface OperationResult<TRouter extends AnyRouter, TOutput> {
-  data: TRPCResponse<TOutput, inferRouterError<TRouter>>;
+  data: OperationResultData<TRouter, TOutput>;
   context?: OperationContext;
 }
 
@@ -61,5 +66,5 @@ export type OperationLink<
 }) => OperationResultObservable<TRouter, TOutput>;
 
 export type TRPCLink<TRouter extends AnyRouter> = (
-  opts: LinkRuntime,
+  opts: TRPCClientRuntime,
 ) => OperationLink<TRouter>;