@trpc/client 10.0.0-alpha.8 → 10.0.0-proxy-alpha.53

package/src/links/internals/httpUtils.ts

@@ -0,0 +1,117 @@
+import { ProcedureType } from '@trpc/server';
+import { TRPCResponse } from '@trpc/server/rpc';
+import { PromiseAndCancel, TRPCClientRuntime } from '../types';
+
+export interface HTTPLinkOptions {
+  url: string;
+}
+
+// https://github.com/trpc/trpc/pull/669
+function arrayToDict(array: unknown[]) {
+  const dict: Record<number, unknown> = {};
+  for (let index = 0; index < array.length; index++) {
+    const element = array[index];
+    dict[index] = element;
+  }
+  return dict;
+}
+
+const METHOD = {
+  query: 'GET',
+  mutation: 'POST',
+  subscription: 'PATCH',
+} as const;
+
+export interface HTTPResult {
+  json: TRPCResponse;
+  meta: {
+    response: Response;
+  };
+}
+
+type GetInputOptions = {
+  runtime: TRPCClientRuntime;
+} & ({ inputs: unknown[] } | { input: unknown });
+
+function getInput(opts: GetInputOptions) {
+  return 'input' in opts
+    ? opts.runtime.transformer.serialize(opts.input)
+    : arrayToDict(
+        opts.inputs.map((_input) => opts.runtime.transformer.serialize(_input)),
+      );
+}
+
+export type HTTPRequestOptions = HTTPLinkOptions &
+  GetInputOptions & {
+    type: ProcedureType;
+    path: string;
+  };
+
+export function getUrl(opts: HTTPRequestOptions) {
+  let url = opts.url + '/' + opts.path;
+  const queryParts: string[] = [];
+  if ('inputs' in opts) {
+    queryParts.push('batch=1');
+  }
+  if (opts.type === 'query') {
+    const input = getInput(opts);
+    if (input !== undefined) {
+      queryParts.push(`input=${encodeURIComponent(JSON.stringify(input))}`);
+    }
+  }
+  if (queryParts.length) {
+    url += '?' + queryParts.join('&');
+  }
+  return url;
+}
+
+type GetBodyOptions = { type: ProcedureType } & GetInputOptions;
+
+export function getBody(opts: GetBodyOptions) {
+  if (opts.type === 'query') {
+    return undefined;
+  }
+  const input = getInput(opts);
+  return input !== undefined ? JSON.stringify(input) : undefined;
+}
+
+export function httpRequest(
+  opts: HTTPRequestOptions,
+): PromiseAndCancel<HTTPResult> {
+  const { type, runtime } = opts;
+  const ac = runtime.AbortController ? new runtime.AbortController() : null;
+
+  const promise = new Promise<HTTPResult>((resolve, reject) => {
+    const url = getUrl(opts);
+    const body = getBody(opts);
+
+    const meta = {} as HTTPResult['meta'];
+    Promise.resolve(runtime.headers())
+      .then((headers) =>
+        runtime.fetch(url, {
+          method: METHOD[type],
+          signal: ac?.signal,
+          body: body,
+          headers: {
+            'content-type': 'application/json',
+            ...headers,
+          },
+        }),
+      )
+      .then((_res) => {
+        meta.response = _res;
+        return _res.json();
+      })
+      .then((json) => {
+        resolve({
+          json,
+          meta,
+        });
+      })
+      .catch(reject);
+  });
+  const cancel = () => {
+    ac?.abort();
+  };
+  return { promise, cancel };
+}

package/src/links/internals/transformResult.ts

@@ -0,0 +1,40 @@
+import { AnyRouter, inferRouterError } from '@trpc/server';
+import {
+  TRPCResponse,
+  TRPCResponseMessage,
+  TRPCResultMessage,
+} from '@trpc/server/rpc';
+import { TRPCClientRuntime } from '..';
+
+// FIXME:
+// - the generics here are probably unnecessary
+// - the RPC-spec could probably be simplified to combine HTTP + WS
+/** @internal */
+export function transformResult<TRouter extends AnyRouter, TOutput>(
+  response:
+    | TRPCResponseMessage<TOutput, inferRouterError<TRouter>>
+    | TRPCResponse<TOutput, inferRouterError<TRouter>>,
+  runtime: TRPCClientRuntime,
+) {
+  if ('error' in response) {
+    const error = runtime.transformer.deserialize(
+      response.error,
+    ) as inferRouterError<TRouter>;
+    return {
+      ok: false,
+      error: {
+        ...response,
+        error,
+      },
+    } as const;
+  }
+
+  const result = {
+    ...response.result,
+    ...((!response.result.type || response.result.type === 'data') && {
+      type: 'data',
+      data: runtime.transformer.deserialize(response.result.data),
+    }),
+  } as TRPCResultMessage<TOutput>['result'];
+  return { ok: true, result } as const;
+}

package/src/links/loggerLink.ts

@@ -1,8 +1,7 @@
 import { AnyRouter } from '@trpc/server';
+import { observable, tap } from '@trpc/server/observable';
 import { TRPCClientError } from '..';
-import { observable } from '../rx/observable';
-import { tap } from '../rx/operators';
-import { Operation, OperationResult, TRPCLink } from './types';
+import { Operation, OperationResultEnvelope, TRPCLink } from './types';
 
 type ConsoleEsque = {
   log: (...args: any[]) => void;
@@ -15,7 +14,7 @@ type EnableFnOptions<TRouter extends AnyRouter> =
     })
   | {
       direction: 'down';
-      result: OperationResult<TRouter, unknown> | TRPCClientError<TRouter>;
+      result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>;
     };
 type EnabledFn<TRouter extends AnyRouter> = (
   opts: EnableFnOptions<TRouter>,
@@ -34,7 +33,7 @@ type LogFnOptions<TRouter extends AnyRouter> = Operation &
          * Request result
          */
         direction: 'down';
-        result: OperationResult<TRouter, unknown> | TRPCClientError<TRouter>;
+        result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>;
         elapsedMs: number;
       }
   );
@@ -93,7 +92,7 @@ const defaultLogger =
     const fn: 'error' | 'log' =
       props.direction === 'down' &&
       props.result &&
-      (props.result instanceof Error || 'error' in props.result.data)
+      (props.result instanceof Error || 'error' in props.result.result)
         ? 'error'
         : 'log';
 
@@ -117,7 +116,7 @@ export function loggerLink<TRouter extends AnyRouter = AnyRouter>(
           });
         const requestStartTime = Date.now();
         function logResult(
-          result: OperationResult<TRouter, unknown> | TRPCClientError<TRouter>,
+          result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>,
         ) {
           const elapsedMs = Date.now() - requestStartTime;
 

package/src/links/retryLink.ts

@@ -1,6 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../rx/observable';
-import { Unsubscribable } from '../rx/types';
+import { Unsubscribable, observable } from '@trpc/server/observable';
 import { TRPCLink } from './types';
 
 export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {
@@ -27,7 +26,7 @@ export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {
               attempt();
             },
             next(result) {
-              if ('result' in result.data) {
+              if ('result' in result.result) {
                 isDone = true;
                 observer.next(result);
                 return;

package/src/links/splitLink.test.ts

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
+import { observable } from '@trpc/server/observable';
+import { splitLink } from '../';
+import { OperationLink, TRPCLink } from '../';
 import { AnyRouter } from '../../../server/src';
 import { createChain } from '../links/internals/createChain';
-import { splitLink } from '../links/splitLink';
-import { OperationLink, TRPCLink } from '../links/types';
-import { observable } from '../rx';
 
 test('splitLink', () => {
   const wsLinkSpy = jest.fn();

package/src/links/splitLink.ts

@@ -1,7 +1,7 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../rx/observable';
-import { TRPCLink, Operation } from './types';
+import { observable } from '@trpc/server/observable';
 import { createChain } from './internals/createChain';
+import { Operation, TRPCLink } from './types';
 
 function asArray<T>(value: T | T[]) {
   return Array.isArray(value) ? value : [value];
@@ -17,9 +17,9 @@ export function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
    */
   false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
 }): TRPCLink<TRouter> {
-  return (rt) => {
-    const yes = asArray(opts.true).map((link) => link(rt));
-    const no = asArray(opts.false).map((link) => link(rt));
+  return (runtime) => {
+    const yes = asArray(opts.true).map((link) => link(runtime));
+    const no = asArray(opts.false).map((link) => link(runtime));
     return (props) => {
       return observable((observer) => {
         const links = opts.condition(props.op) ? yes : no;

package/src/links/types.ts

@@ -1,6 +1,6 @@
-import { AnyRouter, inferRouterError, Dict } from '@trpc/server';
-import { TRPCResponse } from '@trpc/server/rpc';
-import { Observable, Observer } from '../rx/types';
+import { AnyRouter, DataTransformer } from '@trpc/server';
+import { Observable, Observer } from '@trpc/server/observable';
+import { TRPCResultMessage, TRPCSuccessResponse } from '@trpc/server/rpc';
 import { TRPCClientError } from '../TRPCClientError';
 
 export type CancelFn = () => void;
@@ -16,10 +16,10 @@ export type Operation<TInput = unknown> = {
   type: 'query' | 'mutation' | 'subscription';
   input: TInput;
   path: string;
-  context?: OperationContext;
+  context: OperationContext;
 };
 
-export type HTTPHeaders = Dict<string | string[]>;
+export type HTTPHeaders = Record<string, string | string[]>;
 
 /**
  * The default `fetch` implementation has an overloaded signature. By convention this library
@@ -30,26 +30,29 @@ export type TRPCFetch = (
   options?: RequestInit,
 ) => Promise<Response>;
 
-export interface LinkRuntime {
-  headers: () => HTTPHeaders | Promise<HTTPHeaders>;
+export interface TRPCClientRuntime {
   fetch: TRPCFetch;
   AbortController?: typeof AbortController;
+  headers: () => HTTPHeaders | Promise<HTTPHeaders>;
+  transformer: DataTransformer;
 }
 
-export interface OperationResult<TRouter extends AnyRouter, TOutput> {
-  data: TRPCResponse<TOutput, inferRouterError<TRouter>>;
+export interface OperationResultEnvelope<TOutput> {
+  result:
+    | TRPCSuccessResponse<TOutput>['result']
+    | TRPCResultMessage<TOutput>['result'];
   context?: OperationContext;
 }
 
 export type OperationResultObservable<
   TRouter extends AnyRouter,
   TOutput,
-> = Observable<OperationResult<TRouter, TOutput>, TRPCClientError<TRouter>>;
+> = Observable<OperationResultEnvelope<TOutput>, TRPCClientError<TRouter>>;
 
 export type OperationResultObserver<
   TRouter extends AnyRouter,
   TOutput,
-> = Observer<OperationResult<TRouter, TOutput>, TRPCClientError<TRouter>>;
+> = Observer<OperationResultEnvelope<TOutput>, TRPCClientError<TRouter>>;
 
 export type OperationLink<
   TRouter extends AnyRouter,
@@ -61,5 +64,5 @@ export type OperationLink<
 }) => OperationResultObservable<TRouter, TOutput>;
 
 export type TRPCLink<TRouter extends AnyRouter> = (
-  opts: LinkRuntime,
+  opts: TRPCClientRuntime,
 ) => OperationLink<TRouter>;

package/src/links/wsLink.ts

@@ -1,26 +1,42 @@
-import { AnyRouter, ProcedureType } from '@trpc/server';
+import { AnyRouter, ProcedureType, inferRouterError } from '@trpc/server';
+import { Observer, UnsubscribeFn, observable } from '@trpc/server/observable';
 import {
   TRPCClientIncomingMessage,
   TRPCClientIncomingRequest,
-  TRPCRequest,
-  TRPCResponse,
+  TRPCClientOutgoingMessage,
+  TRPCRequestMessage,
+  TRPCResponseMessage,
 } from '@trpc/server/rpc';
-import { retryDelay } from '../internals/retryDelay';
-import { UnsubscribeFn } from '../rx';
-import { observable } from '../rx/observable';
 import { TRPCClientError } from '../TRPCClientError';
-import { Operation, OperationResultObserver, TRPCLink } from './types';
+import { retryDelay } from '../internals/retryDelay';
+import { transformResult } from './internals/transformResult';
+import { Operation, TRPCLink } from './types';
+
+type WSCallbackResult<TRouter extends AnyRouter, TOutput> = TRPCResponseMessage<
+  TOutput,
+  inferRouterError<TRouter>
+>;
+
+type WSCallbackObserver<TRouter extends AnyRouter, TOutput> = Observer<
+  WSCallbackResult<TRouter, TOutput>,
+  TRPCClientError<TRouter>
+>;
 
 export interface WebSocketClientOptions {
   url: string;
-  WebSocket?: WebSocket;
+  WebSocket?: typeof WebSocket;
   retryDelayMs?: typeof retryDelay;
+  onOpen?: () => void;
+  onClose?: () => void;
 }
+
 export function createWSClient(opts: WebSocketClientOptions) {
   const {
     url,
     WebSocket: WebSocketImpl = WebSocket,
     retryDelayMs: retryDelayFn = retryDelay,
+    onOpen,
+    onClose,
   } = opts;
   /* istanbul ignore next */
   if (!WebSocketImpl) {
@@ -31,11 +47,11 @@ export function createWSClient(opts: WebSocketClientOptions) {
   /**
    * outgoing messages buffer whilst not open
    */
-  let outgoing: TRPCRequest[] = [];
+  let outgoing: TRPCClientOutgoingMessage[] = [];
   /**
    * pending outgoing requests that are awaiting callback
    */
-  type TCallbacks = OperationResultObserver<AnyRouter, unknown>;
+  type TCallbacks = WSCallbackObserver<AnyRouter, unknown>;
   type TRequest = {
     /**
      * Reference to the WebSocket instance this request was made to
@@ -112,7 +128,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
   }
 
   function createWS() {
-    const conn = new WebSocket(url);
+    const conn = new WebSocketImpl(url);
     clearTimeout(connectTimer as any);
     connectTimer = null;
 
@@ -123,6 +139,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
       }
       connectAttempt = 0;
       state = 'open';
+      onOpen?.();
       dispatch();
     });
     conn.addEventListener('error', () => {
@@ -132,6 +149,9 @@ export function createWSClient(opts: WebSocketClientOptions) {
     });
     const handleIncomingRequest = (req: TRPCClientIncomingRequest) => {
       if (req.method === 'reconnect' && conn === activeConnection) {
+        if (state === 'open') {
+          onClose?.();
+        }
         reconnect();
         // notify subscribers
         for (const pendingReq of Object.values(pendingRequests)) {
@@ -141,14 +161,14 @@ export function createWSClient(opts: WebSocketClientOptions) {
         }
       }
     };
-    const handleIncomingResponse = (data: TRPCResponse) => {
+    const handleIncomingResponse = (data: TRPCResponseMessage) => {
       const req = data.id !== null && pendingRequests[data.id];
       if (!req) {
         // do something?
         return;
       }
 
-      req.callbacks.next?.({ data });
+      req.callbacks.next?.(data);
       if (req.ws !== activeConnection && conn === activeConnection) {
         const oldWs = req.ws;
         // gracefully replace old connection with this
@@ -179,13 +199,16 @@ export function createWSClient(opts: WebSocketClientOptions) {
     });
 
     conn.addEventListener('close', () => {
+      if (state === 'open') {
+        onClose?.();
+      }
+
       if (activeConnection === conn) {
         // connection might have been replaced already
         tryReconnect();
       }
 
-      for (const key in pendingRequests) {
-        const req = pendingRequests[key];
+      for (const [key, req] of Object.entries(pendingRequests)) {
         if (req.ws !== conn) {
           continue;
         }
@@ -208,9 +231,8 @@ export function createWSClient(opts: WebSocketClientOptions) {
 
   function request(op: Operation, callbacks: TCallbacks): UnsubscribeFn {
     const { type, input, path, id } = op;
-    const envelope: TRPCRequest = {
+    const envelope: TRPCRequestMessage = {
       id,
-      jsonrpc: '2.0',
       method: type,
       params: {
         input,
@@ -238,7 +260,6 @@ export function createWSClient(opts: WebSocketClientOptions) {
         outgoing.push({
           id,
           method: 'subscription.stop',
-          params: undefined,
         });
         dispatch();
       }
@@ -247,7 +268,10 @@ export function createWSClient(opts: WebSocketClientOptions) {
   return {
     close: () => {
       state = 'closed';
+      onClose?.();
       closeIfNoPending(activeConnection);
+      clearTimeout(connectTimer as any);
+      connectTimer = null;
     },
     request,
     getConnection() {
@@ -279,11 +303,13 @@ class TRPCSubscriptionEndedError extends Error {
 export function wsLink<TRouter extends AnyRouter>(
   opts: WebSocketLinkOptions,
 ): TRPCLink<TRouter> {
-  return () => {
+  return (runtime) => {
     const { client } = opts;
     return ({ op }) => {
       return observable((observer) => {
-        const { type, input, path, id, context } = op;
+        const { type, path, id, context } = op;
+
+        const input = runtime.transformer.serialize(op.input);
 
         let isDone = false;
         const unsub = client.request(
@@ -291,7 +317,7 @@ export function wsLink<TRouter extends AnyRouter>(
           {
             error(err) {
               isDone = true;
-              observer.error(err);
+              observer.error(err as TRPCClientError<any>);
               unsub();
             },
             complete() {
@@ -308,8 +334,16 @@ export function wsLink<TRouter extends AnyRouter>(
                 observer.complete();
               }
             },
-            next(result) {
-              observer.next(result);
+            next(message) {
+              const transformed = transformResult(message, runtime);
+
+              if (!transformed.ok) {
+                observer.error(TRPCClientError.from(transformed.error));
+                return;
+              }
+              observer.next({
+                result: transformed.result,
+              });
 
               if (op.type !== 'subscription') {
                 // if it isn't a subscription we don't care about next response

package/dist/TRPCClientError-17b117e1.mjs

@@ -1,81 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
-import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
-import _wrapNativeSuper from '@babel/runtime/helpers/wrapNativeSuper';
-
-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(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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 TRPCClientError = /*#__PURE__*/function (_Error) {
-  _inherits(TRPCClientError, _Error);
-
-  var _super = /*#__PURE__*/_createSuper(TRPCClientError);
-
-  /**
-   * @deprecated use `cause`
-   */
-  function TRPCClientError(message, opts) {
-    var _opts$cause, _opts$result, _opts$result2;
-
-    var _this;
-
-    _classCallCheck(this, TRPCClientError);
-
-    var cause = (_opts$cause = opts === null || opts === void 0 ? void 0 : opts.cause) !== null && _opts$cause !== void 0 ? _opts$cause : opts === null || opts === void 0 ? void 0 : opts.originalError; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore https://github.com/tc39/proposal-error-cause
-
-    _this = _super.call(this, message, {
-      cause: cause
-    });
-    _this.originalError = void 0;
-    _this.cause = void 0;
-    _this.shape = void 0;
-    _this.data = void 0;
-    _this.meta = void 0;
-    _this.meta = opts === null || opts === void 0 ? void 0 : opts.meta;
-    _this.cause = _this.originalError = cause;
-    _this.shape = opts === null || opts === void 0 ? void 0 : (_opts$result = opts.result) === null || _opts$result === void 0 ? void 0 : _opts$result.error;
-    _this.data = opts === null || opts === void 0 ? void 0 : (_opts$result2 = opts.result) === null || _opts$result2 === void 0 ? void 0 : _opts$result2.error.data;
-    _this.name = 'TRPCClientError';
-    Object.setPrototypeOf(_assertThisInitialized(_this), TRPCClientError.prototype);
-    return _this;
-  }
-
-  _createClass(TRPCClientError, null, [{
-    key: "from",
-    value: function from(cause) {
-      var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-      if (!(cause instanceof Error)) {
-        var _message;
-
-        return new TRPCClientError((_message = cause.error.message) !== null && _message !== void 0 ? _message : '', _objectSpread(_objectSpread({}, opts), {}, {
-          cause: null,
-          result: cause
-        }));
-      }
-
-      if (cause.name === 'TRPCClientError') {
-        return cause;
-      }
-
-      return new TRPCClientError(cause.message, _objectSpread(_objectSpread({}, opts), {}, {
-        cause: cause,
-        result: null
-      }));
-    }
-  }]);
-
-  return TRPCClientError;
-}( /*#__PURE__*/_wrapNativeSuper(Error));
-
-export { TRPCClientError as T };