@trpc/client 10.28.2 → 10.29.1

package/src/links/httpBatchLink.ts

@@ -1,138 +1,50 @@
-import { AnyRouter, ProcedureType } from '@trpc/server';
-import { observable } from '@trpc/server/observable';
-import { dataLoader } from '../internals/dataLoader';
 import { NonEmptyArray } from '../internals/types';
-import { transformResult } from '../shared/transformResult';
-import { TRPCClientError } from '../TRPCClientError';
+import { HTTPBatchLinkOptions } from './HTTPBatchLinkOptions';
 import {
-  getUrl,
-  HTTPLinkBaseOptions,
-  HTTPResult,
-  jsonHttpRequester,
-  resolveHTTPLinkOptions,
-} from './internals/httpUtils';
-import { HTTPHeaders, Operation, TRPCLink } from './types';
-
-export interface HttpBatchLinkOptions extends HTTPLinkBaseOptions {
-  maxURLLength?: number;
-  /**
-   * Headers to be set on outgoing requests or a callback that of said headers
-   * @link http://trpc.io/docs/client/headers
-   */
-  headers?:
-    | HTTPHeaders
-    | ((opts: {
-        opList: NonEmptyArray<Operation>;
-      }) => HTTPHeaders | Promise<HTTPHeaders>);
-}
-
-export function httpBatchLink<TRouter extends AnyRouter>(
-  opts: HttpBatchLinkOptions,
-): TRPCLink<TRouter> {
-  const resolvedOpts = resolveHTTPLinkOptions(opts);
-  // initialized config
-  return (runtime) => {
-    const maxURLLength = opts.maxURLLength || Infinity;
-
-    const batchLoader = (type: ProcedureType) => {
-      const validate = (batchOps: Operation[]) => {
-        if (maxURLLength === Infinity) {
-          // escape hatch for quick calcs
-          return true;
+  createHTTPBatchLink,
+  RequesterFn,
+} from './internals/createHTTPBatchLink';
+import { jsonHttpRequester } from './internals/httpUtils';
+import { Operation } from './types';
+
+const batchRequester: RequesterFn<HTTPBatchLinkOptions> = (requesterOpts) => {
+  return (batchOps) => {
+    const path = batchOps.map((op) => op.path).join(',');
+    const inputs = batchOps.map((op) => op.input);
+
+    const { promise, cancel } = jsonHttpRequester({
+      ...requesterOpts,
+      path,
+      inputs,
+      headers() {
+        if (!requesterOpts.opts.headers) {
+          return {};
         }
-        const path = batchOps.map((op) => op.path).join(',');
-        const inputs = batchOps.map((op) => op.input);
-
-        const url = getUrl({
-          ...resolvedOpts,
-          runtime,
-          type,
-          path,
-          inputs,
-        });
-
-        return url.length <= maxURLLength;
-      };
-
-      const fetch = (batchOps: Operation[]) => {
-        const path = batchOps.map((op) => op.path).join(',');
-        const inputs = batchOps.map((op) => op.input);
-
-        const { promise, cancel } = jsonHttpRequester({
-          ...resolvedOpts,
-          runtime,
-          type,
-          path,
-          inputs,
-          headers() {
-            if (!opts.headers) {
-              return {};
-            }
-            if (typeof opts.headers === 'function') {
-              return opts.headers({
-                opList: batchOps as NonEmptyArray<Operation>,
-              });
-            }
-            return 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,
-        };
-      };
-
-      return { validate, fetch };
-    };
-
-    const query = dataLoader<Operation, HTTPResult>(batchLoader('query'));
-    const mutation = dataLoader<Operation, HTTPResult>(batchLoader('mutation'));
-    const subscription = dataLoader<Operation, HTTPResult>(
-      batchLoader('subscription'),
-    );
-
-    const loaders = { query, subscription, mutation };
-    return ({ op }) => {
-      return observable((observer) => {
-        const loader = loaders[op.type];
-        const { promise, cancel } = loader.load(op);
-
-        promise
-          .then((res) => {
-            const transformed = transformResult(res.json, runtime);
-
-            if (!transformed.ok) {
-              observer.error(
-                TRPCClientError.from(transformed.error, {
-                  meta: res.meta,
-                }),
-              );
-              return;
-            }
-            observer.next({
-              context: res.meta,
-              result: transformed.result,
-            });
-            observer.complete();
-          })
-          .catch((err) => observer.error(TRPCClientError.from(err)));
-
-        return () => {
-          cancel();
-        };
-      });
+        if (typeof requesterOpts.opts.headers === 'function') {
+          return requesterOpts.opts.headers({
+            opList: batchOps as NonEmptyArray<Operation>,
+          });
+        }
+        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,
     };
   };
-}
+};
+
+export const httpBatchLink = createHTTPBatchLink(batchRequester);

package/src/links/httpBatchStreamLink.ts

@@ -0,0 +1,53 @@
+import { NonEmptyArray } from '../internals/types';
+import { HTTPBatchStreamLinkOptions } from './HTTPBatchStreamLinkOptions';
+import {
+  createHTTPBatchLink,
+  RequesterFn,
+} from './internals/createHTTPBatchLink';
+import { getTextDecoder } from './internals/getTextDecoder';
+import { streamingJsonHttpRequester } from './internals/parseJSONStream';
+import { Operation } from './types';
+
+const streamRequester: RequesterFn<HTTPBatchStreamLinkOptions> = (
+  requesterOpts,
+) => {
+  const textDecoder = getTextDecoder(requesterOpts.opts.textDecoder);
+  return (batchOps, unitResolver) => {
+    const path = batchOps.map((op) => op.path).join(',');
+    const inputs = batchOps.map((op) => op.input);
+
+    const { cancel, promise } = streamingJsonHttpRequester(
+      {
+        ...requesterOpts,
+        textDecoder,
+        path,
+        inputs,
+        headers() {
+          if (!requesterOpts.opts.headers) {
+            return {};
+          }
+          if (typeof requesterOpts.opts.headers === 'function') {
+            return requesterOpts.opts.headers({
+              opList: batchOps as NonEmptyArray<Operation>,
+            });
+          }
+          return requesterOpts.opts.headers;
+        },
+      },
+      (index, res) => unitResolver(index, res),
+    );
+
+    return {
+      /**
+       * return an empty array because the batchLoader expects an array of results
+       * but we've already called the `unitResolver` for each of them, there's
+       * nothing left to do here.
+       */
+      promise: promise.then(() => []),
+      cancel,
+    };
+  };
+};
+
+export const unstable_httpBatchStreamLink =
+  createHTTPBatchLink(streamRequester);

package/src/links/index.ts

@@ -1,6 +1,9 @@
 export * from './types';
 
 export * from './httpBatchLink';
+export * from './httpBatchStreamLink';
+export * from './HTTPBatchLinkOptions';
+export * from './HTTPBatchStreamLinkOptions';
 export * from './httpLink';
 export * from './loggerLink';
 export * from './splitLink';

package/src/links/internals/createHTTPBatchLink.ts

@@ -0,0 +1,115 @@
+import { AnyRouter, ProcedureType } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import { dataLoader } from '../../internals/dataLoader';
+import { transformResult } from '../../shared/transformResult';
+import { TRPCClientError } from '../../TRPCClientError';
+import { HTTPBatchLinkOptions } from '../HTTPBatchLinkOptions';
+import { CancelFn, Operation, TRPCClientRuntime, TRPCLink } from '../types';
+import {
+  getUrl,
+  HTTPResult,
+  ResolvedHTTPLinkOptions,
+  resolveHTTPLinkOptions,
+} from './httpUtils';
+
+/**
+ * @internal
+ */
+export type RequesterFn<TOptions extends HTTPBatchLinkOptions> = (
+  requesterOpts: ResolvedHTTPLinkOptions & {
+    runtime: TRPCClientRuntime;
+    type: ProcedureType;
+    opts: TOptions;
+  },
+) => (
+  batchOps: Operation[],
+  unitResolver: (index: number, value: NonNullable<HTTPResult>) => void,
+) => {
+  promise: Promise<HTTPResult[]>;
+  cancel: CancelFn;
+};
+
+/**
+ * @internal
+ */
+export function createHTTPBatchLink<TOptions extends HTTPBatchLinkOptions>(
+  requester: RequesterFn<TOptions>,
+) {
+  return function httpBatchLink<TRouter extends AnyRouter>(
+    opts: TOptions,
+  ): TRPCLink<TRouter> {
+    const resolvedOpts = resolveHTTPLinkOptions(opts);
+    const maxURLLength = opts.maxURLLength || Infinity;
+
+    // initialized config
+    return (runtime) => {
+      const batchLoader = (type: ProcedureType) => {
+        const validate = (batchOps: Operation[]) => {
+          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 = getUrl({
+            ...resolvedOpts,
+            runtime,
+            type,
+            path,
+            inputs,
+          });
+
+          return url.length <= maxURLLength;
+        };
+
+        const fetch = requester({
+          ...resolvedOpts,
+          runtime,
+          type,
+          opts,
+        });
+
+        return { validate, fetch };
+      };
+
+      const query = dataLoader<Operation, HTTPResult>(batchLoader('query'));
+      const mutation = dataLoader<Operation, HTTPResult>(
+        batchLoader('mutation'),
+      );
+      const subscription = dataLoader<Operation, HTTPResult>(
+        batchLoader('subscription'),
+      );
+
+      const loaders = { query, subscription, mutation };
+      return ({ op }) => {
+        return observable((observer) => {
+          const loader = loaders[op.type];
+          const { promise, cancel } = loader.load(op);
+
+          promise
+            .then((res) => {
+              const transformed = transformResult(res.json, runtime);
+
+              if (!transformed.ok) {
+                observer.error(
+                  TRPCClientError.from(transformed.error, {
+                    meta: res.meta,
+                  }),
+                );
+                return;
+              }
+              observer.next({
+                context: res.meta,
+                result: transformed.result,
+              });
+              observer.complete();
+            })
+            .catch((err) => observer.error(TRPCClientError.from(err)));
+
+          return () => cancel();
+        });
+      };
+    };
+  };
+}

package/src/links/internals/getTextDecoder.ts

@@ -0,0 +1,19 @@
+import { TextDecoderEsque } from './streamingUtils';
+
+export function getTextDecoder(
+  customTextDecoder?: TextDecoderEsque,
+): TextDecoderEsque {
+  if (customTextDecoder) {
+    return customTextDecoder;
+  }
+
+  if (typeof window !== 'undefined' && window.TextDecoder) {
+    return new window.TextDecoder();
+  }
+
+  if (typeof globalThis !== 'undefined' && globalThis.TextDecoder) {
+    return new globalThis.TextDecoder();
+  }
+
+  throw new Error('No TextDecoder implementation found');
+}

package/src/links/internals/httpUtils.ts

@@ -4,10 +4,12 @@ import { getFetch } from '../../getFetch';
 import { getAbortController } from '../../internals/getAbortController';
 import {
   AbortControllerEsque,
+  AbortControllerInstanceEsque,
   FetchEsque,
   RequestInitEsque,
   ResponseEsque,
 } from '../../internals/types';
+import { TextDecoderEsque } from '../internals/streamingUtils';
 import { HTTPHeaders, PromiseAndCancel, TRPCClientRuntime } from '../types';
 
 /**
@@ -87,6 +89,7 @@ export type GetBody = (
 ) => RequestInitEsque['body'];
 
 export type ContentOptions = {
+  batchModeHeader?: 'stream';
   contentTypeHeader?: string;
   getUrl: GetUrl;
   getBody: GetBody;
@@ -136,38 +139,46 @@ export const jsonHttpRequester: Requester = (opts) => {
 export type HTTPRequestOptions = HTTPBaseRequestOptions &
   ContentOptions & {
     headers: () => HTTPHeaders | Promise<HTTPHeaders>;
+    TextDecoder?: TextDecoderEsque;
   };
 
+export async function fetchHTTPResponse(
+  opts: HTTPRequestOptions,
+  ac?: AbortControllerInstanceEsque | null,
+) {
+  const url = opts.getUrl(opts);
+  const body = opts.getBody(opts);
+  const { type } = opts;
+  const headers = await opts.headers();
+  /* istanbul ignore if -- @preserve */
+  if (type === 'subscription') {
+    throw new Error('Subscriptions should use wsLink');
+  }
+
+  return opts.fetch(url, {
+    method: METHOD[type],
+    signal: ac?.signal,
+    body: body,
+    headers: {
+      ...(opts.contentTypeHeader
+        ? { 'content-type': opts.contentTypeHeader }
+        : {}),
+      ...(opts.batchModeHeader
+        ? { 'trpc-batch-mode': opts.batchModeHeader }
+        : {}),
+      ...headers,
+    },
+  });
+}
+
 export function httpRequest(
   opts: HTTPRequestOptions,
 ): PromiseAndCancel<HTTPResult> {
-  const { type } = opts;
   const ac = opts.AbortController ? new opts.AbortController() : null;
+  const meta = {} as HTTPResult['meta'];
 
   const promise = new Promise<HTTPResult>((resolve, reject) => {
-    const url = opts.getUrl(opts);
-    const body = opts.getBody(opts);
-
-    const meta = {} as HTTPResult['meta'];
-    Promise.resolve(opts.headers())
-      .then((headers) => {
-        /* istanbul ignore if -- @preserve */
-        if (type === 'subscription') {
-          throw new Error('Subscriptions should use wsLink');
-        }
-
-        return opts.fetch(url, {
-          method: METHOD[type],
-          signal: ac?.signal,
-          body: body,
-          headers: {
-            ...(opts.contentTypeHeader
-              ? { 'content-type': opts.contentTypeHeader }
-              : {}),
-            ...headers,
-          },
-        });
-      })
+    fetchHTTPResponse(opts, ac)
       .then((_res) => {
         meta.response = _res;
         return _res.json();

package/src/links/internals/parseJSONStream.ts

@@ -0,0 +1,168 @@
+// Stream parsing adapted from https://www.loginradius.com/blog/engineering/guest-post/http-streaming-with-nodejs-and-fetch-api/
+
+import { TRPCResponse } from '@trpc/server/rpc';
+import { HTTPHeaders } from '../types';
+import {
+  fetchHTTPResponse,
+  getBody,
+  getUrl,
+  HTTPBaseRequestOptions,
+  HTTPResult,
+} from './httpUtils';
+import { TextDecoderEsque } from './streamingUtils';
+
+/**
+ * @internal
+ * @description Take a stream of bytes and call `onLine` with
+ * a JSON object for each line in the stream. Expected stream
+ * format is:
+ * ```json
+ * {"1": {...}
+ * ,"0": {...}
+ * }
+ * ```
+ */
+export async function parseJSONStream<TReturn>(opts: {
+  /**
+   * As given by `(await fetch(url)).body`
+   */
+  readableStream: ReadableStream<Uint8Array> | NodeJS.ReadableStream;
+  /**
+   * Called for each line of the stream
+   */
+  onSingle: (index: number, res: TReturn) => void;
+  /**
+   * Transform text into useable data object (defaults to JSON.parse)
+   */
+  parse?: (text: string) => TReturn;
+  signal?: AbortSignal;
+  textDecoder: TextDecoderEsque;
+}): Promise<void> {
+  const parse = opts.parse ?? JSON.parse;
+
+  const onLine = (line: string) => {
+    if (opts.signal?.aborted) return;
+    if (!line || line === '}') {
+      return;
+    }
+    /**
+     * At this point, `line` can be one of two things:
+     * - The first line of the stream `{"2":{...}`
+     * - A line in the middle of the stream `,"2":{...}`
+     */
+    const indexOfColon = line.indexOf(':');
+    const indexAsStr = line.substring(2, indexOfColon - 1);
+    const text = line.substring(indexOfColon + 1);
+
+    opts.onSingle(Number(indexAsStr), parse(text));
+  };
+
+  await readLines(opts.readableStream, onLine, opts.textDecoder);
+}
+
+/**
+ * Handle transforming a stream of bytes into lines of text.
+ * To avoid using AsyncIterators / AsyncGenerators,
+ * we use a callback for each line.
+ *
+ * @param readableStream can be a NodeJS stream or a WebAPI stream
+ * @param onLine will be called for every line ('\n' delimited) in the stream
+ */
+async function readLines(
+  readableStream: ReadableStream<Uint8Array> | NodeJS.ReadableStream,
+  onLine: (line: string) => void,
+  textDecoder: TextDecoderEsque,
+) {
+  let partOfLine = '';
+
+  const onChunk = (chunk: Uint8Array) => {
+    const chunkText = textDecoder.decode(chunk);
+    const chunkLines = chunkText.split('\n');
+    if (chunkLines.length === 1) {
+      partOfLine += chunkLines[0];
+    } else if (chunkLines.length > 1) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- length checked on line above
+      onLine(partOfLine + chunkLines[0]!);
+      for (let i = 1; i < chunkLines.length - 1; i++) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- length checked on line above
+        onLine(chunkLines[i]!);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- length doesn't change, so is necessarily > 1
+      partOfLine = chunkLines[chunkLines.length - 1]!;
+    }
+  };
+
+  // we handle 2 different types of streams, this if where we figure out which one we have
+  if ('getReader' in readableStream) {
+    await readStandardChunks(readableStream, onChunk);
+  } else {
+    await readNodeChunks(readableStream, onChunk);
+  }
+
+  onLine(partOfLine);
+}
+
+/**
+ * Handle NodeJS stream
+ */
+function readNodeChunks(
+  stream: NodeJS.ReadableStream,
+  onChunk: (chunk: Uint8Array) => void,
+) {
+  return new Promise<void>((resolve) => {
+    stream.on('data', onChunk);
+    stream.on('end', resolve);
+  });
+}
+
+/**
+ * Handle WebAPI stream
+ */
+async function readStandardChunks(
+  stream: ReadableStream<Uint8Array>,
+  onChunk: (chunk: Uint8Array) => void,
+) {
+  const reader = stream.getReader();
+  let readResult = await reader.read();
+  while (!readResult.done) {
+    onChunk(readResult.value);
+    readResult = await reader.read();
+  }
+}
+
+export const streamingJsonHttpRequester = (
+  opts: HTTPBaseRequestOptions & {
+    headers: () => HTTPHeaders | Promise<HTTPHeaders>;
+    textDecoder: TextDecoderEsque;
+  },
+  onSingle: (index: number, res: HTTPResult) => void,
+) => {
+  const ac = opts.AbortController ? new opts.AbortController() : null;
+  const responsePromise = fetchHTTPResponse(
+    {
+      ...opts,
+      contentTypeHeader: 'application/json',
+      batchModeHeader: 'stream',
+      getUrl,
+      getBody,
+    },
+    ac,
+  );
+  const cancel = () => ac?.abort();
+  const promise = responsePromise.then(async (res) => {
+    if (!res.body) throw new Error('Received response without body');
+    const meta: HTTPResult['meta'] = { response: res };
+    return parseJSONStream<HTTPResult>({
+      readableStream: res.body,
+      onSingle,
+      parse: (string) => ({
+        json: JSON.parse(string) as TRPCResponse,
+        meta,
+      }),
+      signal: ac?.signal,
+      textDecoder: opts.textDecoder,
+    });
+  });
+
+  return { cancel, promise };
+};

package/src/links/internals/streamingUtils.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export interface TextDecoderEsque {
+  decode(chunk: Uint8Array): string;
+}