@trpc/client 11.0.0-rc.370 → 11.0.0-rc.374

package/src/links/httpBatchLink.ts

@@ -1,51 +1,137 @@
-import type { AnyRootTypes } from '@trpc/server/unstable-core-do-not-import';
+import type { AnyRouter, ProcedureType } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import { transformResult } from '@trpc/server/unstable-core-do-not-import';
+import type { BatchLoader } from '../internals/dataLoader';
+import { dataLoader } from '../internals/dataLoader';
 import type { NonEmptyArray } from '../internals/types';
+import { TRPCClientError } from '../TRPCClientError';
 import type { HTTPBatchLinkOptions } from './HTTPBatchLinkOptions';
-import type { RequesterFn } from './internals/createHTTPBatchLink';
-import { createHTTPBatchLink } from './internals/createHTTPBatchLink';
-import { jsonHttpRequester } from './internals/httpUtils';
-import type { Operation } from './types';
-
-const batchRequester: RequesterFn<HTTPBatchLinkOptions<AnyRootTypes>> = (
-  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 {};
-        }
-        if (typeof requesterOpts.opts.headers === 'function') {
-          return requesterOpts.opts.headers({
-            opList: batchOps as NonEmptyArray<Operation>,
+import type { HTTPResult } from './internals/httpUtils';
+import {
+  getUrl,
+  jsonHttpRequester,
+  resolveHTTPLinkOptions,
+} from './internals/httpUtils';
+import type { Operation, TRPCLink } from './types';
+
+/**
+ * @see https://trpc.io/docs/client/links/httpBatchLink
+ */
+export function httpBatchLink<TRouter extends AnyRouter>(
+  opts: HTTPBatchLinkOptions<TRouter['_def']['_config']['$types']>,
+): TRPCLink<TRouter> {
+  const resolvedOpts = resolveHTTPLinkOptions(opts);
+  const maxURLLength = opts.maxURLLength ?? Infinity;
+
+  return () => {
+    const batchLoader = (
+      type: ProcedureType,
+    ): BatchLoader<Operation, HTTPResult> => {
+      return {
+        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 = getUrl({
+            ...resolvedOpts,
+            type,
+            path,
+            inputs,
+          });
+
+          return url.length <= maxURLLength;
+        },
+        fetch(batchOps) {
+          const path = batchOps.map((op) => op.path).join(',');
+          const inputs = batchOps.map((op) => op.input);
+
+          const requester = jsonHttpRequester({
+            ...resolvedOpts,
+            path,
+            inputs,
+            type,
+            headers() {
+              if (!opts.headers) {
+                return {};
+              }
+              if (typeof opts.headers === 'function') {
+                return opts.headers({
+                  opList: batchOps as NonEmptyArray<Operation>,
+                });
+              }
+              return opts.headers;
+            },
+          });
+          return {
+            cancel: requester.cancel,
+            promise: requester.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;
+            }),
+          };
+        },
+      };
+    };
+
+    const query = dataLoader(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);
+
+        let _res = undefined as HTTPResult | undefined;
+        promise
+          .then((res) => {
+            _res = res;
+            const transformed = transformResult(
+              res.json,
+              resolvedOpts.transformer.output,
+            );
+
+            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, {
+                meta: _res?.meta,
+              }),
+            );
           });
-        }
-        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,
+
+        return () => {
+          cancel();
+        };
+      });
     };
   };
-};
-
-export const httpBatchLink = createHTTPBatchLink(batchRequester);
+}

package/src/links/httpBatchStreamLink.ts

@@ -1,65 +1,190 @@
+import type { AnyRouter, ProcedureType } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import type { TRPCResponse } from '@trpc/server/rpc';
 import type { AnyRootTypes } from '@trpc/server/unstable-core-do-not-import';
+import { jsonlStreamConsumer } from '@trpc/server/unstable-core-do-not-import';
+import type { BatchLoader } from '../internals/dataLoader';
+import { dataLoader } from '../internals/dataLoader';
 import type { NonEmptyArray } from '../internals/types';
+import { TRPCClientError } from '../TRPCClientError';
 import type { HTTPBatchLinkOptions } from './HTTPBatchLinkOptions';
-import type { RequesterFn } from './internals/createHTTPBatchLink';
-import { createHTTPBatchLink } from './internals/createHTTPBatchLink';
-import { getTextDecoder } from './internals/getTextDecoder';
-import { streamingJsonHttpRequester } from './internals/parseJSONStream';
-import type { TextDecoderEsque } from './internals/streamingUtils';
-import type { Operation } from './types';
+import type { HTTPResult } from './internals/httpUtils';
+import {
+  fetchHTTPResponse,
+  getBody,
+  getUrl,
+  resolveHTTPLinkOptions,
+} from './internals/httpUtils';
+import type { Operation, TRPCLink } from './types';
 
 export type HTTPBatchStreamLinkOptions<TRoot extends AnyRootTypes> =
   HTTPBatchLinkOptions<TRoot> & {
     /**
-     * Will default to the webAPI `TextDecoder`,
-     * but you can use this option if your client
-     * runtime doesn't provide it.
+     * Maximum number of calls in a single batch request
+     * @default Infinity
      */
-    textDecoder?: TextDecoderEsque;
+    maxItems?: number;
   };
 
-const streamRequester: RequesterFn<HTTPBatchStreamLinkOptions<AnyRootTypes>> = (
-  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);
+/**
+ * @see https://trpc.io/docs/client/links/httpBatchStreamLink
+ */
+export function unstable_httpBatchStreamLink<TRouter extends AnyRouter>(
+  opts: HTTPBatchStreamLinkOptions<TRouter['_def']['_config']['$types']>,
+): TRPCLink<TRouter> {
+  const resolvedOpts = resolveHTTPLinkOptions(opts);
+  const maxURLLength = opts.maxURLLength ?? Infinity;
+  const maxItems = opts.maxItems ?? Infinity;
 
-    const { cancel, promise } = streamingJsonHttpRequester(
-      {
-        ...requesterOpts,
-        textDecoder,
-        path,
-        inputs,
-        headers() {
-          if (!requesterOpts.opts.headers) {
-            return {};
+  return () => {
+    const batchLoader = (
+      type: ProcedureType,
+    ): BatchLoader<Operation, HTTPResult> => {
+      return {
+        validate(batchOps) {
+          if (maxURLLength === Infinity && maxItems === Infinity) {
+            // escape hatch for quick calcs
+            return true;
           }
-          if (typeof requesterOpts.opts.headers === 'function') {
-            return requesterOpts.opts.headers({
-              opList: batchOps as NonEmptyArray<Operation>,
-            });
+          if (batchOps.length > maxItems) {
+            return false;
           }
-          return requesterOpts.opts.headers;
+          const path = batchOps.map((op) => op.path).join(',');
+          const inputs = batchOps.map((op) => op.input);
+
+          const url = getUrl({
+            ...resolvedOpts,
+            type,
+            path,
+            inputs,
+          });
+
+          return url.length <= maxURLLength;
+        },
+        fetch(batchOps) {
+          const path = batchOps.map((op) => op.path).join(',');
+          const inputs = batchOps.map((op) => op.input);
+
+          const ac = resolvedOpts.AbortController
+            ? new resolvedOpts.AbortController()
+            : null;
+          const responsePromise = fetchHTTPResponse(
+            {
+              ...resolvedOpts,
+              type,
+              contentTypeHeader: 'application/json',
+              trpcAcceptHeader: 'application/jsonl',
+              getUrl,
+              getBody,
+              inputs,
+              path,
+              headers() {
+                if (!opts.headers) {
+                  return {};
+                }
+                if (typeof opts.headers === 'function') {
+                  return opts.headers({
+                    opList: batchOps as NonEmptyArray<Operation>,
+                  });
+                }
+                return opts.headers;
+              },
+            },
+            ac,
+          );
+
+          return {
+            promise: responsePromise.then(async (res) => {
+              if (!res.body) {
+                throw new Error('Received response without body');
+              }
+              const [head] = await jsonlStreamConsumer<
+                Record<string, Promise<any>>
+              >({
+                from: res.body,
+                deserialize: resolvedOpts.transformer.output.deserialize,
+                // onError: console.error,
+              });
+
+              const promises = Object.keys(batchOps).map(
+                async (key): Promise<HTTPResult> => {
+                  let json: TRPCResponse = await head[key];
+
+                  if ('result' in json) {
+                    /**
+                     * Not very pretty, but we need to unwrap nested data as promises
+                     * Our stream producer will only resolve top-level async values or async values that are directly nested in another async value
+                     */
+                    const result = await Promise.resolve(json.result);
+                    json = {
+                      result: {
+                        data: await Promise.resolve(result.data),
+                      },
+                    };
+                  }
+
+                  return {
+                    json,
+                    meta: {
+                      response: res,
+                    },
+                  };
+                },
+              );
+              return promises;
+            }),
+            cancel() {
+              ac?.abort();
+            },
+          };
         },
-      },
-      (index, res) => {
-        unitResolver(index, res);
-      },
-    );
+      };
+    };
+
+    const query = dataLoader(batchLoader('query'));
+    const mutation = dataLoader(batchLoader('mutation'));
+    const subscription = dataLoader(batchLoader('subscription'));
+
+    const loaders = { query, subscription, mutation };
+    return ({ op }) => {
+      return observable((observer) => {
+        const loader = loaders[op.type];
+        const { promise, cancel } = loader.load(op);
 
-    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,
+        let _res = undefined as HTTPResult | undefined;
+        promise
+          .then((res) => {
+            _res = res;
+            if ('error' in res.json) {
+              observer.error(
+                TRPCClientError.from(res.json, {
+                  meta: res.meta,
+                }),
+              );
+              return;
+            } else if ('result' in res.json) {
+              observer.next({
+                context: res.meta,
+                result: res.json.result,
+              });
+              observer.complete();
+              return;
+            }
+
+            observer.complete();
+          })
+          .catch((err) => {
+            observer.error(
+              TRPCClientError.from(err, {
+                meta: _res?.meta,
+              }),
+            );
+          });
+
+        return () => {
+          cancel();
+        };
+      });
     };
   };
-};
-
-export const unstable_httpBatchStreamLink =
-  createHTTPBatchLink(streamRequester);
+}

package/src/links/httpLink.ts

@@ -11,10 +11,19 @@ import type {
   Requester,
 } from './internals/httpUtils';
 import {
+  getInput,
+  getUrl,
+  httpRequest,
+  jsonHttpRequester,
   resolveHTTPLinkOptions,
-  universalRequester,
 } from './internals/httpUtils';
-import type { HTTPHeaders, Operation, TRPCLink } from './types';
+import {
+  isFormData,
+  isOctetType,
+  type HTTPHeaders,
+  type Operation,
+  type TRPCLink,
+} from './types';
 
 export type HTTPLinkOptions<TRoot extends AnyRootTypes> =
   HTTPLinkBaseOptions<TRoot> & {
@@ -27,68 +36,99 @@ export type HTTPLinkOptions<TRoot extends AnyRootTypes> =
       | ((opts: { op: Operation }) => HTTPHeaders | Promise<HTTPHeaders>);
   };
 
-export function httpLinkFactory(factoryOpts: { requester: Requester }) {
-  return <TRouter extends AnyRouter>(
-    opts: HTTPLinkOptions<TRouter['_def']['_config']['$types']>,
-  ): TRPCLink<TRouter> => {
-    const resolvedOpts = resolveHTTPLinkOptions(opts);
+const universalRequester: Requester = (opts) => {
+  const input = getInput(opts);
 
-    return () =>
-      ({ op }) =>
-        observable((observer) => {
-          const { path, input, type } = op;
-          const { promise, cancel } = factoryOpts.requester({
-            ...resolvedOpts,
-            type,
-            path,
-            input,
-            headers() {
-              if (!opts.headers) {
-                return {};
-              }
-              if (typeof opts.headers === 'function') {
-                return opts.headers({
-                  op,
-                });
-              }
-              return opts.headers;
-            },
-          });
-          let meta: HTTPResult['meta'] | undefined = undefined;
-          promise
-            .then((res) => {
-              meta = res.meta;
-              const transformed = transformResult(
-                res.json,
-                resolvedOpts.transformer.output,
-              );
+  if (isFormData(input)) {
+    if (opts.type !== 'mutation' && opts.methodOverride !== 'POST') {
+      throw new Error('FormData is only supported for mutations');
+    }
+
+    return httpRequest({
+      ...opts,
+      // The browser will set this automatically and include the boundary= in it
+      contentTypeHeader: undefined,
+      getUrl,
+      getBody: () => input,
+    });
+  }
+
+  if (isOctetType(input)) {
+    if (opts.type !== 'mutation' && opts.methodOverride !== 'POST') {
+      throw new Error('Octet type input is only supported for mutations');
+    }
+
+    return httpRequest({
+      ...opts,
+      contentTypeHeader: 'application/octet-stream',
+      getUrl,
+      getBody: () => input,
+    });
+  }
+
+  return jsonHttpRequester(opts);
+};
+
+/**
+ * @link https://trpc.io/docs/client/links/httpLink
+ */
+export function httpLink<TRouter extends AnyRouter = AnyRouter>(
+  opts: HTTPLinkOptions<TRouter['_def']['_config']['$types']>,
+): TRPCLink<TRouter> {
+  const resolvedOpts = resolveHTTPLinkOptions(opts);
+  return () => {
+    return ({ op }) => {
+      return observable((observer) => {
+        const { path, input, type } = op;
 
-              if (!transformed.ok) {
-                observer.error(
-                  TRPCClientError.from(transformed.error, {
-                    meta,
-                  }),
-                );
-                return;
-              }
-              observer.next({
-                context: res.meta,
-                result: transformed.result,
+        const request = universalRequester({
+          ...resolvedOpts,
+          type,
+          path,
+          input,
+          headers() {
+            if (!opts.headers) {
+              return {};
+            }
+            if (typeof opts.headers === 'function') {
+              return opts.headers({
+                op,
               });
-              observer.complete();
-            })
-            .catch((cause) => {
-              observer.error(TRPCClientError.from(cause, { meta }));
+            }
+            return opts.headers;
+          },
+        });
+        let meta: HTTPResult['meta'] | undefined = undefined;
+        request.promise
+          .then((res) => {
+            meta = res.meta;
+            const transformed = transformResult(
+              res.json,
+              resolvedOpts.transformer.output,
+            );
+
+            if (!transformed.ok) {
+              observer.error(
+                TRPCClientError.from(transformed.error, {
+                  meta,
+                }),
+              );
+              return;
+            }
+            observer.next({
+              context: res.meta,
+              result: transformed.result,
             });
+            observer.complete();
+          })
+          .catch((cause) => {
+            observer.error(TRPCClientError.from(cause, { meta }));
+          });
 
-          return () => {
-            cancel();
-          };
-        });
+        return () => {
+          request.cancel();
+        };
+      });
+    };
   };
 }
-
-/**
- * @link https://trpc.io/docs/v11/client/links/httpLink
- */
-export const httpLink = httpLinkFactory({ requester: universalRequester });

package/src/links/internals/httpUtils.ts

@@ -16,9 +16,7 @@ import type {
 import { TRPCClientError } from '../../TRPCClientError';
 import type { TransformerOptions } from '../../unstable-internals';
 import { getTransformer } from '../../unstable-internals';
-import type { TextDecoderEsque } from '../internals/streamingUtils';
 import type { HTTPHeaders, PromiseAndCancel } from '../types';
-import { isFormData, isOctetType } from './contentTypes';
 
 /**
  * @internal
@@ -90,7 +88,7 @@ type GetInputOptions = {
   transformer: CombinedDataTransformer;
 } & ({ input: unknown } | { inputs: unknown[] });
 
-function getInput(opts: GetInputOptions) {
+export function getInput(opts: GetInputOptions) {
   return 'input' in opts
     ? opts.transformer.input.serialize(opts.input)
     : arrayToDict(
@@ -108,7 +106,7 @@ type GetUrl = (opts: HTTPBaseRequestOptions) => string;
 type GetBody = (opts: HTTPBaseRequestOptions) => RequestInitEsque['body'];
 
 export type ContentOptions = {
-  batchModeHeader?: 'stream';
+  trpcAcceptHeader?: 'application/jsonl';
   contentTypeHeader?: string;
   getUrl: GetUrl;
   getBody: GetBody;
@@ -155,43 +153,9 @@ export const jsonHttpRequester: Requester = (opts) => {
   });
 };
 
-export const universalRequester: Requester = (opts) => {
-  const input = getInput(opts);
-
-  if (isFormData(input)) {
-    if (opts.type !== 'mutation' && opts.methodOverride !== 'POST') {
-      throw new Error('FormData is only supported for mutations');
-    }
-
-    return httpRequest({
-      ...opts,
-      // The browser will set this automatically and include the boundary= in it
-      contentTypeHeader: undefined,
-      getUrl,
-      getBody: () => input,
-    });
-  }
-
-  if (isOctetType(input)) {
-    if (opts.type !== 'mutation' && opts.methodOverride !== 'POST') {
-      throw new Error('Octet type input is only supported for mutations');
-    }
-
-    return httpRequest({
-      ...opts,
-      contentTypeHeader: 'application/octet-stream',
-      getUrl,
-      getBody: () => input,
-    });
-  }
-
-  return jsonHttpRequester(opts);
-};
-
 export type HTTPRequestOptions = ContentOptions &
   HTTPBaseRequestOptions & {
     headers: () => HTTPHeaders | Promise<HTTPHeaders>;
-    TextDecoder?: TextDecoderEsque;
   };
 
 export async function fetchHTTPResponse(
@@ -216,9 +180,9 @@ export async function fetchHTTPResponse(
     ...(opts.contentTypeHeader
       ? { 'content-type': opts.contentTypeHeader }
       : {}),
-    ...(opts.batchModeHeader
-      ? { 'trpc-batch-mode': opts.batchModeHeader }
-      : {}),
+    ...(opts.trpcAcceptHeader
+      ? { 'trpc-accept': opts.trpcAcceptHeader }
+      : undefined),
     ...resolvedHeaders,
   };