@trpc/client 9.17.0 → 10.0.0-alpha.0

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;

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$;
+    };
+  };
+}

package/src/links/httpBatchLink.ts

@@ -1,19 +1,14 @@
 import { AnyRouter, ProcedureType } from '@trpc/server';
-import { TRPCResponse } from '@trpc/server/rpc';
-import { TRPCClientError } from '../TRPCClientError';
 import { dataLoader } from '../internals/dataLoader';
-import { transformRPCResponse } from '../internals/transformRPCResponse';
-import { httpRequest } from '../internals/httpRequest';
-import { HTTPLinkOptions, TRPCLink } from './core';
-import { TRPCAbortError } from '../internals/TRPCAbortError';
+import { observable } from '../rx/observable';
+import { TRPCLink } from './types';
+import { HTTPLinkOptions, httpRequest, ResponseShape } from './httpUtils';
 
 export function httpBatchLink<TRouter extends AnyRouter>(
   opts: HTTPLinkOptions,
 ): TRPCLink<TRouter> {
   const { url } = opts;
-  // initialized config
   return (runtime) => {
-    // initialized in app
     type Key = { id: number; path: string; input: unknown };
     const fetcher = (type: ProcedureType) => (keyInputPairs: Key[]) => {
       const path = keyInputPairs.map((op) => op.path).join(',');
@@ -28,42 +23,47 @@ export function httpBatchLink<TRouter extends AnyRouter>(
       });
 
       return {
-        promise: promise.then((res: unknown[] | unknown) => {
-          if (!Array.isArray(res)) {
-            return keyInputPairs.map(() => res);
-          }
-          return res;
+        promise: promise.then((res) => {
+          const resJSON = Array.isArray(res.json)
+            ? res.json
+            : keyInputPairs.map(() => res.json);
+
+          const result = resJSON.map((item) => ({
+            meta: res.meta,
+            json: item,
+          }));
+
+          return result;
         }),
         cancel,
       };
     };
-    const query = dataLoader<Key, TRPCResponse>(fetcher('query'));
-    const mutation = dataLoader<Key, TRPCResponse>(fetcher('mutation'));
-    const subscription = dataLoader<Key, TRPCResponse>(fetcher('subscription'));
+    const query = dataLoader<Key, ResponseShape>(fetcher('query'));
+    const mutation = dataLoader<Key, ResponseShape>(fetcher('mutation'));
+    const subscription = dataLoader<Key, ResponseShape>(
+      fetcher('subscription'),
+    );
 
     const loaders = { query, subscription, mutation };
-    return ({ op, prev, onDestroy }) => {
-      const loader = loaders[op.type];
-      const { promise, cancel } = loader.load(op);
-      let isDone = false;
-      const prevOnce: typeof prev = (result) => {
-        if (isDone) {
-          return;
-        }
-        isDone = true;
-        prev(result);
-      };
-      onDestroy(() => {
-        prevOnce(TRPCClientError.from(new TRPCAbortError(), { isDone: true }));
-        cancel();
+    return ({ op }) => {
+      return observable((observer) => {
+        const loader = loaders[op.type];
+        const { promise, cancel } = loader.load(op);
+
+        promise
+          .then((res) => {
+            observer.next({
+              context: res.meta,
+              data: res.json as any,
+            });
+            observer.complete();
+          })
+          .catch((err) => observer.error(err as any));
+
+        return () => {
+          cancel();
+        };
       });
-      promise
-        .then((envelope) => {
-          prevOnce(transformRPCResponse({ envelope, runtime }));
-        })
-        .catch((cause) => {
-          prevOnce(TRPCClientError.from<TRouter>(cause));
-        });
     };
   };
 }

package/src/links/httpLink.ts

@@ -1,46 +1,35 @@
 import { AnyRouter } from '@trpc/server';
-import { TRPCClientError } from '../TRPCClientError';
-import { transformRPCResponse } from '../internals/transformRPCResponse';
-import { httpRequest } from '../internals/httpRequest';
-import { HTTPLinkOptions, TRPCLink } from './core';
-import { TRPCAbortError } from '../internals/TRPCAbortError';
+import { observable } from '../rx/observable';
+import { TRPCLink } from './types';
+import { HTTPLinkOptions, httpRequest } from './httpUtils';
 
 export function httpLink<TRouter extends AnyRouter>(
   opts: HTTPLinkOptions,
 ): TRPCLink<TRouter> {
   const { url } = opts;
+  return (runtime) =>
+    ({ op }) =>
+      observable((observer) => {
+        const { path, input, type } = op;
+        const { promise, cancel } = httpRequest({
+          runtime,
+          path,
+          input,
+          type,
+          url,
+        });
+        promise
+          .then((res) => {
+            observer.next({
+              context: res.meta,
+              data: res.json as any,
+            });
+            observer.complete();
+          })
+          .catch(observer.error);
 
-  // initialized config
-  return (runtime) => {
-    // initialized in app
-    return ({ op, prev, onDestroy }) => {
-      const { path, input, type } = op;
-      const { promise, cancel } = httpRequest({
-        runtime,
-        type,
-        input,
-        url,
-        path,
-      });
-      let isDone = false;
-      const prevOnce: typeof prev = (result) => {
-        if (isDone) {
-          return;
-        }
-        isDone = true;
-        prev(result);
-      };
-      onDestroy(() => {
-        prevOnce(TRPCClientError.from(new TRPCAbortError(), { isDone: true }));
-        cancel();
+        return () => {
+          cancel();
+        };
       });
-      promise
-        .then((envelope) => {
-          prevOnce(transformRPCResponse({ envelope, runtime }));
-        })
-        .catch((cause) => {
-          prevOnce(TRPCClientError.from(cause));
-        });
-    };
-  };
 }