@trpc/client 11.0.0-next.92 → 11.0.0-rc.330

package/src/links/wsLink.ts

@@ -1,21 +1,22 @@
-import {
+import type { Observer, UnsubscribeFn } from '@trpc/server/observable';
+import { observable } from '@trpc/server/observable';
+import type {
   AnyRouter,
+  inferClientTypes,
   inferRouterError,
   MaybePromise,
   ProcedureType,
-} from '@trpc/server';
-import { observable, Observer, UnsubscribeFn } from '@trpc/server/observable';
-import {
   TRPCClientIncomingMessage,
   TRPCClientIncomingRequest,
   TRPCClientOutgoingMessage,
   TRPCRequestMessage,
   TRPCResponseMessage,
-} from '@trpc/server/rpc';
-import { retryDelay } from '../internals/retryDelay';
-import { transformResult } from '../shared/transformResult';
+} from '@trpc/server/unstable-core-do-not-import';
+import { transformResult } from '@trpc/server/unstable-core-do-not-import';
 import { TRPCClientError } from '../TRPCClientError';
-import { Operation, TRPCLink } from './types';
+import type { TransformerOptions } from '../unstable-internals';
+import { getTransformer } from '../unstable-internals';
+import type { Operation, TRPCLink } from './types';
 
 const run = <TResult>(fn: () => TResult): TResult => fn();
 
@@ -29,22 +30,66 @@ type WSCallbackObserver<TRouter extends AnyRouter, TOutput> = Observer<
   TRPCClientError<TRouter>
 >;
 
-export type WebSocketClientOptions = {
+const exponentialBackoff = (attemptIndex: number) =>
+  attemptIndex === 0 ? 0 : Math.min(1000 * 2 ** attemptIndex, 30000);
+
+export interface WebSocketClientOptions {
+  /**
+   * The URL to connect to (can be a function that returns a URL)
+   */
   url: string | (() => MaybePromise<string>);
+  /**
+   * Ponyfill which WebSocket implementation to use
+   */
   WebSocket?: typeof WebSocket;
-  retryDelayMs?: typeof retryDelay;
+  /**
+   * The number of milliseconds before a reconnect is attempted.
+   * @default {@link exponentialBackoff}
+   */
+  retryDelayMs?: typeof exponentialBackoff;
+  /**
+   * Triggered when a WebSocket connection is established
+   */
   onOpen?: () => void;
+  /**
+   * Triggered when a WebSocket connection is closed
+   */
   onClose?: (cause?: { code?: number }) => void;
-};
+  /**
+   * Lazy mode will close the WebSocket automatically after a period of inactivity (no messages sent or received and no pending requests)
+   */
+  lazy?: {
+    /**
+     * Enable lazy mode
+     * @default false
+     */
+    enabled: boolean;
+    /**
+     * Close the WebSocket after this many milliseconds
+     * @default 0
+     */
+    closeMs: number;
+  };
+}
 
+type LazyOptions = Required<NonNullable<WebSocketClientOptions['lazy']>>;
+const lazyDefaults: LazyOptions = {
+  enabled: false,
+  closeMs: 0,
+};
 export function createWSClient(opts: WebSocketClientOptions) {
   const {
     url,
     WebSocket: WebSocketImpl = WebSocket,
-    retryDelayMs: retryDelayFn = retryDelay,
+    retryDelayMs: retryDelayFn = exponentialBackoff,
     onOpen,
     onClose,
   } = opts;
+  const lazyOpts: LazyOptions = {
+    ...lazyDefaults,
+    ...opts.lazy,
+  };
+
   /* istanbul ignore next -- @preserve */
   if (!WebSocketImpl) {
     throw new Error(
@@ -73,11 +118,11 @@ export function createWSClient(opts: WebSocketClientOptions) {
   let connectAttempt = 0;
   let connectTimer: ReturnType<typeof setTimeout> | undefined = undefined;
   let connectionIndex = 0;
-  let activeConnection: null | Connection = createConnection();
-  /**
-   * Global connection has been killed
-   */
-  let killed = false;
+  let lazyDisconnectTimer: ReturnType<typeof setTimeout> | undefined =
+    undefined;
+  let activeConnection: null | Connection = lazyOpts.enabled
+    ? null
+    : createConnection();
 
   type Connection = {
     id: number;
@@ -100,6 +145,10 @@ export function createWSClient(opts: WebSocketClientOptions) {
    * tries to send the list of messages
    */
   function dispatch() {
+    if (!activeConnection) {
+      activeConnection = createConnection();
+      return;
+    }
     // using a timeout to batch messages
     setTimeout(() => {
       if (activeConnection?.state !== 'open') {
@@ -119,16 +168,32 @@ export function createWSClient(opts: WebSocketClientOptions) {
       }
       // clear
       outgoing = [];
+
+      startLazyDisconnectTimer();
     });
   }
-  function tryReconnect() {
-    if (!!connectTimer || killed) {
+  function tryReconnect(conn: Connection) {
+    if (!!connectTimer) {
       return;
     }
+
+    conn.state = 'connecting';
     const timeout = retryDelayFn(connectAttempt++);
     reconnectInMs(timeout);
   }
+  function hasPendingRequests(conn?: Connection) {
+    const requests = Object.values(pendingRequests);
+    if (!conn) {
+      return requests.length > 0;
+    }
+    return requests.some((req) => req.connection === conn);
+  }
+
   function reconnect() {
+    if (lazyOpts.enabled && !hasPendingRequests()) {
+      // Skip reconnecting if there are pending requests and we're in lazy mode
+      return;
+    }
     const oldConnection = activeConnection;
     activeConnection = createConnection();
     oldConnection && closeIfNoPending(oldConnection);
@@ -141,11 +206,8 @@ export function createWSClient(opts: WebSocketClientOptions) {
   }
 
   function closeIfNoPending(conn: Connection) {
-    // disconnect as soon as there are are no pending result
-    const hasPendingRequests = Object.values(pendingRequests).some(
-      (p) => p.connection === conn,
-    );
-    if (!hasPendingRequests) {
+    // disconnect as soon as there are are no pending requests
+    if (!hasPendingRequests(conn)) {
       conn.ws?.close();
     }
   }
@@ -156,16 +218,36 @@ export function createWSClient(opts: WebSocketClientOptions) {
     request(req.op, req.callbacks);
   }
 
+  const startLazyDisconnectTimer = () => {
+    if (!lazyOpts.enabled) {
+      return;
+    }
+
+    clearTimeout(lazyDisconnectTimer);
+    lazyDisconnectTimer = setTimeout(() => {
+      if (!activeConnection) {
+        return;
+      }
+
+      if (!hasPendingRequests(activeConnection)) {
+        activeConnection.ws?.close();
+        activeConnection = null;
+      }
+    }, lazyOpts.closeMs);
+  };
+
   function createConnection(): Connection {
     const self: Connection = {
       id: ++connectionIndex,
       state: 'connecting',
     } as Connection;
 
+    clearTimeout(lazyDisconnectTimer);
+
     const onError = () => {
       self.state = 'closed';
       if (self === activeConnection) {
-        tryReconnect();
+        tryReconnect(self);
       }
     };
     run(async () => {
@@ -192,6 +274,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
         if (self !== activeConnection) {
           return;
         }
+
         if (req.method === 'reconnect') {
           reconnect();
           // notify subscribers
@@ -226,6 +309,8 @@ export function createWSClient(opts: WebSocketClientOptions) {
         }
       };
       ws.addEventListener('message', ({ data }) => {
+        startLazyDisconnectTimer();
+
         const msg = JSON.parse(data) as TRPCClientIncomingMessage;
 
         if ('method' in msg) {
@@ -247,7 +332,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
 
         if (activeConnection === self) {
           // connection might have been replaced already
-          tryReconnect();
+          tryReconnect(self);
         }
 
         for (const [key, req] of Object.entries(pendingRequests)) {
@@ -299,6 +384,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
 
     // enqueue message
     outgoing.push(envelope);
+
     dispatch();
 
     return () => {
@@ -314,11 +400,12 @@ export function createWSClient(opts: WebSocketClientOptions) {
         });
         dispatch();
       }
+      startLazyDisconnectTimer();
     };
   }
   return {
     close: () => {
-      killed = true;
+      connectAttempt = 0;
 
       for (const req of Object.values(pendingRequests)) {
         if (req.type === 'subscription') {
@@ -334,20 +421,20 @@ export function createWSClient(opts: WebSocketClientOptions) {
       }
       activeConnection && closeIfNoPending(activeConnection);
       clearTimeout(connectTimer);
-
       connectTimer = undefined;
+      activeConnection = null;
     },
     request,
-    getConnection() {
+    get connection() {
       return activeConnection;
     },
   };
 }
 export type TRPCWebSocketClient = ReturnType<typeof createWSClient>;
 
-export interface WebSocketLinkOptions {
+export type WebSocketLinkOptions<TRouter extends AnyRouter> = {
   client: TRPCWebSocketClient;
-}
+} & TransformerOptions<inferClientTypes<TRouter>>;
 class TRPCWebSocketClosedError extends Error {
   constructor(message: string) {
     super(message);
@@ -357,18 +444,19 @@ class TRPCWebSocketClosedError extends Error {
 }
 
 /**
- * @see https://trpc.io/docs/client/links/wsLink
+ * @link https://trpc.io/docs/v11/client/links/wsLink
  */
 export function wsLink<TRouter extends AnyRouter>(
-  opts: WebSocketLinkOptions,
+  opts: WebSocketLinkOptions<TRouter>,
 ): TRPCLink<TRouter> {
-  return (runtime) => {
+  const transformer = getTransformer(opts.transformer);
+  return () => {
     const { client } = opts;
     return ({ op }) => {
       return observable((observer) => {
         const { type, path, id, context } = op;
 
-        const input = runtime.transformer.serialize(op.input);
+        const input = transformer.input.serialize(op.input);
 
         const unsub = client.request(
           { type, path, input, id, context },
@@ -381,7 +469,7 @@ export function wsLink<TRouter extends AnyRouter>(
               observer.complete();
             },
             next(message) {
-              const transformed = transformResult(message, runtime);
+              const transformed = transformResult(message, transformer.output);
 
               if (!transformed.ok) {
                 observer.error(TRPCClientError.from(transformed.error));

package/src/links.ts

@@ -0,0 +1,14 @@
+export * from './links/types';
+
+export * from './links/HTTPBatchLinkOptions';
+export * from './links/httpBatchLink';
+export * from './links/httpBatchStreamLink';
+export * from './links/httpLink';
+export * from './links/loggerLink';
+export * from './links/splitLink';
+export * from './links/wsLink';
+export * from './links/httpFormDataLink';
+
+// 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

@@ -0,0 +1 @@
+export * from './internals/transformer';

package/unstable-internals/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/unstable-internals';

package/unstable-internals/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/unstable-internals');

package/dist/TRPCClientError-23c8aa93.js

@@ -1,61 +0,0 @@
-import { i as isObject } from './transformResult-c1422cb5.js';
-
-function isTRPCClientError(cause) {
-    return (cause instanceof TRPCClientError ||
-        /**
-         * @deprecated
-         * Delete in next major
-         */
-        (cause instanceof Error && cause.name === 'TRPCClientError'));
-}
-function isTRPCErrorResponse(obj) {
-    return (isObject(obj) &&
-        isObject(obj.error) &&
-        typeof obj.error.code === 'number' &&
-        typeof obj.error.message === 'string');
-}
-class TRPCClientError extends Error {
-    constructor(message, opts) {
-        const cause = opts?.cause;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore https://github.com/tc39/proposal-error-cause
-        super(message, { cause });
-        this.meta = opts?.meta;
-        this.cause = cause;
-        this.shape = opts?.result?.error;
-        this.data = opts?.result?.error.data;
-        this.name = 'TRPCClientError';
-        Object.setPrototypeOf(this, TRPCClientError.prototype);
-    }
-    static from(_cause, opts = {}) {
-        const cause = _cause;
-        if (isTRPCClientError(cause)) {
-            if (opts.meta) {
-                // Decorate with meta error data
-                cause.meta = {
-                    ...cause.meta,
-                    ...opts.meta,
-                };
-            }
-            return cause;
-        }
-        if (isTRPCErrorResponse(cause)) {
-            return new TRPCClientError(cause.error.message, {
-                ...opts,
-                result: cause,
-            });
-        }
-        if (!(cause instanceof Error)) {
-            return new TRPCClientError('Unknown error', {
-                ...opts,
-                cause: cause,
-            });
-        }
-        return new TRPCClientError(cause.message, {
-            ...opts,
-            cause,
-        });
-    }
-}
-
-export { TRPCClientError as T };

package/dist/httpBatchLink-64fceaac.js

@@ -1,251 +0,0 @@
-'use strict';
-
-var observable = require('@trpc/server/observable');
-var transformResult = require('./transformResult-dfce8f15.js');
-var TRPCClientError = require('./TRPCClientError-e224e397.js');
-var httpUtils = require('./httpUtils-c0e7bf5a.js');
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */ /**
- * A function that should never be called unless we messed something up.
- */ const throwFatalError = ()=>{
-    throw new Error('Something went wrong. Please submit an issue at https://github.com/trpc/trpc/issues/new');
-};
-/**
- * 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(batchLoader) {
-    let pendingItems = null;
-    let dispatchTimer = null;
-    const destroyTimerAndPendingItems = ()=>{
-        clearTimeout(dispatchTimer);
-        dispatchTimer = null;
-        pendingItems = null;
-    };
-    /**
-   * Iterate through the items and split them into groups based on the `batchLoader`'s validate function
-   */ function groupItems(items) {
-        const groupedItems = [
-            []
-        ];
-        let index = 0;
-        while(true){
-            const item = items[index];
-            if (!item) {
-                break;
-            }
-            const lastGroup = groupedItems[groupedItems.length - 1];
-            if (item.aborted) {
-                // Item was aborted before it was dispatched
-                item.reject?.(new Error('Aborted'));
-                index++;
-                continue;
-            }
-            const isValid = batchLoader.validate(lastGroup.concat(item).map((it)=>it.key));
-            if (isValid) {
-                lastGroup.push(item);
-                index++;
-                continue;
-            }
-            if (lastGroup.length === 0) {
-                item.reject?.(new Error('Input is too big for a single dispatch'));
-                index++;
-                continue;
-            }
-            // Create new group, next iteration will try to add the item to that
-            groupedItems.push([]);
-        }
-        return groupedItems;
-    }
-    function dispatch() {
-        const groupedItems = groupItems(pendingItems);
-        destroyTimerAndPendingItems();
-        // Create batches for each group of items
-        for (const items of groupedItems){
-            if (!items.length) {
-                continue;
-            }
-            const batch = {
-                items,
-                cancel: throwFatalError
-            };
-            for (const item of items){
-                item.batch = batch;
-            }
-            const unitResolver = (index, value)=>{
-                const item = batch.items[index];
-                item.resolve?.(value);
-                item.batch = null;
-                item.reject = null;
-                item.resolve = null;
-            };
-            const { promise , cancel  } = batchLoader.fetch(batch.items.map((_item)=>_item.key), unitResolver);
-            batch.cancel = cancel;
-            promise.then((result)=>{
-                for(let i = 0; i < result.length; i++){
-                    const value = result[i];
-                    unitResolver(i, value);
-                }
-                for (const item of batch.items){
-                    item.reject?.(new Error('Missing result'));
-                    item.batch = null;
-                }
-            }).catch((cause)=>{
-                for (const item of batch.items){
-                    item.reject?.(cause);
-                    item.batch = null;
-                }
-            });
-        }
-    }
-    function load(key) {
-        const item = {
-            aborted: false,
-            key,
-            batch: null,
-            resolve: throwFatalError,
-            reject: throwFatalError
-        };
-        const promise = new Promise((resolve, reject)=>{
-            item.reject = reject;
-            item.resolve = resolve;
-            if (!pendingItems) {
-                pendingItems = [];
-            }
-            pendingItems.push(item);
-        });
-        if (!dispatchTimer) {
-            dispatchTimer = setTimeout(dispatch);
-        }
-        const cancel = ()=>{
-            item.aborted = true;
-            if (item.batch?.items.every((item)=>item.aborted)) {
-                // All items in the batch have been cancelled
-                item.batch.cancel();
-                item.batch = null;
-            }
-        };
-        return {
-            promise,
-            cancel
-        };
-    }
-    return {
-        load
-    };
-}
-
-/**
- * @internal
- */ function createHTTPBatchLink(requester) {
-    return function httpBatchLink(opts) {
-        const resolvedOpts = httpUtils.resolveHTTPLinkOptions(opts);
-        const maxURLLength = opts.maxURLLength ?? Infinity;
-        // initialized config
-        return (runtime)=>{
-            const batchLoader = (type)=>{
-                const validate = (batchOps)=>{
-                    if (maxURLLength === Infinity) {
-                        // escape hatch for quick calcs
-                        return true;
-                    }
-                    const path = batchOps.map((op)=>op.path).join(',');
-                    const inputs = batchOps.map((op)=>op.input);
-                    const url = httpUtils.getUrl({
-                        ...resolvedOpts,
-                        runtime,
-                        type,
-                        path,
-                        inputs
-                    });
-                    return url.length <= maxURLLength;
-                };
-                const fetch = requester({
-                    ...resolvedOpts,
-                    runtime,
-                    type,
-                    opts
-                });
-                return {
-                    validate,
-                    fetch
-                };
-            };
-            const query = dataLoader(batchLoader('query'));
-            const mutation = dataLoader(batchLoader('mutation'));
-            const subscription = dataLoader(batchLoader('subscription'));
-            const loaders = {
-                query,
-                subscription,
-                mutation
-            };
-            return ({ op  })=>{
-                return observable.observable((observer)=>{
-                    const loader = loaders[op.type];
-                    const { promise , cancel  } = loader.load(op);
-                    let _res = undefined;
-                    promise.then((res)=>{
-                        _res = res;
-                        const transformed = transformResult.transformResult(res.json, runtime);
-                        if (!transformed.ok) {
-                            observer.error(TRPCClientError.TRPCClientError.from(transformed.error, {
-                                meta: res.meta
-                            }));
-                            return;
-                        }
-                        observer.next({
-                            context: res.meta,
-                            result: transformed.result
-                        });
-                        observer.complete();
-                    }).catch((err)=>{
-                        observer.error(TRPCClientError.TRPCClientError.from(err, {
-                            meta: _res?.meta
-                        }));
-                    });
-                    return ()=>{
-                        cancel();
-                    };
-                });
-            };
-        };
-    };
-}
-
-const batchRequester = (requesterOpts)=>{
-    return (batchOps)=>{
-        const path = batchOps.map((op)=>op.path).join(',');
-        const inputs = batchOps.map((op)=>op.input);
-        const { promise , cancel  } = httpUtils.jsonHttpRequester({
-            ...requesterOpts,
-            path,
-            inputs,
-            headers () {
-                if (!requesterOpts.opts.headers) {
-                    return {};
-                }
-                if (typeof requesterOpts.opts.headers === 'function') {
-                    return requesterOpts.opts.headers({
-                        opList: batchOps
-                    });
-                }
-                return requesterOpts.opts.headers;
-            }
-        });
-        return {
-            promise: promise.then((res)=>{
-                const resJSON = Array.isArray(res.json) ? res.json : batchOps.map(()=>res.json);
-                const result = resJSON.map((item)=>({
-                        meta: res.meta,
-                        json: item
-                    }));
-                return result;
-            }),
-            cancel
-        };
-    };
-};
-const httpBatchLink = createHTTPBatchLink(batchRequester);
-
-exports.createHTTPBatchLink = createHTTPBatchLink;
-exports.httpBatchLink = httpBatchLink;