@trpc/client 9.20.1 → 10.0.0-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "9.20.1",
+  "version": "10.0.0-alpha.10",
   "description": "tRPC Client lib",
   "author": "KATT",
   "license": "MIT",
@@ -10,37 +10,72 @@
     "url": "git+https://github.com/trpc/trpc.git",
     "directory": "packages/client"
   },
-  "preconstruct": {
-    "entrypoints": [
-      "index.ts",
-      "links/httpLink.ts",
-      "links/httpBatchLink.ts",
-      "links/splitLink.ts",
-      "links/loggerLink.ts",
-      "links/wsLink.ts"
-    ]
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./rx": {
+      "import": "./dist/rx.mjs",
+      "require": "./dist/rx.js",
+      "default": "./dist/rx.js"
+    },
+    "./links/httpBatchLink": {
+      "import": "./dist/links/httpBatchLink.mjs",
+      "require": "./dist/links/httpBatchLink.js",
+      "default": "./dist/links/httpBatchLink.js"
+    },
+    "./links/httpLink": {
+      "import": "./dist/links/httpLink.mjs",
+      "require": "./dist/links/httpLink.js",
+      "default": "./dist/links/httpLink.js"
+    },
+    "./links/loggerLink": {
+      "import": "./dist/links/loggerLink.mjs",
+      "require": "./dist/links/loggerLink.js",
+      "default": "./dist/links/loggerLink.js"
+    },
+    "./links/splitLink": {
+      "import": "./dist/links/splitLink.mjs",
+      "require": "./dist/links/splitLink.js",
+      "default": "./dist/links/splitLink.js"
+    },
+    "./links/transformerLink": {
+      "import": "./dist/links/transformerLink.mjs",
+      "require": "./dist/links/transformerLink.js",
+      "default": "./dist/links/transformerLink.js"
+    },
+    "./links/wsLink": {
+      "import": "./dist/links/wsLink.mjs",
+      "require": "./dist/links/wsLink.js",
+      "default": "./dist/links/wsLink.js"
+    }
   },
-  "scripts": {},
-  "main": "dist/trpc-client.cjs.js",
-  "module": "dist/trpc-client.esm.js",
-  "typings": "dist/trpc-client.cjs.d.ts",
   "files": [
     "README.md",
     "dist",
     "links",
     "src"
   ],
+  "scripts": {
+    "build": "rollup -c"
+  },
   "dependencies": {
-    "@babel/runtime": "^7.9.0"
+    "@babel/runtime": "^7.9.0",
+    "rxjs": "^7.0.0"
   },
   "peerDependencies": {
-    "@trpc/server": "9.20.1"
+    "@trpc/server": "10.0.0-alpha.10"
   },
   "devDependencies": {
-    "@trpc/server": "9.20.1"
+    "@trpc/server": "10.0.0-alpha.10"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fcacb235651d8ba9640af6b9752a981c520957ba"
+  "gitHead": "a1de7cd99bc36e26da285ed1cfdf8cb24dd5fd0b"
 }

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,28 @@
 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 { inferObservableValue, observableToPromise } from '../rx';
+import { share } from 'rxjs/operators';
+import { Observer, Subscription } from 'rxjs';
 import { TRPCClientError } from '../TRPCClientError';
+import { getAbortController } from './fetchHelpers';
 
 type CancellablePromise<T = unknown> = Promise<T> & {
   cancel: CancelFn;
@@ -39,8 +39,7 @@ let idCounter = 0;
 function getRequestId() {
   return ++idCounter;
 }
-
-export type CreateTRPCClientOptions<TRouter extends AnyRouter> = {
+interface CreateTRPCClientBaseOptions {
   /**
    * Add ponyfill for fetch
    */
@@ -53,25 +52,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 +79,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 +100,6 @@ export class TRPCClient<TRouter extends AnyRouter> {
       return () => ({});
     }
     this.runtime = {
-      transformer,
       AbortController: AC as any,
       fetch: _fetch,
       headers: getHeadersFn(),
@@ -135,8 +127,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 +137,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 +145,29 @@ export class TRPCClient<TRouter extends AnyRouter> {
     path: string;
     context?: OperationContext;
   }): CancellablePromise<TOutput> {
-    const $result = this.$request<TInput, TOutput>(opts);
-
-    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);
+    const req$ = this.$request<TInput, TOutput>(opts);
+    type TValue = inferObservableValue<typeof req$>;
+    const { promise, abort } = observableToPromise<TValue>(req$);
 
-          $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'],
@@ -232,28 +214,32 @@ export class TRPCClient<TRouter extends AnyRouter> {
   >(
     path: TPath,
     input: TInput,
-    opts: TRPCRequestOptions &
-      ObservableCallbacks<TRPCResult<TOutput>, TRPCClientError<TRouter>>,
-  ): UnsubscribeFn {
-    const $res = this.$request<TInput, TOutput>({
+    opts: TRPCRequestOptions & Partial<Observer<TRPCResult<TOutput>>>,
+  ): Subscription {
+    const observable$ = this.$request<TInput, TOutput>({
       type: 'subscription',
       path,
       input,
       context: opts.context,
     });
-    $res.subscribe({
-      onNext(output) {
-        if (output) {
-          opts.onNext?.(output);
+    return 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();
-    };
   }
 }

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;

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 'rxjs';
+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 new 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 new 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,54 @@
+import { AnyRouter } from '@trpc/server';
+import { Observable } from 'rxjs';
+import { share } from 'rxjs';
+import { OperationResult, TRPCLink } from './types';
+
+export function dedupeLink<
+  TRouter extends AnyRouter = AnyRouter,
+>(): TRPCLink<TRouter> {
+  // initialized config
+  return () => {
+    // initialized in app
+    const pending: Record<string, Observable<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 new Observable((observer) => pending[key].subscribe(observer));
+      }
+
+      const shared$ = new Observable<OperationResult<TRouter, unknown>>(
+        (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$;
+    };
+  };
+}