@trpc/client 11.0.0-alpha-tmp-subscription-connection-state.488 → 11.0.0-alpha-tmp-12-06-react.665

package/src/links/httpSubscriptionLink.ts

@@ -1,23 +1,31 @@
-import { observable } from '@trpc/server/observable';
+import { behaviorSubject, observable } from '@trpc/server/observable';
+import type {
+  TRPC_ERROR_CODE_NUMBER,
+  TRPCErrorShape,
+  TRPCResult,
+} from '@trpc/server/rpc';
+import { TRPC_ERROR_CODES_BY_KEY } from '@trpc/server/rpc';
 import type {
   AnyClientTypes,
+  EventSourceLike,
   inferClientTypes,
   InferrableClientTypes,
-  SSEMessage,
 } from '@trpc/server/unstable-core-do-not-import';
 import {
   run,
   sseStreamConsumer,
 } from '@trpc/server/unstable-core-do-not-import';
+import { inputWithTrackedEventId } from '../internals/inputWithTrackedEventId';
+import { raceAbortSignals } from '../internals/signals';
 import { TRPCClientError } from '../TRPCClientError';
+import type { TRPCConnectionState } from '../unstable-internals';
 import { getTransformer, type TransformerOptions } from '../unstable-internals';
 import { getUrl } from './internals/httpUtils';
-import type { CallbackOrValue } from './internals/urlWithConnectionParams';
 import {
   resultOf,
   type UrlOptionsWithConnectionParams,
 } from './internals/urlWithConnectionParams';
-import type { TRPCLink } from './types';
+import type { Operation, TRPCLink } from './types';
 
 async function urlWithConnectionParams(
   opts: UrlOptionsWithConnectionParams,
@@ -34,21 +42,49 @@ async function urlWithConnectionParams(
   return url;
 }
 
-type HTTPSubscriptionLinkOptions<TRoot extends AnyClientTypes> = {
+type HTTPSubscriptionLinkOptions<
+  TRoot extends AnyClientTypes,
+  TEventSource extends EventSourceLike.AnyConstructor = typeof EventSource,
+> = {
+  /**
+   * EventSource ponyfill
+   */
+  EventSource?: TEventSource;
   /**
    * EventSource options or a callback that returns them
    */
-  eventSourceOptions?: CallbackOrValue<EventSourceInit>;
+  eventSourceOptions?:
+    | EventSourceLike.InitDictOf<TEventSource>
+    | ((opts: {
+        op: Operation;
+      }) =>
+        | EventSourceLike.InitDictOf<TEventSource>
+        | Promise<EventSourceLike.InitDictOf<TEventSource>>);
 } & TransformerOptions<TRoot> &
   UrlOptionsWithConnectionParams;
 
+/**
+ * tRPC error codes that are considered retryable
+ * With out of the box SSE, the client will reconnect when these errors are encountered
+ */
+const codes5xx: TRPC_ERROR_CODE_NUMBER[] = [
+  TRPC_ERROR_CODES_BY_KEY.BAD_GATEWAY,
+  TRPC_ERROR_CODES_BY_KEY.SERVICE_UNAVAILABLE,
+  TRPC_ERROR_CODES_BY_KEY.GATEWAY_TIMEOUT,
+  TRPC_ERROR_CODES_BY_KEY.INTERNAL_SERVER_ERROR,
+];
+
 /**
  * @see https://trpc.io/docs/client/links/httpSubscriptionLink
  */
 export function unstable_httpSubscriptionLink<
   TInferrable extends InferrableClientTypes,
+  TEventSource extends EventSourceLike.AnyConstructor,
 >(
-  opts: HTTPSubscriptionLinkOptions<inferClientTypes<TInferrable>>,
+  opts: HTTPSubscriptionLinkOptions<
+    inferClientTypes<TInferrable>,
+    TEventSource
+  >,
 ): TRPCLink<TInferrable> {
   const transformer = getTransformer(opts.transformer);
 
@@ -56,97 +92,142 @@ export function unstable_httpSubscriptionLink<
     return ({ op }) => {
       return observable((observer) => {
         const { type, path, input } = op;
+
         /* istanbul ignore if -- @preserve */
         if (type !== 'subscription') {
           throw new Error('httpSubscriptionLink only supports subscriptions');
         }
 
-        let eventSource: EventSource | null = null;
-        let unsubscribed = false;
-
-        run(async () => {
-          const url = getUrl({
-            transformer,
-            url: await urlWithConnectionParams(opts),
-            input,
-            path,
-            type,
-            signal: null,
-          });
-
-          const eventSourceOptions = await resultOf(opts.eventSourceOptions);
-          /* istanbul ignore if -- @preserve */
-          if (unsubscribed) {
-            // already unsubscribed - rare race condition
-            return;
-          }
-          eventSource = new EventSource(url, eventSourceOptions);
-          observer.next({
-            result: {
-              type: 'state',
-              state: 'connecting',
-              data: null,
-            },
-          });
-
-          const onStarted = () => {
-            observer.next({
-              result: {
-                type: 'started',
-              },
-              context: {
-                eventSource,
-              },
-            });
+        let lastEventId: string | undefined = undefined;
+        const ac = new AbortController();
+        const signal = raceAbortSignals(op.signal, ac.signal);
+        const eventSourceStream = sseStreamConsumer<{
+          EventSource: TEventSource;
+          data: Partial<{
+            id?: string;
+            data: unknown;
+          }>;
+          error: TRPCErrorShape;
+        }>({
+          url: async () =>
+            getUrl({
+              transformer,
+              url: await urlWithConnectionParams(opts),
+              input: inputWithTrackedEventId(input, lastEventId),
+              path,
+              type,
+              signal: null,
+            }),
+          init: () => resultOf(opts.eventSourceOptions, { op }),
+          signal,
+          deserialize: transformer.output.deserialize,
+          EventSource:
+            opts.EventSource ??
+            (globalThis.EventSource as never as TEventSource),
+        });
 
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            eventSource!.removeEventListener('open', onStarted);
-          };
-          // console.log('starting', new Date());
-          eventSource.addEventListener('open', onStarted);
+        const connectionState = behaviorSubject<
+          TRPCConnectionState<TRPCClientError<any>>
+        >({
+          type: 'state',
+          state: 'connecting',
+          error: null,
+        });
 
-          eventSource.addEventListener('open', () => {
+        const connectionSub = connectionState.subscribe({
+          next(state) {
             observer.next({
-              result: {
-                type: 'state',
-                state: 'pending',
-              },
+              result: state,
             });
-          });
-
-          eventSource.addEventListener('error', (event) => {
-            // sseStreamConsumer handles this already
-            if (eventSource?.readyState === EventSource.CLOSED) {
-              return;
+          },
+        });
+        run(async () => {
+          for await (const chunk of eventSourceStream) {
+            switch (chunk.type) {
+              case 'ping':
+                // do nothing
+                break;
+              case 'data':
+                const chunkData = chunk.data;
+
+                let result: TRPCResult<unknown>;
+                if (chunkData.id) {
+                  // if the `tracked()`-helper is used, we always have an `id` field
+                  lastEventId = chunkData.id;
+                  result = {
+                    id: chunkData.id,
+                    data: chunkData,
+                  };
+                } else {
+                  result = {
+                    data: chunkData.data,
+                  };
+                }
+
+                observer.next({
+                  result,
+                  context: {
+                    eventSource: chunk.eventSource,
+                  },
+                });
+                break;
+              case 'connected': {
+                observer.next({
+                  result: {
+                    type: 'started',
+                  },
+                  context: {
+                    eventSource: chunk.eventSource,
+                  },
+                });
+                connectionState.next({
+                  type: 'state',
+                  state: 'pending',
+                  error: null,
+                });
+                break;
+              }
+              case 'serialized-error': {
+                const error = TRPCClientError.from({ error: chunk.error });
+
+                if (codes5xx.includes(chunk.error.code)) {
+                  //
+                  connectionState.next({
+                    type: 'state',
+                    state: 'connecting',
+                    error,
+                  });
+                  break;
+                }
+                //
+                // non-retryable error, cancel the subscription
+                throw error;
+              }
+              case 'connecting': {
+                const lastState = connectionState.get();
+
+                const error = chunk.event && TRPCClientError.from(chunk.event);
+                if (!error && lastState.state === 'connecting') {
+                  break;
+                }
+
+                connectionState.next({
+                  type: 'state',
+                  state: 'connecting',
+                  error,
+                });
+                break;
+              }
+              case 'timeout': {
+                connectionState.next({
+                  type: 'state',
+                  state: 'connecting',
+                  error: new TRPCClientError(
+                    `Timeout of ${chunk.ms}ms reached while waiting for a response`,
+                  ),
+                });
+              }
             }
-
-            const error =
-              globalThis.ErrorEvent && event instanceof ErrorEvent
-                ? TRPCClientError.from(event.error)
-                : TRPCClientError.from(new Error(`Unknown EventSource error`));
-
-            observer.next({
-              result: {
-                type: 'state',
-                state: 'connecting',
-                data: error,
-              },
-            });
-          });
-
-          const iterable = sseStreamConsumer<Partial<SSEMessage>>({
-            from: eventSource,
-            deserialize: transformer.output.deserialize,
-          });
-
-          for await (const chunk of iterable) {
-            // if the `sse({})`-helper is used, we always have an `id` field
-            const data = 'id' in chunk ? chunk : chunk.data;
-            observer.next({
-              result: {
-                data,
-              },
-            });
           }
 
           observer.next({
@@ -155,38 +236,14 @@ export function unstable_httpSubscriptionLink<
             },
           });
           observer.complete();
-
-          observer.next({
-            result: {
-              type: 'state',
-              state: 'idle',
-            },
-          });
         }).catch((error) => {
-          const trpcError = TRPCClientError.from(error);
-
-          observer.next({
-            result: {
-              type: 'state',
-              state: 'error',
-              data: TRPCClientError.from(trpcError),
-            },
-          });
-          observer.error(trpcError);
+          observer.error(TRPCClientError.from(error));
         });
 
         return () => {
           observer.complete();
-
-          observer.next({
-            result: {
-              type: 'state',
-              state: 'idle',
-            },
-          });
-
-          eventSource?.close();
-          unsubscribed = true;
+          ac.abort();
+          connectionSub.unsubscribe();
         };
       });
     };

package/src/links/internals/httpUtils.ts

@@ -30,7 +30,7 @@ export type HTTPLinkBaseOptions<
   /**
    * Send all requests `as POST`s requests regardless of the procedure type
    * The HTTP handler must separately allow overriding the method. See:
-   * @link https://trpc.io/docs/rpc
+   * @see https://trpc.io/docs/rpc
    */
   methodOverride?: 'POST';
 } & TransformerOptions<TRoot>;
@@ -240,43 +240,3 @@ export async function httpRequest(
     meta,
   };
 }
-
-/**
- * Merges multiple abort signals into a single one
- * - When all signals have been aborted, the merged signal will be aborted
- */
-export function mergeAbortSignals(
-  opts: {
-    signal: Maybe<AbortSignal>;
-  }[],
-): AbortController {
-  const ac = new AbortController();
-
-  if (opts.some((o) => !o.signal)) {
-    return ac;
-  }
-
-  const count = opts.length;
-
-  let abortedCount = 0;
-
-  const onAbort = () => {
-    if (++abortedCount === count) {
-      ac.abort();
-    }
-  };
-
-  for (const o of opts) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const signal = o.signal!;
-    if (signal.aborted) {
-      onAbort();
-    } else {
-      signal.addEventListener('abort', onAbort, {
-        once: true,
-      });
-    }
-  }
-
-  return ac;
-}

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/internals/urlWithConnectionParams.ts

@@ -2,9 +2,15 @@ import { type TRPCRequestInfo } from '@trpc/server/http';
 
 /**
  * Get the result of a value or function that returns a value
+ * It also optionally accepts typesafe arguments for the function
  */
-export const resultOf = <T>(value: T | (() => T)): T => {
-  return typeof value === 'function' ? (value as () => T)() : value;
+export const resultOf = <T, TArgs extends any[]>(
+  value: T | ((...args: TArgs) => T),
+  ...args: TArgs
+): T => {
+  return typeof value === 'function'
+    ? (value as (...args: TArgs) => T)(...args)
+    : value;
 };
 
 /**

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';
 
@@ -201,7 +209,7 @@ const defaultLogger =
   };
 
 /**
- * @link https://trpc.io/docs/v11/client/links/loggerLink
+ * @see https://trpc.io/docs/v11/client/links/loggerLink
  */
 export function loggerLink<TRouter extends AnyRouter = AnyRouter>(
   opts: LoggerLinkOptions<TRouter> = {},
@@ -219,24 +227,28 @@ export function loggerLink<TRouter extends AnyRouter = AnyRouter>(
     return ({ op, next }) => {
       return observable((observer) => {
         // ->
-        enabled({ ...op, direction: 'up' }) &&
+        if (enabled({ ...op, direction: 'up' })) {
           logger({
             ...op,
             direction: 'up',
           });
+        }
         const requestStartTime = Date.now();
         function logResult(
-          result: OperationResultEnvelope<unknown> | TRPCClientError<TRouter>,
+          result:
+            | OperationResultEnvelope<unknown, TRPCClientError<TRouter>>
+            | TRPCClientError<TRouter>,
         ) {
           const elapsedMs = Date.now() - requestStartTime;
 
-          enabled({ ...op, direction: 'down', result }) &&
+          if (enabled({ ...op, direction: 'down', result })) {
             logger({
               ...op,
               direction: 'down',
               elapsedMs,
               result,
             });
+          }
         }
         return next(op)
           .pipe(

package/src/links/retryLink.ts

@@ -0,0 +1,101 @@
+/* istanbul ignore file -- @preserve */
+// We're not actually exporting this link
+import type { Unsubscribable } from '@trpc/server/observable';
+import { observable } from '@trpc/server/observable';
+import type { InferrableClientTypes } from '@trpc/server/unstable-core-do-not-import';
+import { inputWithTrackedEventId } from '../internals/inputWithTrackedEventId';
+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;
+}
+
+/**
+ * @see https://trpc.io/docs/v11/client/links/retryLink
+ */
+export function retryLink<TInferrable extends InferrableClientTypes>(
+  opts: RetryLinkOptions<TInferrable>,
+): TRPCLink<TInferrable> {
+  // initialized config
+  return () => {
+    // initialized in app
+    return (callOpts) => {
+      // initialized for request
+      return observable((observer) => {
+        let next$: Unsubscribable;
+
+        let lastEventId: string | undefined = undefined;
+
+        attempt(1);
+
+        function opWithLastEventId() {
+          const op = callOpts.op;
+          if (!lastEventId) {
+            return op;
+          }
+
+          return {
+            ...op,
+            input: inputWithTrackedEventId(op.input, lastEventId),
+          };
+        }
+
+        function attempt(attempts: number) {
+          const op = opWithLastEventId();
+
+          next$ = callOpts.next(op).subscribe({
+            error(error) {
+              const shouldRetry = opts.retry({
+                op,
+                attempts,
+                error,
+              });
+              if (shouldRetry) {
+                attempt(attempts + 1);
+              } else {
+                observer.error(error);
+              }
+            },
+            next(envelope) {
+              //
+              if (
+                (!envelope.result.type || envelope.result.type === 'data') &&
+                envelope.result.id
+              ) {
+                //
+                lastEventId = envelope.result.id;
+              }
+
+              observer.next(envelope);
+            },
+            complete() {
+              observer.complete();
+            },
+          });
+        }
+        return () => {
+          next$.unsubscribe();
+        };
+      });
+    };
+  };
+}