@trpc/client 9.17.0 → 10.0.0-alpha.0

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 '../../rx/observable';
+
+describe('chain', () => {
+  test('trivial', () => {
+    const result$ = createChain<AnyRouter, unknown, unknown>({
+      links: [
+        ({ next, op }) => {
+          return observable((observer) => {
+            const next$ = next(op).subscribe(observer);
+            return () => {
+              next$.unsubscribe();
+            };
+          });
+        },
+        ({ op }) => {
+          return 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 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 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 '../../rx/observable';
+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 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,8 @@
 import { AnyRouter } from '@trpc/server';
-import { Operation, OperationResponse, TRPCLink } from './core';
+import { TRPCClientError } from '..';
+import { observable } from '../rx/observable';
+import { tap } from '../rx/operators';
+import { Operation, OperationResult, TRPCLink } from './types';
 
 type ConsoleEsque = {
   log: (...args: any[]) => void;
@@ -12,7 +15,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 +34,7 @@ type LogFnOptions<TRouter extends AnyRouter> = Operation &
          * Request result
          */
         direction: 'down';
-        result: OperationResponse<TRouter>;
+        result: OperationResult<TRouter, unknown> | TRPCClientError<TRouter>;
         elapsedMs: number;
       }
   );
@@ -78,7 +81,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 +93,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 +105,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 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,7 @@
 import { AnyRouter } from '@trpc/server';
-import { TRPCLink } from './core';
+import { observable } from '../rx/observable';
+import { Unsubscribable } from '../rx/types';
+import { TRPCLink } from './types';
 
 export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {
   attempts: number;
@@ -7,20 +9,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 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();
+        };
+      });
     };
   };
 }

package/src/links/splitLink.test.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { AnyRouter } from '../../../server/src';
+import { createChain } from '../links/internals/createChain';
+import { splitLink } from '../links/splitLink';
+import { OperationLink, TRPCLink } from '../links/types';
+import { observable } from '../rx';
+
+test('splitLink', () => {
+  const wsLinkSpy = jest.fn();
+  const wsLink: TRPCLink<any> = () => () =>
+    observable(() => {
+      wsLinkSpy();
+    });
+  const httpLinkSpy = jest.fn();
+  const httpLink: TRPCLink<any> = () => () =>
+    observable(() => {
+      httpLinkSpy();
+    });
+  const links: OperationLink<AnyRouter, any, any>[] = [
+    // "dedupe link"
+    splitLink({
+      condition(op) {
+        return op.type === 'subscription';
+      },
+      true: wsLink,
+      false: [httpLink],
+    })(null as any),
+  ];
+
+  createChain({
+    links,
+    op: {
+      type: 'query',
+      input: null,
+      path: '.',
+      id: 0,
+      context: {},
+    },
+  }).subscribe({});
+  expect(httpLinkSpy).toHaveBeenCalledTimes(1);
+  expect(wsLinkSpy).toHaveBeenCalledTimes(0);
+  jest.resetAllMocks();
+
+  createChain({
+    links,
+    op: {
+      type: 'subscription',
+      input: null,
+      path: '.',
+      id: 0,
+      context: {},
+    },
+  }).subscribe({});
+  expect(httpLinkSpy).toHaveBeenCalledTimes(0);
+  expect(wsLinkSpy).toHaveBeenCalledTimes(1);
+});

package/src/links/splitLink.ts

@@ -1,45 +1,30 @@
 import { AnyRouter } from '@trpc/server';
-import { TRPCLink, Operation } from './core';
+import { observable } from '../rx/observable';
+import { TRPCLink, Operation } from './types';
+import { createChain } from './internals/createChain';
 
-export function splitLink<TRouter extends AnyRouter = AnyRouter>(
-  opts: {
-    condition: (op: Operation) => boolean;
-  } & (
-    | {
-        /**
-         * The link to execute next if the test function returns `true`.
-         */
-        left: TRPCLink<TRouter>;
-        /**
-         * The link to execute next if the test function returns `false`.
-         */
-        right: TRPCLink<TRouter>;
-      }
-    | {
-        /**
-         * The link to execute next if the test function returns `true`.
-         */
-        true: TRPCLink<TRouter>;
-        /**
-         * The link to execute next if the test function returns `false`.
-         */
-        false: TRPCLink<TRouter>;
-      }
-  ),
-): TRPCLink<TRouter> {
+function asArray<T>(value: T | T[]) {
+  return Array.isArray(value) ? value : [value];
+}
+export function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
+  condition: (op: Operation) => boolean;
+  /**
+   * The link to execute next if the test function returns `true`.
+   */
+  true: TRPCLink<TRouter> | TRPCLink<TRouter>[];
+  /**
+   * The link to execute next if the test function returns `false`.
+   */
+  false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
+}): TRPCLink<TRouter> {
   return (rt) => {
-    const links =
-      'left' in opts
-        ? {
-            true: opts.left,
-            false: opts.right,
-          }
-        : opts;
-
-    const yes = links.true(rt);
-    const no = links.false(rt);
+    const yes = asArray(opts.true).map((link) => link(rt));
+    const no = asArray(opts.false).map((link) => link(rt));
     return (props) => {
-      opts.condition(props.op) ? yes(props) : no(props);
+      return observable((observer) => {
+        const links = opts.condition(props.op) ? yes : no;
+        return createChain({ op: props.op, links }).subscribe(observer);
+      });
     };
   };
 }

package/src/links/transformerLink.ts

@@ -0,0 +1,70 @@
+import {
+  AnyRouter,
+  ClientDataTransformerOptions,
+  DataTransformer,
+} from '@trpc/server';
+import { observable } from '../rx/observable';
+import { OperationResult, TRPCLink } from './types';
+
+/**
+ * @internal
+ */
+function transformOperationResult<TResult extends OperationResult<any, any>>(
+  result: TResult,
+  transformer: DataTransformer,
+) {
+  if ('error' in result.data) {
+    return {
+      ...result,
+      data: {
+        ...result.data,
+        error: transformer.deserialize(result.data.error),
+      },
+    };
+  }
+  if (result.data.result.type !== 'data') {
+    return result;
+  }
+  return {
+    ...result,
+    data: {
+      ...result.data,
+      result: {
+        ...result.data.result,
+        data: transformer.deserialize(result.data.result.data),
+      },
+    },
+  };
+}
+export function transformerLink<TRouter extends AnyRouter = AnyRouter>(
+  transformer: ClientDataTransformerOptions,
+): TRPCLink<TRouter> {
+  const _transformer: DataTransformer = transformer
+    ? 'input' in transformer
+      ? {
+          serialize: transformer.input.serialize,
+          deserialize: transformer.output.deserialize,
+        }
+      : transformer
+    : {
+        serialize: (data) => data,
+        deserialize: (data) => data,
+      };
+
+  return () => {
+    return (props) => {
+      const input = _transformer.serialize(props.op.input);
+      return observable((observer) => {
+        const next$ = props.next({ ...props.op, input }).subscribe({
+          next(value) {
+            const transformed = transformOperationResult(value, _transformer);
+            observer.next(transformed);
+          },
+          error: observer.error,
+          complete: observer.complete,
+        });
+        return next$;
+      });
+    };
+  };
+}