@trpc/client 9.20.1 → 10.0.0-alpha.10

package/src/links/httpBatchLink.ts

@@ -1,23 +1,18 @@
 import { AnyRouter, ProcedureType } from '@trpc/server';
-import { TRPCResponse } from '@trpc/server/rpc';
 import { dataLoader } from '../internals/dataLoader';
-import { httpRequest } from '../internals/httpRequest';
-import { transformRPCResponse } from '../internals/transformRPCResponse';
-import { TRPCAbortError } from '../internals/TRPCAbortError';
-import { TRPCClientError } from '../TRPCClientError';
-import { HTTPLinkOptions, TRPCLink } from './core';
+import { Observable } from 'rxjs';
+import { TRPCLink } from './types';
+import { HTTPLinkOptions, httpRequest, ResponseShape } from './httpUtils';
 
 export interface HttpBatchLinkOptions extends HTTPLinkOptions {
   maxBatchSize?: number;
 }
-
 export function httpBatchLink<TRouter extends AnyRouter>(
   opts: HttpBatchLinkOptions,
 ): TRPCLink<TRouter> {
-  const { url, maxBatchSize } = opts;
+  const { url } = opts;
   // initialized config
   return (runtime) => {
-    // initialized in app
     type Key = { id: number; path: string; input: unknown };
 
     const fetcher = (type: ProcedureType) => (keyInputPairs: Key[]) => {
@@ -33,53 +28,48 @@ export function httpBatchLink<TRouter extends AnyRouter>(
       });
 
       return {
-        promise: promise.then((res: unknown[] | unknown) => {
-          if (!Array.isArray(res)) {
-            return keyInputPairs.map(() => res);
-          }
-          return res;
+        promise: promise.then((res) => {
+          const resJSON = Array.isArray(res.json)
+            ? res.json
+            : keyInputPairs.map(() => res.json);
+
+          const result = resJSON.map((item) => ({
+            meta: res.meta,
+            json: item,
+          }));
+
+          return result;
         }),
         cancel,
       };
     };
-
-    const query = dataLoader<Key, TRPCResponse>(fetcher('query'), {
-      maxBatchSize,
-    });
-
-    const mutation = dataLoader<Key, TRPCResponse>(fetcher('mutation'), {
-      maxBatchSize,
-    });
-
-    const subscription = dataLoader<Key, TRPCResponse>(
+    const query = dataLoader<Key, ResponseShape>(fetcher('query'), opts);
+    const mutation = dataLoader<Key, ResponseShape>(fetcher('mutation'), opts);
+    const subscription = dataLoader<Key, ResponseShape>(
       fetcher('subscription'),
-      { maxBatchSize },
+      opts,
     );
 
     const loaders = { query, subscription, mutation };
+    return ({ op }) => {
+      return new Observable((observer) => {
+        const loader = loaders[op.type];
+        const { promise, cancel } = loader.load(op);
 
-    return ({ op, prev, onDestroy }) => {
-      const loader = loaders[op.type];
-      const { promise, cancel } = loader.load(op);
-      let isDone = false;
-      const prevOnce: typeof prev = (result) => {
-        if (isDone) {
-          return;
-        }
-        isDone = true;
-        prev(result);
-      };
-      onDestroy(() => {
-        prevOnce(TRPCClientError.from(new TRPCAbortError(), { isDone: true }));
-        cancel();
+        promise
+          .then((res) => {
+            observer.next({
+              context: res.meta,
+              data: res.json as any,
+            });
+            observer.complete();
+          })
+          .catch((err) => observer.error(err as any));
+
+        return () => {
+          cancel();
+        };
       });
-      promise
-        .then((envelope) => {
-          prevOnce(transformRPCResponse({ envelope, runtime }));
-        })
-        .catch((cause) => {
-          prevOnce(TRPCClientError.from<TRouter>(cause));
-        });
     };
   };
 }

package/src/links/httpLink.ts

@@ -1,46 +1,35 @@
 import { AnyRouter } from '@trpc/server';
-import { TRPCClientError } from '../TRPCClientError';
-import { transformRPCResponse } from '../internals/transformRPCResponse';
-import { httpRequest } from '../internals/httpRequest';
-import { HTTPLinkOptions, TRPCLink } from './core';
-import { TRPCAbortError } from '../internals/TRPCAbortError';
+import { Observable } from 'rxjs';
+import { TRPCLink } from './types';
+import { HTTPLinkOptions, httpRequest } from './httpUtils';
 
 export function httpLink<TRouter extends AnyRouter>(
   opts: HTTPLinkOptions,
 ): TRPCLink<TRouter> {
   const { url } = opts;
+  return (runtime) =>
+    ({ op }) =>
+      new Observable((observer) => {
+        const { path, input, type } = op;
+        const { promise, cancel } = httpRequest({
+          runtime,
+          path,
+          input,
+          type,
+          url,
+        });
+        promise
+          .then((res) => {
+            observer.next({
+              context: res.meta,
+              data: res.json as any,
+            });
+            observer.complete();
+          })
+          .catch(observer.error);
 
-  // initialized config
-  return (runtime) => {
-    // initialized in app
-    return ({ op, prev, onDestroy }) => {
-      const { path, input, type } = op;
-      const { promise, cancel } = httpRequest({
-        runtime,
-        type,
-        input,
-        url,
-        path,
-      });
-      let isDone = false;
-      const prevOnce: typeof prev = (result) => {
-        if (isDone) {
-          return;
-        }
-        isDone = true;
-        prev(result);
-      };
-      onDestroy(() => {
-        prevOnce(TRPCClientError.from(new TRPCAbortError(), { isDone: true }));
-        cancel();
+        return () => {
+          cancel();
+        };
       });
-      promise
-        .then((envelope) => {
-          prevOnce(transformRPCResponse({ envelope, runtime }));
-        })
-        .catch((cause) => {
-          prevOnce(TRPCClientError.from(cause));
-        });
-    };
-  };
 }

package/src/{internals/httpRequest.ts → links/httpUtils.ts}

@@ -1,6 +1,8 @@
 import { ProcedureType } from '@trpc/server';
-import { TRPCResponse } from '@trpc/server/rpc';
-import { LinkRuntimeOptions, PromiseAndCancel } from '../links/core';
+import { LinkRuntime, PromiseAndCancel } from './types';
+export interface HTTPLinkOptions {
+  url: string;
+}
 
 // https://github.com/trpc/trpc/pull/669
 function arrayToDict(array: unknown[]) {
@@ -11,28 +13,30 @@ function arrayToDict(array: unknown[]) {
   }
   return dict;
 }
+const METHOD = {
+  query: 'GET',
+  mutation: 'POST',
+  subscription: 'PATCH',
+} as const;
 
-export function httpRequest<TResponseShape = TRPCResponse>(
+export interface ResponseShape {
+  json: unknown;
+  meta: {
+    response: Response;
+  };
+}
+export function httpRequest(
   props: {
-    runtime: LinkRuntimeOptions;
+    runtime: LinkRuntime;
     type: ProcedureType;
     path: string;
     url: string;
   } & ({ inputs: unknown[] } | { input: unknown }),
-): PromiseAndCancel<TResponseShape> {
+): PromiseAndCancel<ResponseShape> {
   const { type, runtime: rt, path } = props;
   const ac = rt.AbortController ? new rt.AbortController() : null;
-  const method = {
-    query: 'GET',
-    mutation: 'POST',
-    subscription: 'PATCH',
-  };
-  const input =
-    'input' in props
-      ? rt.transformer.serialize(props.input)
-      : arrayToDict(
-          props.inputs.map((_input) => rt.transformer.serialize(_input)),
-        );
+
+  const input = 'input' in props ? props.input : arrayToDict(props.inputs);
 
   function getUrl() {
     let url = props.url + '/' + path;
@@ -55,13 +59,14 @@ export function httpRequest<TResponseShape = TRPCResponse>(
     return input !== undefined ? JSON.stringify(input) : undefined;
   }
 
-  const promise = new Promise<TResponseShape>((resolve, reject) => {
+  const promise = new Promise<ResponseShape>((resolve, reject) => {
     const url = getUrl();
 
+    const meta = {} as any as ResponseShape['meta'];
     Promise.resolve(rt.headers())
       .then((headers) =>
         rt.fetch(url, {
-          method: method[type],
+          method: METHOD[type],
           signal: ac?.signal,
           body: getBody(),
           headers: {
@@ -70,11 +75,15 @@ export function httpRequest<TResponseShape = TRPCResponse>(
           },
         }),
       )
-      .then((res) => {
-        return res.json();
+      .then((_res) => {
+        meta.response = _res;
+        return _res.json();
       })
       .then((json) => {
-        resolve(json);
+        resolve({
+          json,
+          meta,
+        });
       })
       .catch(reject);
   });

package/src/links/internals/createChain.test.ts

@@ -0,0 +1,132 @@
+import { AnyRouter } from '@trpc/server/src';
+import { createChain } from './createChain';
+import { Observable } from 'rxjs';
+
+describe('chain', () => {
+  test('trivial', () => {
+    const result$ = createChain<AnyRouter, unknown, unknown>({
+      links: [
+        ({ next, op }) => {
+          return new Observable((observer) => {
+            const subscription = next(op).subscribe(observer);
+            return () => {
+              subscription.unsubscribe();
+            };
+          });
+        },
+        ({ op }) => {
+          return new Observable((observer) => {
+            observer.next({
+              context: {},
+              data: {
+                id: null,
+                result: {
+                  type: 'data',
+                  data: {
+                    input: op.input,
+                  },
+                },
+              },
+            });
+            observer.complete();
+          });
+        },
+      ],
+      op: {
+        type: 'query',
+        id: 1,
+        input: 'world',
+        path: 'hello',
+        context: {},
+      },
+    });
+
+    const next = jest.fn();
+
+    result$.subscribe({ next });
+    // console.log(next.mock.calls);
+    expect(next).toHaveBeenCalledTimes(1);
+  });
+  test('multiple responses', () => {
+    const result$ = createChain<AnyRouter, unknown, unknown>({
+      links: [
+        ({ next, op }) => {
+          return new Observable((observer) => {
+            observer.next({
+              context: {},
+              data: {
+                id: null,
+                result: {
+                  type: 'data',
+                  data: 'from cache',
+                },
+              },
+            });
+            const next$ = next(op).subscribe(observer);
+            return () => {
+              next$.unsubscribe();
+            };
+          });
+        },
+        ({ op }) => {
+          return new Observable((observer) => {
+            observer.next({
+              data: {
+                id: null,
+                result: {
+                  type: 'data',
+                  data: {
+                    input: op.input,
+                  },
+                },
+              },
+            });
+            observer.complete();
+          });
+        },
+      ],
+      op: {
+        type: 'query',
+        id: 1,
+        input: 'world',
+        path: 'hello',
+        context: {},
+      },
+    });
+
+    const next = jest.fn();
+
+    result$.subscribe({ next });
+
+    expect(next).toHaveBeenCalledTimes(2);
+    expect(next.mock.calls[0]).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "context": Object {},
+          "data": Object {
+            "id": null,
+            "result": Object {
+              "data": "from cache",
+              "type": "data",
+            },
+          },
+        },
+      ]
+    `);
+    expect(next.mock.calls[1]).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "data": Object {
+            "id": null,
+            "result": Object {
+              "data": Object {
+                "input": "world",
+              },
+              "type": "data",
+            },
+          },
+        },
+      ]
+    `);
+  });
+});

package/src/links/internals/createChain.ts

@@ -0,0 +1,31 @@
+import { AnyRouter } from '@trpc/server';
+import { Observable } from 'rxjs';
+import { Operation, OperationLink, OperationResultObservable } from '../types';
+
+/** @internal */
+export function createChain<
+  TRouter extends AnyRouter,
+  TInput = unknown,
+  TOutput = unknown,
+>(opts: {
+  links: OperationLink<TRouter, TInput, TOutput>[];
+  op: Operation<TInput>;
+}): OperationResultObservable<TRouter, TOutput> {
+  return new Observable((observer) => {
+    function execute(index = 0, op = opts.op) {
+      const next = opts.links[index];
+      const next$ = next({
+        op,
+        next(nextOp) {
+          const nextObserver = execute(index + 1, nextOp);
+
+          return nextObserver;
+        },
+      });
+      return next$;
+    }
+
+    const obs$ = execute();
+    return obs$.subscribe(observer);
+  });
+}

package/src/links/internals/transformOperationResult.ts

@@ -0,0 +1,25 @@
+import { AnyRouter } from '@trpc/server';
+import { TRPCClientError } from '../../TRPCClientError';
+import { OperationResult } from '../types';
+
+/** @internal */
+export function transformOperationResult<TRouter extends AnyRouter, TOutput>(
+  result: OperationResult<TRouter, TOutput>,
+) {
+  const { context } = result;
+
+  if ('error' in result.data) {
+    const error = TRPCClientError.from<TRouter>(result.data);
+    return {
+      ok: false,
+      error,
+      context,
+    } as const;
+  }
+  const data = (result.data.result as any).data as TOutput;
+  return {
+    ok: true,
+    data,
+    context,
+  } as const;
+}

package/src/links/loggerLink.ts

@@ -1,5 +1,7 @@
 import { AnyRouter } from '@trpc/server';
-import { Operation, OperationResponse, TRPCLink } from './core';
+import { TRPCClientError } from '..';
+import { Observable, tap } from 'rxjs';
+import { Operation, OperationResult, TRPCLink } from './types';
 
 type ConsoleEsque = {
   log: (...args: any[]) => void;
@@ -12,7 +14,7 @@ type EnableFnOptions<TRouter extends AnyRouter> =
     })
   | {
       direction: 'down';
-      result: OperationResponse<TRouter>;
+      result: OperationResult<TRouter, unknown> | TRPCClientError<TRouter>;
     };
 type EnabledFn<TRouter extends AnyRouter> = (
   opts: EnableFnOptions<TRouter>,
@@ -31,7 +33,7 @@ type LogFnOptions<TRouter extends AnyRouter> = Operation &
          * Request result
          */
         direction: 'down';
-        result: OperationResponse<TRouter>;
+        result: OperationResult<TRouter, unknown> | TRPCClientError<TRouter>;
         elapsedMs: number;
       }
   );
@@ -78,7 +80,7 @@ const defaultLogger =
       `${css}; font-weight: normal;`,
     ];
     if (props.direction === 'up') {
-      args.push({ input, context });
+      args.push({ input, context: context });
     } else {
       args.push({
         input,
@@ -90,7 +92,7 @@ const defaultLogger =
     const fn: 'error' | 'log' =
       props.direction === 'down' &&
       props.result &&
-      props.result instanceof Error
+      (props.result instanceof Error || 'error' in props.result.data)
         ? 'error'
         : 'log';
 
@@ -102,27 +104,42 @@ export function loggerLink<TRouter extends AnyRouter = AnyRouter>(
   const { enabled = () => true } = opts;
 
   const { logger = defaultLogger(opts.console) } = opts;
-  return () => {
-    return ({ op, next, prev }) => {
-      // ->
-      enabled({ ...op, direction: 'up' }) &&
-        logger({
-          ...op,
-          direction: 'up',
-        });
-      const requestStartTime = Date.now();
-      next(op, (result) => {
-        const elapsedMs = Date.now() - requestStartTime;
 
-        enabled({ ...op, direction: 'down', result }) &&
+  return () => {
+    return ({ op, next }) => {
+      return new Observable((observer) => {
+        // ->
+        enabled({ ...op, direction: 'up' }) &&
           logger({
             ...op,
-            direction: 'down',
-            elapsedMs,
-            result,
+            direction: 'up',
           });
-        // <-
-        prev(result);
+        const requestStartTime = Date.now();
+        function logResult(
+          result: OperationResult<TRouter, unknown> | TRPCClientError<TRouter>,
+        ) {
+          const elapsedMs = Date.now() - requestStartTime;
+
+          enabled({ ...op, direction: 'down', result }) &&
+            logger({
+              ...op,
+              direction: 'down',
+              elapsedMs,
+              result,
+            });
+        }
+        return next(op)
+          .pipe(
+            tap({
+              next(result) {
+                logResult(result);
+              },
+              error(result) {
+                logResult(result);
+              },
+            }),
+          )
+          .subscribe(observer);
       });
     };
   };

package/src/links/retryLink.ts

@@ -1,5 +1,6 @@
 import { AnyRouter } from '@trpc/server';
-import { TRPCLink } from './core';
+import { Observable, Unsubscribable } from 'rxjs';
+import { TRPCLink } from './types';
 
 export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {
   attempts: number;
@@ -7,20 +8,49 @@ export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {
   // initialized config
   return () => {
     // initialized in app
-    return ({ op, next, prev }) => {
+    return ({ op, next }) => {
       // initialized for request
-      let attempts = 0;
-      const fn = () => {
-        attempts++;
-        next(op, (result) => {
-          if (result instanceof Error) {
-            attempts < opts.attempts ? fn() : prev(result);
-          } else {
-            prev(result);
-          }
-        });
-      };
-      fn();
+      return new Observable((observer) => {
+        let next$: Unsubscribable | null = null;
+        let attempts = 0;
+        let isDone = false;
+        function attempt() {
+          attempts++;
+          next$?.unsubscribe();
+          next$ = next(op).subscribe({
+            error(error) {
+              if (attempts >= opts.attempts) {
+                observer.error(error);
+                return;
+              }
+              attempt();
+            },
+            next(result) {
+              if ('result' in result.data) {
+                isDone = true;
+                observer.next(result);
+                return;
+              }
+              if (attempts >= opts.attempts) {
+                isDone = true;
+                observer.next(result);
+                return;
+              }
+              attempt();
+            },
+            complete() {
+              if (isDone) {
+                observer.complete();
+              }
+            },
+          });
+        }
+        attempt();
+        return () => {
+          isDone = true;
+          next$?.unsubscribe();
+        };
+      });
     };
   };
 }