@trpc/client 9.18.0 → 10.0.0-alpha.3

package/rx/operators/dist/trpc-client-rx-operators.cjs.prod.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var share = require('../../../dist/share-5a8c2543.cjs.prod.js');
+var tap = require('../../../dist/tap-d907998d.cjs.prod.js');
+require('@babel/runtime/helpers/createForOfIteratorHelper');
+
+function map(project) {
+  return function (originalObserver) {
+    return {
+      subscribe: function subscribe(observer) {
+        var index = 0;
+        var subscription = originalObserver.subscribe({
+          next: function next(value) {
+            var _observer$next;
+
+            (_observer$next = observer.next) === null || _observer$next === void 0 ? void 0 : _observer$next.call(observer, project(value, index++));
+          },
+          error: function error(_error) {
+            var _observer$error;
+
+            (_observer$error = observer.error) === null || _observer$error === void 0 ? void 0 : _observer$error.call(observer, _error);
+          },
+          complete: function complete() {
+            var _observer$complete;
+
+            (_observer$complete = observer.complete) === null || _observer$complete === void 0 ? void 0 : _observer$complete.call(observer);
+          }
+        });
+        return subscription;
+      }
+    };
+  };
+}
+
+exports.share = share.share;
+exports.tap = tap.tap;
+exports.map = map;

package/rx/operators/dist/trpc-client-rx-operators.esm.js

@@ -0,0 +1,33 @@
+export { s as share } from '../../../dist/share-ca585761.esm.js';
+export { t as tap } from '../../../dist/tap-606957cb.esm.js';
+import '@babel/runtime/helpers/createForOfIteratorHelper';
+
+function map(project) {
+  return function (originalObserver) {
+    return {
+      subscribe: function subscribe(observer) {
+        var index = 0;
+        var subscription = originalObserver.subscribe({
+          next: function next(value) {
+            var _observer$next;
+
+            (_observer$next = observer.next) === null || _observer$next === void 0 ? void 0 : _observer$next.call(observer, project(value, index++));
+          },
+          error: function error(_error) {
+            var _observer$error;
+
+            (_observer$error = observer.error) === null || _observer$error === void 0 ? void 0 : _observer$error.call(observer, _error);
+          },
+          complete: function complete() {
+            var _observer$complete;
+
+            (_observer$complete = observer.complete) === null || _observer$complete === void 0 ? void 0 : _observer$complete.call(observer);
+          }
+        });
+        return subscription;
+      }
+    };
+  };
+}
+
+export { map };

package/rx/operators/index.d.ts

@@ -0,0 +1 @@
+export * from '../../dist/rx/operators';

package/rx/operators/index.js

@@ -0,0 +1 @@
+module.exports = require('../../dist/rx/operators/index');

package/src/TRPCClientError.ts

@@ -18,58 +18,54 @@ export class TRPCClientError<TRouter extends AnyRouter>
   public readonly cause;
   public readonly shape: Maybe<inferRouterError<TRouter>>;
   public readonly data: Maybe<inferRouterError<TRouter>['data']>;
-  /**
-   * Fatal error - expect no more results after this error
-   * Used for when WebSockets disconnect prematurely.
-   */
-  public readonly isDone: boolean;
+  public readonly meta;
 
   constructor(
     message: string,
-    opts: {
+    opts?: {
       result: Maybe<TRPCErrorResponse<inferRouterError<TRouter>>>;
       /**
-       * @deprecated use cause
+       * @deprecated use `cause`
        **/
       originalError?: Maybe<Error>;
       cause?: Maybe<Error>;
-      isDone?: boolean;
+      meta?: Record<string, unknown>;
     },
   ) {
-    const cause = opts.cause ?? opts.originalError;
+    const cause = opts?.cause ?? opts?.originalError;
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore https://github.com/tc39/proposal-error-cause
     super(message, { cause });
 
-    this.isDone = opts.isDone ?? false;
+    this.meta = opts?.meta;
 
     this.cause = this.originalError = cause;
-    this.shape = opts.result?.error;
-    this.data = opts.result?.error.data;
+    this.shape = opts?.result?.error;
+    this.data = opts?.result?.error.data;
     this.name = 'TRPCClientError';
 
     Object.setPrototypeOf(this, TRPCClientError.prototype);
   }
 
   public static from<TRouter extends AnyRouter>(
-    result: Error | TRPCErrorResponse<any>,
-    opts: { isDone?: boolean } = {},
+    cause: Error | TRPCErrorResponse<any>,
+    opts: { meta?: Record<string, unknown> } = {},
   ): TRPCClientError<TRouter> {
-    if (!(result instanceof Error)) {
-      return new TRPCClientError<TRouter>((result.error as any).message ?? '', {
+    if (!(cause instanceof Error)) {
+      return new TRPCClientError<TRouter>((cause.error as any).message ?? '', {
         ...opts,
         cause: null,
-        result: result,
+        result: cause,
       });
     }
-    if (result.name === 'TRPCClientError') {
-      return result as TRPCClientError<any>;
+    if (cause.name === 'TRPCClientError') {
+      return cause as TRPCClientError<any>;
     }
 
-    return new TRPCClientError<TRouter>(result.message, {
+    return new TRPCClientError<TRouter>(cause.message, {
       ...opts,
-      cause: result,
+      cause,
       result: null,
     });
   }

package/src/createTRPCClient.ts

@@ -11,8 +11,9 @@ export function createTRPCClient<TRouter extends AnyRouter>(
   return new Client<TRouter>(opts);
 }
 
-export type { CreateTRPCClientOptions } from './internals/TRPCClient';
-
 export type TRPCClient<TRouter extends AnyRouter> = Client<TRouter>;
 
-export type { TRPCRequestOptions } from './internals/TRPCClient';
+export type {
+  TRPCRequestOptions,
+  CreateTRPCClientOptions,
+} from './internals/TRPCClient';

package/src/index.ts

@@ -1,4 +1,4 @@
 export * from './createTRPCClient';
 export * from './getFetch';
-export * from './links/core';
+export * from './links/types';
 export * from './TRPCClientError';

package/src/internals/TRPCClient.ts

@@ -1,28 +1,30 @@
 import {
   AnyRouter,
-  ClientDataTransformerOptions,
-  DataTransformer,
   inferHandlerInput,
   inferProcedureInput,
   inferProcedureOutput,
   inferSubscriptionOutput,
 } from '@trpc/server';
 import { TRPCResult } from '@trpc/server/rpc';
-import { executeChain } from './executeChain';
-import { getAbortController } from './fetchHelpers';
+import { CancelFn } from '..';
 import { getFetch } from '../getFetch';
-import { ObservableCallbacks, UnsubscribeFn } from './observable';
-import { TRPCAbortError } from './TRPCAbortError';
+import { httpBatchLink } from '../links/httpBatchLink';
+import { createChain } from '../links/internals/createChain';
+import { transformOperationResult } from '../links/internals/transformOperationResult';
 import {
-  CancelFn,
   HTTPHeaders,
-  LinkRuntimeOptions,
+  LinkRuntime,
   OperationContext,
   OperationLink,
   TRPCLink,
-} from '../links/core';
-import { httpBatchLink } from '../links/httpBatchLink';
+} from '../links/types';
+import { UnsubscribeFn } from '../rx';
+import { inferObservableValue } from '../rx/observable';
+import { share } from '../rx/operators';
+import { Observer } from '../rx/types';
+import { observableToPromise } from '../rx/util/observableToPromise';
 import { TRPCClientError } from '../TRPCClientError';
+import { getAbortController } from './fetchHelpers';
 
 type CancellablePromise<T = unknown> = Promise<T> & {
   cancel: CancelFn;
@@ -39,8 +41,7 @@ let idCounter = 0;
 function getRequestId() {
   return ++idCounter;
 }
-
-export type CreateTRPCClientOptions<TRouter extends AnyRouter> = {
+interface CreateTRPCClientBaseOptions {
   /**
    * Add ponyfill for fetch
    */
@@ -53,25 +54,26 @@ export type CreateTRPCClientOptions<TRouter extends AnyRouter> = {
    * headers to be set on outgoing requests / callback that of said headers
    */
   headers?: HTTPHeaders | (() => HTTPHeaders | Promise<HTTPHeaders>);
+}
+
+/** @internal */
+export interface CreateTRPCClientWithURLOptions
+  extends CreateTRPCClientBaseOptions {
   /**
-   * Data transformer
-   * @link http://localhost:3000/docs/data-transformers
+   * HTTP URL of API
    **/
-  transformer?: ClientDataTransformerOptions;
-} & (
-  | {
-      /**
-       * HTTP URL of API
-       **/
-      url: string;
-    }
-  | {
-      /**
-       * @link http://localhost:3000/docs/links
-       **/
-      links: TRPCLink<TRouter>[];
-    }
-);
+  url: string;
+}
+
+/** @internal */
+export interface CreateTRPCClientWithLinksOptions<TRouter extends AnyRouter>
+  extends CreateTRPCClientBaseOptions {
+  /**
+   * @link http://localhost:3000/docs/links
+   **/
+  links: TRPCLink<TRouter>[];
+}
+
 type TRPCType = 'subscription' | 'query' | 'mutation';
 export interface TRPCRequestOptions {
   /**
@@ -79,27 +81,20 @@ export interface TRPCRequestOptions {
    */
   context?: OperationContext;
 }
+
+/** @internal */
+export type CreateTRPCClientOptions<TRouter extends AnyRouter> =
+  | CreateTRPCClientWithLinksOptions<TRouter>
+  | CreateTRPCClientWithURLOptions;
 export class TRPCClient<TRouter extends AnyRouter> {
   private readonly links: OperationLink<TRouter>[];
-  public readonly runtime: LinkRuntimeOptions;
+  public readonly runtime: LinkRuntime;
 
   constructor(opts: CreateTRPCClientOptions<TRouter>) {
-    const transformer: DataTransformer = opts.transformer
-      ? 'input' in opts.transformer
-        ? {
-            serialize: opts.transformer.input.serialize,
-            deserialize: opts.transformer.output.deserialize,
-          }
-        : opts.transformer
-      : {
-          serialize: (data) => data,
-          deserialize: (data) => data,
-        };
-
     const _fetch = getFetch(opts?.fetch);
     const AC = getAbortController(opts?.AbortController);
 
-    function getHeadersFn(): LinkRuntimeOptions['headers'] {
+    function getHeadersFn(): LinkRuntime['headers'] {
       if (opts.headers) {
         const headers = opts.headers;
         return typeof headers === 'function' ? headers : () => headers;
@@ -107,7 +102,6 @@ export class TRPCClient<TRouter extends AnyRouter> {
       return () => ({});
     }
     this.runtime = {
-      transformer,
       AbortController: AC as any,
       fetch: _fetch,
       headers: getHeadersFn(),
@@ -135,8 +129,8 @@ export class TRPCClient<TRouter extends AnyRouter> {
     path: string;
     context?: OperationContext;
   }) {
-    const $result = executeChain<TRouter, TInput, TOutput>({
-      links: this.links as any,
+    const chain$ = createChain<TRouter, TInput, TOutput>({
+      links: this.links as OperationLink<any, any, any>[],
       op: {
         id: getRequestId(),
         type,
@@ -145,8 +139,7 @@ export class TRPCClient<TRouter extends AnyRouter> {
         context,
       },
     });
-
-    return $result;
+    return chain$.pipe(share());
   }
   private requestAsPromise<TInput = unknown, TOutput = unknown>(opts: {
     type: TRPCType;
@@ -154,38 +147,29 @@ export class TRPCClient<TRouter extends AnyRouter> {
     path: string;
     context?: OperationContext;
   }): CancellablePromise<TOutput> {
-    const $result = this.$request<TInput, TOutput>(opts);
+    const req$ = this.$request<TInput, TOutput>(opts);
+    type TValue = inferObservableValue<typeof req$>;
+    const { promise, abort } = observableToPromise<TValue>(req$);
 
-    const promise = new Promise<TOutput>((resolve, reject) => {
-      const res = $result.get();
-      if (res?.type === 'data') {
-        resolve(res.data);
-        $result.done();
-        return;
-      }
-      $result.subscribe({
-        onNext: (result) => {
-          if (result?.type !== 'data') {
-            return;
-          }
-          resolve(result.data);
-
-          $result.done();
-        },
-        onError(err) {
-          reject(err);
-          $result.done();
-        },
-        onDone() {
-          reject(TRPCClientError.from(new TRPCAbortError()));
-        },
-      });
-    }) as CancellablePromise<TOutput>;
-    promise.cancel = () => {
-      $result.done();
-    };
+    const cancellablePromise: CancellablePromise<any> = new Promise<TOutput>(
+      (resolve, reject) => {
+        promise
+          .then((result) => {
+            const transformed = transformOperationResult(result);
+            if (transformed.ok) {
+              resolve(transformed.data as any);
+              return;
+            }
+            reject(transformed.error);
+          })
+          .catch((err) => {
+            reject(TRPCClientError.from(err));
+          });
+      },
+    ) as any;
+    cancellablePromise.cancel = abort;
 
-    return promise;
+    return cancellablePromise;
   }
   public query<
     TQueries extends TRouter['_def']['queries'],
@@ -233,27 +217,35 @@ export class TRPCClient<TRouter extends AnyRouter> {
     path: TPath,
     input: TInput,
     opts: TRPCRequestOptions &
-      ObservableCallbacks<TRPCResult<TOutput>, TRPCClientError<TRouter>>,
+      Partial<Observer<TRPCResult<TOutput>, TRPCClientError<TRouter>>>,
   ): UnsubscribeFn {
-    const $res = this.$request<TInput, TOutput>({
+    const observable$ = this.$request<TInput, TOutput>({
       type: 'subscription',
       path,
       input,
       context: opts.context,
     });
-    $res.subscribe({
-      onNext(output) {
-        if (output) {
-          opts.onNext?.(output);
+    const observer = observable$.subscribe({
+      next(result) {
+        if ('error' in result.data) {
+          const err = TRPCClientError.from(result.data, {
+            meta: result.context,
+          });
+
+          opts.error?.(err);
+          return;
         }
+        opts.next?.(result.data.result);
+      },
+      error(err) {
+        opts.error?.(err);
       },
-      onError(err) {
-        opts.onError?.(err);
+      complete() {
+        opts.complete?.();
       },
-      onDone: opts.onDone,
     });
     return () => {
-      $res.done();
+      observer.unsubscribe();
     };
   }
 }

package/src/internals/dataLoader.ts

@@ -1,4 +1,4 @@
-import { CancelFn, PromiseAndCancel } from '../links/core';
+import { CancelFn, PromiseAndCancel } from '../links/types';
 
 type BatchItem<TKey, TValue> = {
   cancelled: boolean;
@@ -20,10 +20,7 @@ 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>,
-  opts?: { maxBatchSize?: number },
-) {
+export function dataLoader<TKey, TValue>(fetchMany: BatchLoadFn<TKey, TValue>) {
   let batch: Batch<TKey, TValue> | null = null;
   let dispatchTimer: NodeJS.Timer | number | null = null;
 
@@ -72,16 +69,7 @@ export function dataLoader<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 (!dispatchTimer) {
       dispatchTimer = setTimeout(dispatch);
     }

package/src/internals/transformRPCResponse.ts

@@ -1,13 +1,13 @@
 import { TRPCResponse } from '@trpc/server/rpc';
 import { TRPCClientError } from '../TRPCClientError';
-import { LinkRuntimeOptions } from '../links/core';
+import { LinkRuntime } from '../links/types';
 
 export function transformRPCResponse({
   envelope,
   runtime,
 }: {
   envelope: TRPCResponse;
-  runtime: LinkRuntimeOptions;
+  runtime: LinkRuntime;
 }) {
   if ('error' in envelope) {
     return TRPCClientError.from({

package/src/links/dedupeLink.test.ts

@@ -0,0 +1,134 @@
+import { waitFor } from '@testing-library/dom';
+import { AnyRouter } from '@trpc/server';
+import { OperationLink } from '..';
+import { observable } from '../rx/observable';
+import { dedupeLink } from './dedupeLink';
+import { createChain } from './internals/createChain';
+
+test('dedupeLink', async () => {
+  const endingLinkTriggered = jest.fn();
+  const timerTriggered = jest.fn();
+  const links: OperationLink<AnyRouter, any, any>[] = [
+    // "dedupe link"
+    dedupeLink()(null as any),
+    ({ op }) => {
+      return observable((subscribe) => {
+        endingLinkTriggered();
+        const timer = setTimeout(() => {
+          timerTriggered();
+          subscribe.next({
+            data: {
+              id: null,
+              result: {
+                type: 'data',
+                data: {
+                  input: op.input,
+                },
+              },
+            },
+          });
+          subscribe.complete();
+        }, 1);
+        return () => clearTimeout(timer);
+      });
+    },
+  ];
+  {
+    const call1 = createChain<AnyRouter, unknown, unknown>({
+      links,
+      op: {
+        type: 'query',
+        id: 1,
+        input: 'world',
+        path: 'hello',
+        context: {},
+      },
+    });
+
+    const call2 = createChain<AnyRouter, unknown, unknown>({
+      links,
+      op: {
+        type: 'query',
+        id: 1,
+        input: 'world',
+        path: 'hello',
+        context: {},
+      },
+    });
+    const next = jest.fn();
+    call1.subscribe({ next });
+    call2.subscribe({ next });
+
+    expect(endingLinkTriggered).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(timerTriggered).toHaveBeenCalledTimes(1);
+    });
+
+    expect(next).toHaveBeenCalledTimes(2);
+  }
+});
+
+test('dedupe - cancel one does not cancel the other', async () => {
+  const endingLinkTriggered = jest.fn();
+  const timerTriggered = jest.fn();
+  const links: OperationLink<AnyRouter, any, any>[] = [
+    // "dedupe link"
+    dedupeLink()(null as any),
+    ({ op }) => {
+      return observable((subscribe) => {
+        endingLinkTriggered();
+        const timer = setTimeout(() => {
+          timerTriggered();
+          subscribe.next({
+            data: {
+              id: null,
+              result: {
+                type: 'data',
+                data: {
+                  input: op.input,
+                },
+              },
+            },
+          });
+          subscribe.complete();
+        }, 1);
+        return () => clearTimeout(timer);
+      });
+    },
+  ];
+
+  {
+    const call1 = createChain<AnyRouter, unknown, unknown>({
+      links,
+      op: {
+        type: 'query',
+        id: 1,
+        input: 'world',
+        path: 'hello',
+        context: {},
+      },
+    });
+
+    const call2 = createChain<AnyRouter, unknown, unknown>({
+      links,
+      op: {
+        type: 'query',
+        id: 1,
+        input: 'world',
+        path: 'hello',
+        context: {},
+      },
+    });
+    const next = jest.fn();
+    const call1$ = call1.subscribe({ next });
+    call2.subscribe({ next });
+    call1$.unsubscribe();
+
+    expect(endingLinkTriggered).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(timerTriggered).toHaveBeenCalledTimes(1);
+
+      expect(next).toHaveBeenCalledTimes(1);
+    });
+  }
+});

package/src/links/dedupeLink.ts

@@ -0,0 +1,53 @@
+import { AnyRouter } from '@trpc/server';
+import { observable } from '../rx/observable';
+import { share } from '../rx/operators';
+import { Observable } from '../rx/types';
+import { TRPCLink } from './types';
+
+export function dedupeLink<
+  TRouter extends AnyRouter = AnyRouter,
+>(): TRPCLink<TRouter> {
+  // initialized config
+  return () => {
+    // initialized in app
+    const pending: Record<string, Observable<any, any>> = {};
+    return ({ op, next }) => {
+      // initialized for request
+
+      if (op.type !== 'query') {
+        // pass through
+        return next(op);
+      }
+      const key = JSON.stringify([op.path, op.input]);
+      if (pending[key]) {
+        // console.log('hooking into pending', { op });
+        return observable((observer) => pending[key].subscribe(observer));
+      }
+
+      const shared$ = observable((observer) => {
+        function reset() {
+          delete pending[key];
+        }
+        const next$ = next(op).subscribe({
+          next(v) {
+            observer.next(v);
+          },
+          error(e) {
+            reset();
+            observer.error(e);
+          },
+          complete() {
+            reset();
+            observer.complete();
+          },
+        });
+        return () => {
+          reset();
+          next$.unsubscribe();
+        };
+      }).pipe(share());
+      pending[key] = shared$;
+      return shared$;
+    };
+  };
+}