@trpc/client 10.0.0-alpha.3 → 10.0.0-alpha.32

package/links/wsLink/dist/trpc-client-links-wsLink.esm.js

@@ -111,7 +111,7 @@ function createWSClient(opts) {
   }
 
   function createWS() {
-    var conn = new WebSocket(url);
+    var conn = new WebSocketImpl(url);
     clearTimeout(connectTimer);
     connectTimer = null;
     conn.addEventListener('open', function () {
@@ -271,6 +271,8 @@ function createWSClient(opts) {
     close: function close() {
       state = 'closed';
       closeIfNoPending(activeConnection);
+      clearTimeout(connectTimer);
+      connectTimer = null;
     },
     request: request,
     getConnection: function getConnection() {

package/links/wsLink/index.d.ts

@@ -1 +1 @@
-export * from '../../dist/links/wsLink';
+export * from '../../dist/./links/wsLink';

package/links/wsLink/index.js

@@ -1 +1 @@
-module.exports = require('../../dist/links/wsLink');
+module.exports = require('../../dist/./links/wsLink');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trpc/client",
-  "version": "10.0.0-alpha.3",
+  "version": "10.0.0-alpha.32",
   "description": "tRPC Client lib",
   "author": "KATT",
   "license": "MIT",
@@ -10,6 +10,14 @@
     "url": "git+https://github.com/trpc/trpc.git",
     "directory": "packages/client"
   },
+  "eslintConfig": {
+    "rules": {
+      "no-restricted-imports": [
+        "error",
+        "@trpc/client"
+      ]
+    }
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "typings": "dist/index.d.ts",
@@ -19,68 +27,53 @@
       "require": "./dist/index.js",
       "default": "./dist/index.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/httpBatchLink": {
+      "import": "./dist/links/httpBatchLink.mjs",
+      "require": "./dist/links/httpBatchLink.js",
+      "default": "./dist/links/httpBatchLink.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/loggerLink": {
+      "import": "./dist/links/loggerLink.mjs",
+      "require": "./dist/links/loggerLink.js",
+      "default": "./dist/links/loggerLink.js"
     },
     "./links/wsLink": {
       "import": "./dist/links/wsLink.mjs",
       "require": "./dist/links/wsLink.js",
       "default": "./dist/links/wsLink.js"
-    },
-    "./rx": {
-      "import": "./dist/rx/index.mjs",
-      "require": "./dist/rx/index.js",
-      "default": "./dist/rx/index.js"
-    },
-    "./rx/operators": {
-      "import": "./dist/rx/operators/index.mjs",
-      "require": "./dist/rx/operators/index.js",
-      "default": "./dist/rx/operators/index.js"
     }
   },
   "files": [
     "README.md",
     "dist",
     "links",
-    "src",
-    "rx"
+    "src"
   ],
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "ts-watch": "tsc --project tsconfig.watch.json"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.0"
   },
   "peerDependencies": {
-    "@trpc/server": "10.0.0-alpha.3"
+    "@trpc/server": "10.0.0-alpha.32"
   },
   "devDependencies": {
-    "@trpc/server": "10.0.0-alpha.3"
+    "@trpc/server": "10.0.0-alpha.32"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cd71a2fe5d42efc838ae3d4cebe7a9e1a36d9110"
+  "gitHead": "71757fddbbfd69453ecab6faa20a7a238856263d"
 }

package/src/TRPCClientError.ts

@@ -1,4 +1,4 @@
-import { AnyRouter, inferRouterError, Maybe } from '@trpc/server';
+import { AnyRouter, Maybe, inferRouterError } from '@trpc/server';
 import { TRPCErrorResponse } from '@trpc/server/rpc';
 
 export interface TRPCClientErrorLike<TRouter extends AnyRouter> {
@@ -11,10 +11,6 @@ export class TRPCClientError<TRouter extends AnyRouter>
   extends Error
   implements TRPCClientErrorLike<TRouter>
 {
-  /**
-   * @deprecated use `cause`
-   */
-  public readonly originalError;
   public readonly cause;
   public readonly shape: Maybe<inferRouterError<TRouter>>;
   public readonly data: Maybe<inferRouterError<TRouter>['data']>;
@@ -24,15 +20,11 @@ export class TRPCClientError<TRouter extends AnyRouter>
     message: string,
     opts?: {
       result: Maybe<TRPCErrorResponse<inferRouterError<TRouter>>>;
-      /**
-       * @deprecated use `cause`
-       **/
-      originalError?: Maybe<Error>;
-      cause?: Maybe<Error>;
+      cause?: Error;
       meta?: Record<string, unknown>;
     },
   ) {
-    const cause = opts?.cause ?? opts?.originalError;
+    const cause = opts?.cause;
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore https://github.com/tc39/proposal-error-cause
@@ -40,7 +32,7 @@ export class TRPCClientError<TRouter extends AnyRouter>
 
     this.meta = opts?.meta;
 
-    this.cause = this.originalError = cause;
+    this.cause = cause;
     this.shape = opts?.result?.error;
     this.data = opts?.result?.error.data;
     this.name = 'TRPCClientError';
@@ -55,7 +47,7 @@ export class TRPCClientError<TRouter extends AnyRouter>
     if (!(cause instanceof Error)) {
       return new TRPCClientError<TRouter>((cause.error as any).message ?? '', {
         ...opts,
-        cause: null,
+        cause: undefined,
         result: cause,
       });
     }

package/src/createTRPCClient.ts

@@ -1,19 +1,24 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { AnyRouter } from '@trpc/server';
+import { createTRPCClientProxy } from './createTRPCClientProxy';
 import {
-  CreateTRPCClientOptions,
   TRPCClient as Client,
+  CreateTRPCClientOptions,
 } from './internals/TRPCClient';
 
 export function createTRPCClient<TRouter extends AnyRouter>(
   opts: CreateTRPCClientOptions<TRouter>,
 ) {
-  return new Client<TRouter>(opts);
+  const client = new Client<TRouter>(opts);
+  return createTRPCClientProxy(client);
 }
 
-export type TRPCClient<TRouter extends AnyRouter> = Client<TRouter>;
+// Also the client created above needs to somehow be like `TRPCClient<Router> & Omit<Router, 'createCaller' | 'createProcedure' | '_def' | 'transformer' | 'errorFormatter' | 'getErrorShape>`
 
 export type {
   TRPCRequestOptions,
   CreateTRPCClientOptions,
+  TRPCClient,
 } from './internals/TRPCClient';

package/src/createTRPCClientProxy.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { AnyRouter } from '@trpc/server';
+import { TRPCClient as Client } from './internals/TRPCClient';
+
+type FlattenRouter<TRouter extends AnyRouter> = {
+  [Key in keyof TRouter['_def']['record']]: TRouter['_def']['record'][Key] extends AnyRouter
+    ? FlattenRouter<TRouter['_def']['record'][Key]>
+    : TRouter['_def']['record'][Key];
+};
+
+function makeProxy<TRouter extends AnyRouter>(
+  client: Client<TRouter>,
+  ...path: string[]
+) {
+  const proxy: any = new Proxy(
+    function () {
+      // noop
+    },
+    {
+      get(_obj, name) {
+        if (name in client && !path.length) {
+          return client[name as keyof typeof client];
+        }
+        if (typeof name === 'string') {
+          return makeProxy(client, ...path, name);
+        }
+
+        return client;
+      },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      apply(_1, _2, args) {
+        const pathCopy = [...path];
+        let type = pathCopy.pop()!;
+        if (type === 'mutate') {
+          type = 'mutation';
+        }
+        const fullPath = pathCopy.join('.');
+
+        if (type.startsWith('use')) {
+          throw new Error(`Invalid hook call`);
+        }
+
+        return (client as any)[type](fullPath, ...args);
+      },
+    },
+  );
+
+  return proxy as typeof client & FlattenRouter<TRouter>;
+}
+export function createTRPCClientProxy<TRouter extends AnyRouter>(
+  client: Client<TRouter>,
+) {
+  return makeProxy(client);
+}

package/src/index.ts

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

package/src/internals/TRPCClient.ts

@@ -1,42 +1,42 @@
 import {
   AnyRouter,
+  ClientDataTransformerOptions,
+  DataTransformer,
   inferHandlerInput,
   inferProcedureInput,
   inferProcedureOutput,
   inferSubscriptionOutput,
 } from '@trpc/server';
-import { TRPCResult } from '@trpc/server/rpc';
+import {
+  Observer,
+  Unsubscribable,
+  inferObservableValue,
+  observableToPromise,
+  share,
+} from '@trpc/server/observable';
+import { TRPCResultMessage } from '@trpc/server/rpc';
 import { CancelFn } from '..';
+import { TRPCClientError } from '../TRPCClientError';
 import { getFetch } from '../getFetch';
-import { httpBatchLink } from '../links/httpBatchLink';
+import { httpBatchLink } from '../links';
 import { createChain } from '../links/internals/createChain';
-import { transformOperationResult } from '../links/internals/transformOperationResult';
+import {
+  transformOperationResult,
+  transformSubscriptionOperationResult,
+} from '../links/internals/transformOperationResult';
 import {
   HTTPHeaders,
-  LinkRuntime,
   OperationContext,
   OperationLink,
+  TRPCClientRuntime,
   TRPCLink,
 } 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;
 };
 
-/**
- * @deprecated no longer used
- */
-export interface FetchOptions {
-  fetch?: typeof fetch;
-  AbortController?: typeof AbortController;
-}
 let idCounter = 0;
 function getRequestId() {
   return ++idCounter;
@@ -54,6 +54,11 @@ interface CreateTRPCClientBaseOptions {
    * headers to be set on outgoing requests / callback that of said headers
    */
   headers?: HTTPHeaders | (() => HTTPHeaders | Promise<HTTPHeaders>);
+  /**
+   * Data transformer
+   * @link https://trpc.io/docs/data-transformers
+   **/
+  transformer?: ClientDataTransformerOptions;
 }
 
 /** @internal */
@@ -69,7 +74,7 @@ export interface CreateTRPCClientWithURLOptions
 export interface CreateTRPCClientWithLinksOptions<TRouter extends AnyRouter>
   extends CreateTRPCClientBaseOptions {
   /**
-   * @link http://localhost:3000/docs/links
+   * @link https://trpc.io/docs/links
    **/
   links: TRPCLink<TRouter>[];
 }
@@ -88,23 +93,37 @@ export type CreateTRPCClientOptions<TRouter extends AnyRouter> =
   | CreateTRPCClientWithURLOptions;
 export class TRPCClient<TRouter extends AnyRouter> {
   private readonly links: OperationLink<TRouter>[];
-  public readonly runtime: LinkRuntime;
+  public readonly runtime: TRPCClientRuntime;
 
   constructor(opts: CreateTRPCClientOptions<TRouter>) {
     const _fetch = getFetch(opts?.fetch);
     const AC = getAbortController(opts?.AbortController);
 
-    function getHeadersFn(): LinkRuntime['headers'] {
+    function getHeadersFn(): TRPCClientRuntime['headers'] {
       if (opts.headers) {
         const headers = opts.headers;
         return typeof headers === 'function' ? headers : () => headers;
       }
       return () => ({});
     }
+
+    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,
+        };
+
     this.runtime = {
       AbortController: AC as any,
       fetch: _fetch,
       headers: getHeadersFn(),
+      transformer,
     };
 
     if ('links' in opts) {
@@ -155,9 +174,9 @@ export class TRPCClient<TRouter extends AnyRouter> {
       (resolve, reject) => {
         promise
           .then((result) => {
-            const transformed = transformOperationResult(result);
+            const transformed = transformOperationResult(result, this.runtime);
             if (transformed.ok) {
-              resolve(transformed.data as any);
+              resolve(transformed.data);
               return;
             }
             reject(transformed.error);
@@ -189,7 +208,6 @@ export class TRPCClient<TRouter extends AnyRouter> {
       context,
     });
   }
-
   public mutation<
     TMutations extends TRouter['_def']['mutations'],
     TPath extends string & keyof TMutations,
@@ -217,25 +235,26 @@ export class TRPCClient<TRouter extends AnyRouter> {
     path: TPath,
     input: TInput,
     opts: TRPCRequestOptions &
-      Partial<Observer<TRPCResult<TOutput>, TRPCClientError<TRouter>>>,
-  ): UnsubscribeFn {
+      Partial<Observer<TRPCResultMessage<TOutput>, TRPCClientError<TRouter>>>,
+  ): Unsubscribable {
     const observable$ = this.$request<TInput, TOutput>({
       type: 'subscription',
       path,
       input,
       context: opts.context,
     });
-    const observer = observable$.subscribe({
+    const runtime = this.runtime;
+    return observable$.subscribe({
       next(result) {
-        if ('error' in result.data) {
-          const err = TRPCClientError.from(result.data, {
-            meta: result.context,
-          });
-
-          opts.error?.(err);
+        const transformed = transformSubscriptionOperationResult(
+          result,
+          runtime,
+        );
+        if (transformed.ok) {
+          opts.next?.(transformed.data);
           return;
         }
-        opts.next?.(result.data.result);
+        opts.error?.(transformed.error);
       },
       error(err) {
         opts.error?.(err);
@@ -244,8 +263,5 @@ export class TRPCClient<TRouter extends AnyRouter> {
         opts.complete?.();
       },
     });
-    return () => {
-      observer.unsubscribe();
-    };
   }
 }

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';