@trpc/client 11.0.0-rc.592 → 11.0.0-rc.593

package/src/links/internals/retryLink.ts

@@ -2,50 +2,68 @@
 // We're not actually exporting this link
 import type { Unsubscribable } from '@trpc/server/observable';
 import { observable } from '@trpc/server/observable';
-import type { AnyRouter } from '@trpc/server/unstable-core-do-not-import';
-import type { TRPCLink } from '../types';
+import type { InferrableClientTypes } from '@trpc/server/unstable-core-do-not-import';
+import type { TRPCClientError } from '../../TRPCClientError';
+import type { Operation, TRPCLink } from '../types';
+
+interface RetryLinkOptions<TInferrable extends InferrableClientTypes> {
+  /**
+   * The retry function
+   */
+  retry: (opts: RetryFnOptions<TInferrable>) => boolean;
+}
+
+interface RetryFnOptions<TInferrable extends InferrableClientTypes> {
+  /**
+   * The operation that failed
+   */
+  op: Operation;
+  /**
+   * The error that occurred
+   */
+  error: TRPCClientError<TInferrable>;
+  /**
+   * The number of attempts that have been made (including the first call)
+   */
+  attempts: number;
+}
 
 /**
- * @internal used for testing
+ * @see https://trpc.io/docs/v11/client/links/retryLink
  */
-export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {
-  attempts: number;
-}): TRPCLink<TRouter> {
+export function retryLink<TInferrable extends InferrableClientTypes>(
+  opts: RetryLinkOptions<TInferrable>,
+): TRPCLink<TInferrable> {
   // initialized config
   return () => {
     // initialized in app
     return ({ op, next }) => {
       // initialized for request
       return observable((observer) => {
-        let next$: Unsubscribable | null = null;
-        let attempts = 0;
-        let isDone = false;
-        function attempt() {
-          attempts++;
-          next$?.unsubscribe();
+        let next$: Unsubscribable;
+
+        attempt(1);
+
+        function attempt(attempts: number) {
           next$ = next(op).subscribe({
             error(error) {
-              /* istanbul ignore if -- @preserve */
-              if (attempts >= opts.attempts) {
-                observer.error(error);
-                return;
-              }
-              attempt();
+              const shouldRetry = opts.retry({
+                op,
+                attempts,
+                error,
+              });
+              shouldRetry ? attempt(attempts + 1) : observer.error(error);
             },
             next(result) {
               observer.next(result);
             },
             complete() {
-              if (isDone) {
-                observer.complete();
-              }
+              observer.complete();
             },
           });
         }
-        attempt();
         return () => {
-          isDone = true;
-          next$?.unsubscribe();
+          next$.unsubscribe();
         };
       });
     };

package/src/links/internals/subscriptions.ts

@@ -0,0 +1,26 @@
+interface ConnectionStateBase<TError> {
+  type: 'state';
+  data?: never;
+  error: TError | null;
+}
+
+interface ConnectionIdleState<TError> extends ConnectionStateBase<TError> {
+  state: 'idle';
+  error: null;
+}
+
+interface ConnectionConnectingState<TError>
+  extends ConnectionStateBase<TError> {
+  state: 'connecting';
+  error: TError | null;
+}
+
+interface ConnectionPendingState extends ConnectionStateBase<never> {
+  state: 'pending';
+  error: null;
+}
+
+export type TRPCConnectionState<TError> =
+  | ConnectionIdleState<TError>
+  | ConnectionConnectingState<TError>
+  | ConnectionPendingState;

package/src/links/loggerLink.ts

@@ -6,7 +6,10 @@
 // even if end-user `tsconfig.json` omits it in the `lib` array.
 
 import { observable, tap } from '@trpc/server/observable';
-import type { AnyRouter } from '@trpc/server/unstable-core-do-not-import';
+import type {
+  AnyRouter,
+  InferrableClientTypes,
+} from '@trpc/server/unstable-core-do-not-import';
 import type { TRPCClientError } from '../TRPCClientError';
 import type { Operation, OperationResultEnvelope, TRPCLink } from './types';
 
@@ -15,10 +18,12 @@ type ConsoleEsque = {
   error: (...args: any[]) => void;
 };
 
-type EnableFnOptions<TRouter extends AnyRouter> =
+type EnableFnOptions<TRouter extends InferrableClientTypes> =
   | {
       direction: 'down';
-      result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>;
+      result:
+        | OperationResultEnvelope<unknown, TRPCClientError<TRouter>>
+        | TRPCClientError<TRouter>;
     }
   | (Operation & {
       direction: 'up';
@@ -34,7 +39,9 @@ type LoggerLinkFnOptions<TRouter extends AnyRouter> = Operation &
          * Request result
          */
         direction: 'down';
-        result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>;
+        result:
+          | OperationResultEnvelope<unknown, TRPCClientError<TRouter>>
+          | TRPCClientError<TRouter>;
         elapsedMs: number;
       }
     | {
@@ -193,7 +200,8 @@ const defaultLogger =
     const fn: 'error' | 'log' =
       props.direction === 'down' &&
       props.result &&
-      (props.result instanceof Error || 'error' in props.result.result)
+      (props.result instanceof Error ||
+        ('error' in props.result.result && props.result.result.error))
         ? 'error'
         : 'log';
 
@@ -226,7 +234,9 @@ export function loggerLink<TRouter extends AnyRouter = AnyRouter>(
           });
         const requestStartTime = Date.now();
         function logResult(
-          result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>,
+          result:
+            | OperationResultEnvelope<unknown, TRPCClientError<TRouter>>
+            | TRPCClientError<TRouter>,
         ) {
           const elapsedMs = Date.now() - requestStartTime;
 

package/src/links/types.ts

@@ -7,6 +7,7 @@ import type {
 } from '@trpc/server/unstable-core-do-not-import';
 import type { ResponseEsque } from '../internals/types';
 import type { TRPCClientError } from '../TRPCClientError';
+import type { TRPCConnectionState } from './internals/subscriptions';
 
 export {
   isNonJsonSerializable,
@@ -58,10 +59,11 @@ export interface TRPCClientRuntime {
 /**
  * @internal
  */
-export interface OperationResultEnvelope<TOutput> {
+export interface OperationResultEnvelope<TOutput, TError> {
   result:
     | TRPCResultMessage<TOutput>['result']
-    | TRPCSuccessResponse<TOutput>['result'];
+    | TRPCSuccessResponse<TOutput>['result']
+    | TRPCConnectionState<TError>;
   context?: OperationContext;
 }
 
@@ -71,7 +73,10 @@ export interface OperationResultEnvelope<TOutput> {
 export type OperationResultObservable<
   TInferrable extends InferrableClientTypes,
   TOutput,
-> = Observable<OperationResultEnvelope<TOutput>, TRPCClientError<TInferrable>>;
+> = Observable<
+  OperationResultEnvelope<TOutput, TRPCClientError<TInferrable>>,
+  TRPCClientError<TInferrable>
+>;
 
 /**
  * @internal
@@ -79,7 +84,10 @@ export type OperationResultObservable<
 export type OperationResultObserver<
   TInferrable extends InferrableClientTypes,
   TOutput,
-> = Observer<OperationResultEnvelope<TOutput>, TRPCClientError<TInferrable>>;
+> = Observer<
+  OperationResultEnvelope<TOutput, TRPCClientError<TInferrable>>,
+  TRPCClientError<TInferrable>
+>;
 
 /**
  * @internal

package/src/links/wsLink.ts

@@ -1,5 +1,5 @@
 import type { Observer, UnsubscribeFn } from '@trpc/server/observable';
-import { observable } from '@trpc/server/observable';
+import { behaviorSubject, observable } from '@trpc/server/observable';
 import type { TRPCConnectionParamsMessage } from '@trpc/server/rpc';
 import type {
   AnyRouter,
@@ -16,6 +16,7 @@ import { transformResult } from '@trpc/server/unstable-core-do-not-import';
 import { TRPCClientError } from '../TRPCClientError';
 import type { TransformerOptions } from '../unstable-internals';
 import { getTransformer } from '../unstable-internals';
+import type { TRPCConnectionState } from './internals/subscriptions';
 import {
   resultOf,
   type UrlOptionsWithConnectionParams,
@@ -100,6 +101,13 @@ const lazyDefaults: LazyOptions = {
   enabled: false,
   closeMs: 0,
 };
+
+/**
+ * @see https://trpc.io/docs/v11/client/links/wsLink
+ * @deprecated
+ * 🙋‍♂️ **Contributors needed** to continue supporting WebSockets!
+ * See https://github.com/trpc/trpc/issues/6109
+ */
 export function createWSClient(opts: WebSocketClientOptions) {
   const {
     WebSocket: WebSocketImpl = WebSocket,
@@ -165,12 +173,27 @@ export function createWSClient(opts: WebSocketClientOptions) {
       }
   );
 
+  const initState: TRPCConnectionState<TRPCClientError<AnyRouter>> =
+    activeConnection
+      ? {
+          type: 'state',
+          state: 'connecting',
+          error: null,
+        }
+      : {
+          type: 'state',
+          state: 'idle',
+          error: null,
+        };
+  const connectionState =
+    behaviorSubject<TRPCConnectionState<TRPCClientError<AnyRouter>>>(initState);
+
   /**
    * tries to send the list of messages
    */
   function dispatch() {
     if (!activeConnection) {
-      activeConnection = createConnection();
+      reconnect(null);
       return;
     }
     // using a timeout to batch messages
@@ -196,12 +219,13 @@ export function createWSClient(opts: WebSocketClientOptions) {
       startLazyDisconnectTimer();
     });
   }
-  function tryReconnect() {
+  function tryReconnect(cause: Error | null) {
     if (!!connectTimer) {
       return;
     }
+
     const timeout = retryDelayFn(connectAttempt++);
-    reconnectInMs(timeout);
+    reconnectInMs(timeout, cause);
   }
   function hasPendingRequests(conn?: Connection) {
     const requests = Object.values(pendingRequests);
@@ -211,20 +235,31 @@ export function createWSClient(opts: WebSocketClientOptions) {
     return requests.some((req) => req.connection === conn);
   }
 
-  function reconnect() {
+  function reconnect(cause: Error | null) {
     if (lazyOpts.enabled && !hasPendingRequests()) {
-      // Skip reconnecting if there are pending requests and we're in lazy mode
+      // Skip reconnecting if there aren't pending requests and we're in lazy mode
       return;
     }
     const oldConnection = activeConnection;
     activeConnection = createConnection();
     oldConnection && closeIfNoPending(oldConnection);
+
+    const currentState = connectionState.get();
+    if (currentState.state !== 'connecting') {
+      connectionState.next({
+        type: 'state',
+        state: 'connecting',
+        error: cause ? TRPCClientError.from(cause) : null,
+      });
+    }
   }
-  function reconnectInMs(ms: number) {
+  function reconnectInMs(ms: number, cause: Error | null) {
     if (connectTimer) {
       return;
     }
-    connectTimer = setTimeout(reconnect, ms);
+    connectTimer = setTimeout(() => {
+      reconnect(cause);
+    }, ms);
   }
 
   function closeIfNoPending(conn: Connection) {
@@ -255,9 +290,14 @@ export function createWSClient(opts: WebSocketClientOptions) {
         return;
       }
 
-      if (!hasPendingRequests(activeConnection)) {
+      if (!hasPendingRequests()) {
         activeConnection.ws?.close();
         activeConnection = null;
+        connectionState.next({
+          type: 'state',
+          state: 'idle',
+          error: null,
+        });
       }
     }, lazyOpts.closeMs);
   };
@@ -272,18 +312,31 @@ export function createWSClient(opts: WebSocketClientOptions) {
 
     clearTimeout(lazyDisconnectTimer);
 
-    const onCloseOrError = () => {
+    function destroy() {
+      const noop = () => {
+        // no-op
+      };
+      const { ws } = self;
+      if (ws) {
+        ws.onclose = noop;
+        ws.onerror = noop;
+        ws.onmessage = noop;
+        ws.onopen = noop;
+
+        ws.close();
+      }
+
+      self.state = 'closed';
+    }
+
+    const onCloseOrError = (cause: Error | null) => {
       clearTimeout(pingTimeout);
       clearTimeout(pongTimeout);
 
-      if (self.state === 'closed') {
-        return;
-      }
-
-      (self as Connection).state = 'closed';
+      self.state = 'closed';
       if (activeConnection === self) {
         // connection might have been replaced already
-        tryReconnect();
+        tryReconnect(cause);
       }
 
       for (const [key, req] of Object.entries(pendingRequests)) {
@@ -299,29 +352,18 @@ export function createWSClient(opts: WebSocketClientOptions) {
           // Queries and mutations will error if interrupted
           delete pendingRequests[key];
           req.callbacks.error?.(
-            TRPCClientError.from(
-              new TRPCWebSocketClosedError('WebSocket closed prematurely'),
-            ),
+            TRPCClientError.from(cause ?? new TRPCWebSocketClosedError()),
           );
         }
       }
     };
 
-    const onClose = (code: number) => {
-      const wasOpen = self.state === 'open';
-      onCloseOrError();
-
-      if (wasOpen) {
-        opts.onClose?.({ code });
-      }
-    };
-
     const onError = (evt?: Event) => {
-      onCloseOrError();
+      onCloseOrError(new TRPCWebSocketClosedError({ cause: evt }));
       opts.onError?.(evt);
     };
-    run(async () => {
-      let url = await resultOf(opts.url);
+
+    function connect(url: string) {
       if (opts.connectionParams) {
         // append `?connectionParams=1` when connection params are used
         const prefix = url.includes('?') ? '&' : '?';
@@ -334,7 +376,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
       clearTimeout(connectTimer);
       connectTimer = undefined;
 
-      ws.addEventListener('open', () => {
+      ws.onopen = () => {
         async function sendConnectionParams() {
           if (!opts.connectionParams) {
             return;
@@ -356,8 +398,11 @@ export function createWSClient(opts: WebSocketClientOptions) {
           const schedulePing = () => {
             const schedulePongTimeout = () => {
               pongTimeout = setTimeout(() => {
-                ws.close(3001);
-                onClose(3001);
+                const wasOpen = self.state === 'open';
+                destroy();
+                if (wasOpen) {
+                  opts.onClose?.();
+                }
               }, pongTimeoutMs);
             };
             pingTimeout = setTimeout(() => {
@@ -385,25 +430,40 @@ export function createWSClient(opts: WebSocketClientOptions) {
           connectAttempt = 0;
           self.state = 'open';
 
+          // Update connection state
+          connectionState.next({
+            type: 'state',
+            state: 'pending',
+            error: null,
+          });
+
           opts.onOpen?.();
           dispatch();
-        }).catch((cause) => {
+        }).catch((cause: unknown) => {
           ws.close(
             // "Status codes in the range 3000-3999 are reserved for use by libraries, frameworks, and applications"
             3000,
-            cause,
           );
-          onError();
+          onCloseOrError(
+            new TRPCWebSocketClosedError({
+              message: 'Initialization error',
+              cause,
+            }),
+          );
         });
-      });
-      ws.addEventListener('error', onError);
+      };
+      ws.onerror = onError;
       const handleIncomingRequest = (req: TRPCClientIncomingRequest) => {
         if (self !== activeConnection) {
           return;
         }
 
         if (req.method === 'reconnect') {
-          reconnect();
+          reconnect(
+            new TRPCWebSocketClosedError({
+              message: 'Server requested reconnect',
+            }),
+          );
           // notify subscribers
           for (const pendingReq of Object.values(pendingRequests)) {
             if (pendingReq.type === 'subscription') {
@@ -445,7 +505,8 @@ export function createWSClient(opts: WebSocketClientOptions) {
         }
       };
 
-      ws.addEventListener('message', ({ data }) => {
+      ws.onmessage = (event) => {
+        const { data } = event;
         if (data === 'PONG') {
           return;
         }
@@ -466,18 +527,25 @@ export function createWSClient(opts: WebSocketClientOptions) {
           // when receiving a message, we close old connection that has no pending requests
           closeIfNoPending(self);
         }
-      });
+      };
 
-      ws.addEventListener('close', ({ code }) => {
+      ws.onclose = (event) => {
         const wasOpen = self.state === 'open';
 
-        onCloseOrError();
+        destroy();
+        onCloseOrError(new TRPCWebSocketClosedError({ cause: event }));
 
         if (wasOpen) {
-          opts.onClose?.({ code });
+          opts.onClose?.(event);
         }
+      };
+    }
+
+    Promise.resolve(resultOf(opts.url))
+      .then(connect)
+      .catch(() => {
+        onCloseOrError(new Error('Failed to resolve url'));
       });
-    }).catch(onError);
     return self;
   }
 
@@ -527,6 +595,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
       startLazyDisconnectTimer();
     };
   }
+
   return {
     close: () => {
       connectAttempt = 0;
@@ -538,7 +607,9 @@ export function createWSClient(opts: WebSocketClientOptions) {
           // close pending requests that aren't attached to a connection yet
           req.callbacks.error(
             TRPCClientError.from(
-              new Error('Closed before connection was established'),
+              new TRPCWebSocketClosedError({
+                message: 'Closed before connection was established',
+              }),
             ),
           );
         }
@@ -556,16 +627,37 @@ export function createWSClient(opts: WebSocketClientOptions) {
      * Reconnect to the WebSocket server
      */
     reconnect,
+    connectionState: connectionState,
   };
 }
+
+/**
+ * @see https://trpc.io/docs/v11/client/links/wsLink
+ * @deprecated
+ * 🙋‍♂️ **Contributors needed** to continue supporting WebSockets!
+ * See https://github.com/trpc/trpc/issues/6109
+ */
 export type TRPCWebSocketClient = ReturnType<typeof createWSClient>;
 
+/**
+ * @see https://trpc.io/docs/v11/client/links/wsLink
+ * @deprecated
+ * 🙋‍♂️ **Contributors needed** to continue supporting WebSockets!
+ * See https://github.com/trpc/trpc/issues/6109
+ */
 export type WebSocketLinkOptions<TRouter extends AnyRouter> = {
   client: TRPCWebSocketClient;
 } & TransformerOptions<inferClientTypes<TRouter>>;
 class TRPCWebSocketClosedError extends Error {
-  constructor(message: string) {
-    super(message);
+  constructor(opts?: { cause?: unknown; message?: string }) {
+    super(
+      opts?.message ?? 'WebSocket closed',
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore https://github.com/tc39/proposal-error-cause
+      {
+        cause: opts?.cause,
+      },
+    );
     this.name = 'TRPCWebSocketClosedError';
     Object.setPrototypeOf(this, TRPCWebSocketClosedError.prototype);
   }
@@ -573,6 +665,9 @@ class TRPCWebSocketClosedError extends Error {
 
 /**
  * @see https://trpc.io/docs/v11/client/links/wsLink
+ * @deprecated
+ * 🙋‍♂️ **Contributors needed** to continue supporting WebSockets!
+ * See https://github.com/trpc/trpc/issues/6109
  */
 export function wsLink<TRouter extends AnyRouter>(
   opts: WebSocketLinkOptions<TRouter>,
@@ -586,18 +681,29 @@ export function wsLink<TRouter extends AnyRouter>(
 
         const input = transformer.input.serialize(op.input);
 
-        const unsub = client.request({
+        const connState =
+          type === 'subscription'
+            ? client.connectionState.subscribe({
+                next(result) {
+                  observer.next({
+                    result,
+                    context,
+                  });
+                },
+              })
+            : null;
+        const unsubscribeRequest = client.request({
           op: { type, path, input, id, context, signal: null },
           callbacks: {
             error(err) {
-              observer.error(err as TRPCClientError<any>);
-              unsub();
+              observer.error(err);
+              unsubscribeRequest();
             },
             complete() {
               observer.complete();
             },
-            next(message) {
-              const transformed = transformResult(message, transformer.output);
+            next(event) {
+              const transformed = transformResult(event, transformer.output);
 
               if (!transformed.ok) {
                 observer.error(TRPCClientError.from(transformed.error));
@@ -610,7 +716,7 @@ export function wsLink<TRouter extends AnyRouter>(
               if (op.type !== 'subscription') {
                 // if it isn't a subscription we don't care about next response
 
-                unsub();
+                unsubscribeRequest();
                 observer.complete();
               }
             },
@@ -618,7 +724,8 @@ export function wsLink<TRouter extends AnyRouter>(
           lastEventId: undefined,
         });
         return () => {
-          unsub();
+          unsubscribeRequest();
+          connState?.unsubscribe();
         };
       });
     };

package/src/links.ts

@@ -8,7 +8,7 @@ export * from './links/loggerLink';
 export * from './links/splitLink';
 export * from './links/wsLink';
 export * from './links/httpSubscriptionLink';
+export * from './links/internals/retryLink';
 
 // These are not public (yet) as we get this functionality from tanstack query
-// export * from './links/internals/retryLink';
 // export * from './links/internals/dedupeLink';

package/src/unstable-internals.ts

@@ -1 +1,2 @@
 export * from './internals/transformer';
+export * from './links/internals/subscriptions';