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

package/dist/index.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
 var _createClass = require('@babel/runtime/helpers/createClass');
+var observable = require('@trpc/server/observable');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
 var _inherits = require('@babel/runtime/helpers/inherits');
 var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
 var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
 var _wrapNativeSuper = require('@babel/runtime/helpers/wrapNativeSuper');
-var tap = require('./tap-0dcdee86.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -29,14 +29,14 @@ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
+function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
 
-function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var TRPCClientError = /*#__PURE__*/function (_Error) {
   _inherits__default["default"](TRPCClientError, _Error);
 
-  var _super = /*#__PURE__*/_createSuper$2(TRPCClientError);
+  var _super = /*#__PURE__*/_createSuper$1(TRPCClientError);
 
   function TRPCClientError(message, opts) {
     var _opts$result, _opts$result2;
@@ -137,12 +137,12 @@ function dedupeLink() {
 
       if (pending[key]) {
         // console.log('hooking into pending', { op });
-        return tap.observable(function (observer) {
+        return observable.observable(function (observer) {
           return pending[key].subscribe(observer);
         });
       }
 
-      var shared$ = tap.observable(function (observer) {
+      var shared$ = observable.observable(function (observer) {
         function reset() {
           delete pending[key];
         }
@@ -164,7 +164,7 @@ function dedupeLink() {
           reset();
           subscription.unsubscribe();
         };
-      }).pipe(tap.share());
+      }).pipe(observable.share());
       pending[key] = shared$;
       return shared$;
     };
@@ -177,82 +177,174 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+/**
+ * A function that should never be called unless we messed something up.
+ */
+var throwFatalError = function throwFatalError() {
+  throw new Error('Something went wrong. Please submit an issue at https://github.com/trpc/trpc/issues/new');
+};
 /**
  * Dataloader that's very inspired by https://github.com/graphql/dataloader
  * 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
  */
-function dataLoader(fetchMany, opts) {
-  var batch = null;
+
+
+function dataLoader(batchLoader) {
+  var pendingItems = null;
   var dispatchTimer = null;
 
-  var destroyTimerAndBatch = function destroyTimerAndBatch() {
+  var destroyTimerAndPendingItems = function destroyTimerAndPendingItems() {
     clearTimeout(dispatchTimer);
     dispatchTimer = null;
-    batch = null;
+    pendingItems = null;
   };
+  /**
+   * Iterate through the items and split them into groups based on the `batchLoader`'s validate function
+   */
 
-  function dispatch() {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    var batchCopy = batch;
-    destroyTimerAndBatch();
-
-    var _fetchMany = fetchMany(batchCopy.items.map(function (v) {
-      return v.key;
-    })),
-        promise = _fetchMany.promise,
-        cancel = _fetchMany.cancel;
-
-    batchCopy.cancel = cancel;
-    promise.then(function (result) {
-      for (var i = 0; i < result.length; i++) {
-        var _value = result[i]; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-        batchCopy.items[i].resolve(_value);
+
+  function groupItems(items) {
+    var groupedItems = [[]];
+    var index = 0;
+
+    while (true) {
+      var item = items[index];
+
+      if (!item) {
+        // we're done
+        break;
       }
-    }).catch(function (cause) {
-      var _iterator = _createForOfIteratorHelper(batchCopy.items),
-          _step;
-
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var item = _step.value;
-          item.reject(cause);
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+
+      var lastGroup = groupedItems[groupedItems.length - 1];
+
+      if (item.aborted) {
+        // Item was aborted before it was dispatched
+        item.reject(new Error('Aborted'));
+        index++;
+        continue;
       }
-    });
+
+      var isValid = batchLoader.validate(lastGroup.concat(item).map(function (it) {
+        return 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 load(key) {
-    var batchItem = {
-      cancelled: false,
-      key: key
-    };
+  function dispatch() {
+    var groupedItems = groupItems(pendingItems);
+    destroyTimerAndPendingItems(); // Create batches for each group of items
+
+    var _iterator = _createForOfIteratorHelper(groupedItems),
+        _step;
+
+    try {
+      var _loop = function _loop() {
+        var items = _step.value;
+
+        if (!items.length) {
+          return "continue";
+        }
+
+        var batch = {
+          items: items,
+          cancel: throwFatalError
+        };
 
-    if (!batch) {
-      batch = {
-        items: [],
-        cancel: function cancel() {
-          destroyTimerAndBatch();
+        var _iterator2 = _createForOfIteratorHelper(items),
+            _step2;
+
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var item = _step2.value;
+            item.batch = batch;
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
         }
+
+        var _batchLoader$fetch = batchLoader.fetch(batch.items.map(function (_item) {
+          return _item.key;
+        })),
+            promise = _batchLoader$fetch.promise,
+            cancel = _batchLoader$fetch.cancel;
+
+        batch.cancel = cancel;
+        promise.then(function (result) {
+          for (var i = 0; i < result.length; i++) {
+            var _value = result[i];
+            var item = batch.items[i];
+            item.resolve(_value);
+            item.batch = null;
+          }
+        }).catch(function (cause) {
+          var _iterator3 = _createForOfIteratorHelper(batch.items),
+              _step3;
+
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var item = _step3.value;
+              item.reject(cause);
+              item.batch = null;
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
+        });
       };
+
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _ret = _loop();
+
+        if (_ret === "continue") continue;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
+  }
 
-    var thisBatch = batch;
+  function load(key) {
+    var item = {
+      aborted: false,
+      key: key,
+      batch: null,
+      resolve: throwFatalError,
+      reject: throwFatalError
+    };
     var promise = new Promise(function (resolve, reject) {
-      var item = batchItem;
       item.reject = reject;
       item.resolve = resolve;
-      thisBatch.items.push(item);
 
-      if (typeof (opts === null || opts === void 0 ? void 0 : opts.maxBatchSize) !== 'undefined' && thisBatch.items.length >= opts.maxBatchSize) {
-        dispatch();
-        return;
+      if (!pendingItems) {
+        pendingItems = [];
       }
+
+      pendingItems.push(item);
     });
 
     if (!dispatchTimer) {
@@ -260,16 +352,17 @@ function dataLoader(fetchMany, opts) {
     }
 
     var cancel = function cancel() {
-      batchItem.cancelled = true;
+      var _item$batch;
 
-      if (thisBatch.items.some(function (item) {
-        return !item.cancelled;
+      item.aborted = true;
+
+      if ((_item$batch = item.batch) !== null && _item$batch !== void 0 && _item$batch.items.every(function (item) {
+        return item.aborted;
       })) {
-        // there are still things that can be resolved
-        return;
+        // All items in the batch have been cancelled
+        item.batch.cancel();
+        item.batch = null;
       }
-
-      thisBatch.cancel();
     };
 
     return {
@@ -304,48 +397,56 @@ var METHOD = {
   mutation: 'POST',
   subscription: 'PATCH'
 };
-function httpRequest(props) {
-  var type = props.type,
-      rt = props.runtime,
-      path = props.path;
-  var ac = rt.AbortController ? new rt.AbortController() : null;
-  var input = 'input' in props ? props.input : arrayToDict(props.inputs);
-
-  function getUrl() {
-    var url = props.url + '/' + path;
-    var queryParts = [];
-
-    if ('inputs' in props) {
-      queryParts.push('batch=1');
-    }
 
-    if (type === 'query' && input !== undefined) {
-      queryParts.push("input=".concat(encodeURIComponent(JSON.stringify(input))));
-    }
+function getInput(opts) {
+  return 'input' in opts ? opts.runtime.transformer.serialize(opts.input) : arrayToDict(opts.inputs.map(function (_input) {
+    return opts.runtime.transformer.serialize(_input);
+  }));
+}
 
-    if (queryParts.length) {
-      url += '?' + queryParts.join('&');
-    }
+function getUrl(opts) {
+  var url = opts.url + '/' + opts.path;
+  var queryParts = [];
 
-    return url;
+  if ('inputs' in opts) {
+    queryParts.push('batch=1');
   }
 
-  function getBody() {
-    if (type === 'query') {
-      return undefined;
+  if (opts.type === 'query') {
+    var input = getInput(opts);
+
+    if (input !== undefined) {
+      queryParts.push("input=".concat(encodeURIComponent(JSON.stringify(input))));
     }
+  }
+
+  if (queryParts.length) {
+    url += '?' + queryParts.join('&');
+  }
 
-    return input !== undefined ? JSON.stringify(input) : undefined;
+  return url;
+}
+function getBody(opts) {
+  if (opts.type === 'query') {
+    return undefined;
   }
 
+  var input = getInput(opts);
+  return input !== undefined ? JSON.stringify(input) : undefined;
+}
+function httpRequest(opts) {
+  var type = opts.type,
+      runtime = opts.runtime;
+  var ac = runtime.AbortController ? new runtime.AbortController() : null;
   var promise = new Promise(function (resolve, reject) {
-    var url = getUrl();
+    var url = getUrl(opts);
+    var body = getBody(opts);
     var meta = {};
-    Promise.resolve(rt.headers()).then(function (headers) {
-      return rt.fetch(url, {
+    Promise.resolve(runtime.headers()).then(function (headers) {
+      return runtime.fetch(url, {
         method: METHOD[type],
         signal: ac === null || ac === void 0 ? void 0 : ac.signal,
-        body: getBody(),
+        body: body,
         headers: _objectSpread$2({
           'content-type': 'application/json'
         }, headers)
@@ -372,31 +473,54 @@ function httpRequest(props) {
 }
 
 function httpBatchLink(opts) {
-  var url = opts.url; // initialized config
-
+  // initialized config
   return function (runtime) {
-    var fetcher = function fetcher(type) {
-      return function (keyInputPairs) {
-        var path = keyInputPairs.map(function (op) {
+    var maxURLLength = opts.maxURLLength || Infinity;
+
+    var batchLoader = function batchLoader(type) {
+      var validate = function validate(batchOps) {
+        if (maxURLLength === Infinity) {
+          // escape hatch for quick calcs
+          return true;
+        }
+
+        var path = batchOps.map(function (op) {
+          return op.path;
+        }).join(',');
+        var inputs = batchOps.map(function (op) {
+          return op.input;
+        });
+        var url = getUrl({
+          url: opts.url,
+          runtime: runtime,
+          type: type,
+          path: path,
+          inputs: inputs
+        });
+        return url.length <= maxURLLength;
+      };
+
+      var fetch = function fetch(batchOps) {
+        var path = batchOps.map(function (op) {
           return op.path;
         }).join(',');
-        var inputs = keyInputPairs.map(function (op) {
+        var inputs = batchOps.map(function (op) {
           return op.input;
         });
 
         var _httpRequest = httpRequest({
-          url: url,
-          inputs: inputs,
-          path: path,
+          url: opts.url,
           runtime: runtime,
-          type: type
+          type: type,
+          path: path,
+          inputs: inputs
         }),
             promise = _httpRequest.promise,
             cancel = _httpRequest.cancel;
 
         return {
           promise: promise.then(function (res) {
-            var resJSON = Array.isArray(res.json) ? res.json : keyInputPairs.map(function () {
+            var resJSON = Array.isArray(res.json) ? res.json : batchOps.map(function () {
               return res.json;
             });
             var result = resJSON.map(function (item) {
@@ -410,11 +534,16 @@ function httpBatchLink(opts) {
           cancel: cancel
         };
       };
+
+      return {
+        validate: validate,
+        fetch: fetch
+      };
     };
 
-    var query = dataLoader(fetcher('query'), opts);
-    var mutation = dataLoader(fetcher('mutation'), opts);
-    var subscription = dataLoader(fetcher('subscription'), opts);
+    var query = dataLoader(batchLoader('query'));
+    var mutation = dataLoader(batchLoader('mutation'));
+    var subscription = dataLoader(batchLoader('subscription'));
     var loaders = {
       query: query,
       subscription: subscription,
@@ -422,7 +551,7 @@ function httpBatchLink(opts) {
     };
     return function (_ref) {
       var op = _ref.op;
-      return tap.observable(function (observer) {
+      return observable.observable(function (observer) {
         var loader = loaders[op.type];
 
         var _loader$load = loader.load(op),
@@ -451,17 +580,17 @@ function httpLink(opts) {
   return function (runtime) {
     return function (_ref) {
       var op = _ref.op;
-      return tap.observable(function (observer) {
+      return observable.observable(function (observer) {
         var path = op.path,
             input = op.input,
             type = op.type;
 
         var _httpRequest = httpRequest({
+          url: url,
           runtime: runtime,
-          path: path,
-          input: input,
           type: type,
-          url: url
+          path: path,
+          input: input
         }),
             promise = _httpRequest.promise,
             cancel = _httpRequest.cancel;
@@ -540,7 +669,7 @@ function loggerLink() {
     return function (_ref) {
       var op = _ref.op,
           next = _ref.next;
-      return tap.observable(function (observer) {
+      return observable.observable(function (observer) {
         // ->
         enabled(_objectSpread$1(_objectSpread$1({}, op), {}, {
           direction: 'up'
@@ -561,7 +690,7 @@ function loggerLink() {
           }));
         }
 
-        return next(op).pipe(tap.tap({
+        return next(op).pipe(observable.tap({
           next: function next(result) {
             logResult(result);
           },
@@ -582,7 +711,7 @@ function retryLink(opts) {
       var op = _ref.op,
           next = _ref.next;
       // initialized for request
-      return tap.observable(function (observer) {
+      return observable.observable(function (observer) {
         var next$ = null;
         var attempts = 0;
         var isDone = false;
@@ -638,7 +767,7 @@ function retryLink(opts) {
 
 /** @internal */
 function createChain(opts) {
-  return tap.observable(function (observer) {
+  return observable.observable(function (observer) {
     function execute() {
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       var op = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : opts.op;
@@ -663,15 +792,15 @@ function asArray(value) {
 }
 
 function splitLink(opts) {
-  return function (rt) {
+  return function (runtime) {
     var yes = asArray(opts.true).map(function (link) {
-      return link(rt);
+      return link(runtime);
     });
     var no = asArray(opts.false).map(function (link) {
-      return link(rt);
+      return link(runtime);
     });
     return function (props) {
-      return tap.observable(function (observer) {
+      return observable.observable(function (observer) {
         var links = opts.condition(props.op) ? yes : no;
         return createChain({
           op: props.op,
@@ -682,81 +811,14 @@ function splitLink(opts) {
   };
 }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/**
- * @internal
- */
-function transformOperationResult$1(result, transformer) {
-  if ('error' in result.data) {
-    return _objectSpread(_objectSpread({}, result), {}, {
-      data: _objectSpread(_objectSpread({}, result.data), {}, {
-        error: transformer.deserialize(result.data.error)
-      })
-    });
-  }
-
-  if (result.data.result.type !== 'data') {
-    return result;
-  }
-
-  return _objectSpread(_objectSpread({}, result), {}, {
-    data: _objectSpread(_objectSpread({}, result.data), {}, {
-      result: _objectSpread(_objectSpread({}, result.data.result), {}, {
-        data: transformer.deserialize(result.data.result.data)
-      })
-    })
-  });
-}
-
-function transformerLink(transformer) {
-  var _transformer = transformer ? 'input' in transformer ? {
-    serialize: transformer.input.serialize,
-    deserialize: transformer.output.deserialize
-  } : transformer : {
-    serialize: function serialize(data) {
-      return data;
-    },
-    deserialize: function deserialize(data) {
-      return data;
-    }
-  };
-
-  return function () {
-    return function (props) {
-      var input = _transformer.serialize(props.op.input);
-
-      return tap.observable(function (observer) {
-        var subscription = props.next(_objectSpread(_objectSpread({}, props.op), {}, {
-          input: input
-        })).subscribe({
-          next: function next(value) {
-            var transformed = transformOperationResult$1(value, _transformer);
-            observer.next(transformed);
-          },
-          error: function error(err) {
-            observer.error(err);
-          },
-          complete: function complete() {
-            observer.complete();
-          }
-        });
-        return subscription;
-      });
-    };
-  };
-}
-
 /* istanbul ignore next */
 var retryDelay = function retryDelay(attemptIndex) {
   return attemptIndex === 0 ? 0 : Math.min(1000 * Math.pow(2, attemptIndex), 30000);
 };
 
-function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
 
-function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function createWSClient(opts) {
   var url = opts.url,
       _opts$WebSocket = opts.WebSocket,
@@ -968,7 +1030,6 @@ function createWSClient(opts) {
         id = op.id;
     var envelope = {
       id: id,
-      jsonrpc: '2.0',
       method: type,
       params: {
         input: input,
@@ -997,8 +1058,7 @@ function createWSClient(opts) {
       if (op.type === 'subscription') {
         outgoing.push({
           id: id,
-          method: 'subscription.stop',
-          params: undefined
+          method: 'subscription.stop'
         });
         dispatch();
       }
@@ -1009,6 +1069,8 @@ function createWSClient(opts) {
     close: function close() {
       state = 'closed';
       closeIfNoPending(activeConnection);
+      clearTimeout(connectTimer);
+      connectTimer = null;
     },
     request: request,
     getConnection: function getConnection() {
@@ -1020,7 +1082,7 @@ function createWSClient(opts) {
 var TRPCWebSocketClosedError = /*#__PURE__*/function (_Error) {
   _inherits__default["default"](TRPCWebSocketClosedError, _Error);
 
-  var _super = /*#__PURE__*/_createSuper$1(TRPCWebSocketClosedError);
+  var _super = /*#__PURE__*/_createSuper(TRPCWebSocketClosedError);
 
   function TRPCWebSocketClosedError(message) {
     var _this;
@@ -1039,7 +1101,7 @@ var TRPCWebSocketClosedError = /*#__PURE__*/function (_Error) {
 var TRPCSubscriptionEndedError = /*#__PURE__*/function (_Error2) {
   _inherits__default["default"](TRPCSubscriptionEndedError, _Error2);
 
-  var _super2 = /*#__PURE__*/_createSuper$1(TRPCSubscriptionEndedError);
+  var _super2 = /*#__PURE__*/_createSuper(TRPCSubscriptionEndedError);
 
   function TRPCSubscriptionEndedError(message) {
     var _this2;
@@ -1056,16 +1118,16 @@ var TRPCSubscriptionEndedError = /*#__PURE__*/function (_Error2) {
 }( /*#__PURE__*/_wrapNativeSuper__default["default"](Error));
 
 function wsLink(opts) {
-  return function () {
+  return function (runtime) {
     var client = opts.client;
     return function (_ref2) {
       var op = _ref2.op;
-      return tap.observable(function (observer) {
+      return observable.observable(function (observer) {
         var type = op.type,
-            input = op.input,
             path = op.path,
             id = op.id,
             context = op.context;
+        var input = runtime.transformer.serialize(op.input);
         var isDone = false;
         var unsub = client.request({
           type: type,
@@ -1107,12 +1169,18 @@ function wsLink(opts) {
   };
 }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /** @internal */
-function transformOperationResult(result) {
+function transformOperationResult(result, runtime) {
   var context = result.context;
 
   if ('error' in result.data) {
-    var error = TRPCClientError.from(result.data);
+    var error = TRPCClientError.from(_objectSpread(_objectSpread({}, result.data), {}, {
+      error: runtime.transformer.deserialize(result.data.error)
+    }));
     return {
       ok: false,
       error: error,
@@ -1120,75 +1188,39 @@ function transformOperationResult(result) {
     };
   }
 
-  var data = result.data.result.data;
+  var data = runtime.transformer.deserialize(result.data.result.data);
   return {
     ok: true,
     data: data,
     context: context
   };
 }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var ObservableAbortError = /*#__PURE__*/function (_Error) {
-  _inherits__default["default"](ObservableAbortError, _Error);
-
-  var _super = /*#__PURE__*/_createSuper(ObservableAbortError);
-
-  function ObservableAbortError(message) {
-    var _this;
-
-    _classCallCheck__default["default"](this, ObservableAbortError);
-
-    _this = _super.call(this, message);
-    _this.name = 'ObservableAbortError';
-    Object.setPrototypeOf(_assertThisInitialized__default["default"](_this), ObservableAbortError.prototype);
-    return _this;
-  }
-
-  return _createClass__default["default"](ObservableAbortError);
-}( /*#__PURE__*/_wrapNativeSuper__default["default"](Error));
 /** @internal */
 
-function observableToPromise(observable) {
-  var abort;
-  var promise = new Promise(function (resolve, reject) {
-    var isDone = false;
-
-    function onDone() {
-      if (isDone) {
-        return;
-      }
-
-      isDone = true;
-      reject(new ObservableAbortError('This operation was cancelled.'));
-      obs$.unsubscribe();
-    }
+function transformSubscriptionOperationResult(result, runtime) {
+  var context = result.context;
 
-    var obs$ = observable.subscribe({
-      next: function next(data) {
-        isDone = true;
-        resolve(data);
-        onDone();
-      },
-      error: function error(data) {
-        isDone = true;
-        reject(data);
-        onDone();
-      },
-      complete: function complete() {
-        isDone = true;
-        onDone();
-      }
+  if ('error' in result.data) {
+    var error = TRPCClientError.from(_objectSpread(_objectSpread({}, result.data), {}, {
+      error: runtime.transformer.deserialize(result.data.error)
+    }), {
+      meta: context
     });
-    abort = onDone;
+    return {
+      ok: false,
+      error: error,
+      context: context
+    };
+  }
+
+  var data = _objectSpread(_objectSpread({}, result.data.result), result.data.result.type === 'data' && {
+    data: runtime.transformer.deserialize(result.data.result.data)
   });
+
   return {
-    promise: promise,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    abort: abort
+    ok: true,
+    data: data,
+    context: context
   };
 }
 
@@ -1224,10 +1256,22 @@ var TRPCClient = /*#__PURE__*/function () {
       };
     }
 
+    var transformer = opts.transformer ? 'input' in opts.transformer ? {
+      serialize: opts.transformer.input.serialize,
+      deserialize: opts.transformer.output.deserialize
+    } : opts.transformer : {
+      serialize: function serialize(data) {
+        return data;
+      },
+      deserialize: function deserialize(data) {
+        return data;
+      }
+    };
     this.runtime = {
       AbortController: AC,
       fetch: _fetch,
-      headers: getHeadersFn()
+      headers: getHeadersFn(),
+      transformer: transformer
     };
 
     if ('links' in opts) {
@@ -1259,20 +1303,22 @@ var TRPCClient = /*#__PURE__*/function () {
           context: context
         }
       });
-      return chain$.pipe(tap.share());
+      return chain$.pipe(observable.share());
     }
   }, {
     key: "requestAsPromise",
     value: function requestAsPromise(opts) {
+      var _this2 = this;
+
       var req$ = this.$request(opts);
 
-      var _observableToPromise = observableToPromise(req$),
+      var _observableToPromise = observable.observableToPromise(req$),
           promise = _observableToPromise.promise,
           abort = _observableToPromise.abort;
 
       var cancellablePromise = new Promise(function (resolve, reject) {
         promise.then(function (result) {
-          var transformed = transformOperationResult(result);
+          var transformed = transformOperationResult(result, _this2.runtime);
 
           if (transformed.ok) {
             resolve(transformed.data);
@@ -1290,26 +1336,34 @@ var TRPCClient = /*#__PURE__*/function () {
   }, {
     key: "query",
     value: function query(path) {
-      var _ref2;
+      var _args$;
+
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
 
-      var context = (_ref2 = arguments.length <= 2 ? undefined : arguments[2]) === null || _ref2 === void 0 ? void 0 : _ref2.context;
+      var context = (_args$ = args[1]) === null || _args$ === void 0 ? void 0 : _args$.context;
       return this.requestAsPromise({
         type: 'query',
         path: path,
-        input: arguments.length <= 1 ? undefined : arguments[1],
+        input: args[0],
         context: context
       });
     }
   }, {
     key: "mutation",
     value: function mutation(path) {
-      var _ref3;
+      var _args$2;
+
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
 
-      var context = (_ref3 = arguments.length <= 2 ? undefined : arguments[2]) === null || _ref3 === void 0 ? void 0 : _ref3.context;
+      var context = (_args$2 = args[1]) === null || _args$2 === void 0 ? void 0 : _args$2.context;
       return this.requestAsPromise({
         type: 'mutation',
         path: path,
-        input: arguments.length <= 1 ? undefined : arguments[1],
+        input: args[0],
         context: context
       });
     }
@@ -1322,21 +1376,21 @@ var TRPCClient = /*#__PURE__*/function () {
         input: input,
         context: opts.context
       });
+      var runtime = this.runtime;
       return observable$.subscribe({
         next: function next(result) {
-          var _opts$next;
+          var _opts$error;
 
-          if ('error' in result.data) {
-            var _opts$error;
+          var transformed = transformSubscriptionOperationResult(result, runtime);
 
-            var err = TRPCClientError.from(result.data, {
-              meta: result.context
-            });
-            (_opts$error = opts.error) === null || _opts$error === void 0 ? void 0 : _opts$error.call(opts, err);
+          if (transformed.ok) {
+            var _opts$next;
+
+            (_opts$next = opts.next) === null || _opts$next === void 0 ? void 0 : _opts$next.call(opts, transformed.data);
             return;
           }
 
-          (_opts$next = opts.next) === null || _opts$next === void 0 ? void 0 : _opts$next.call(opts, result.data.result);
+          (_opts$error = opts.error) === null || _opts$error === void 0 ? void 0 : _opts$error.call(opts, transformed.error);
         },
         error: function error(err) {
           var _opts$error2;
@@ -1370,5 +1424,4 @@ exports.httpLink = httpLink;
 exports.loggerLink = loggerLink;
 exports.retryLink = retryLink;
 exports.splitLink = splitLink;
-exports.transformerLink = transformerLink;
 exports.wsLink = wsLink;