@trpc/client 10.0.0-alpha.4 → 10.0.0-alpha.40

package/src/links/dedupeLink.ts

@@ -1,7 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../rx/observable';
-import { share } from '../rx/operators';
-import { Observable } from '../rx/types';
+import { Observable, observable, share } from '@trpc/server/observable';
 import { TRPCLink } from './types';
 
 export function dedupeLink<
@@ -19,16 +17,17 @@ export function dedupeLink<
         return next(op);
       }
       const key = JSON.stringify([op.path, op.input]);
-      if (pending[key]) {
+      const obs$ = pending[key];
+      if (obs$) {
         // console.log('hooking into pending', { op });
-        return observable((observer) => pending[key].subscribe(observer));
+        return observable((observer) => obs$.subscribe(observer));
       }
 
       const shared$ = observable((observer) => {
         function reset() {
           delete pending[key];
         }
-        const next$ = next(op).subscribe({
+        const subscription = next(op).subscribe({
           next(v) {
             observer.next(v);
           },
@@ -43,7 +42,7 @@ export function dedupeLink<
         });
         return () => {
           reset();
-          next$.unsubscribe();
+          subscription.unsubscribe();
         };
       }).pipe(share());
       pending[key] = shared$;

package/src/links/httpBatchLink.ts

@@ -1,47 +1,80 @@
 import { AnyRouter, ProcedureType } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
 import { dataLoader } from '../internals/dataLoader';
-import { observable } from '../rx/observable';
+import {
+  HTTPLinkOptions,
+  ResponseShape,
+  getUrl,
+  httpRequest,
+} from './internals/httpUtils';
 import { TRPCLink } from './types';
-import { HTTPLinkOptions, httpRequest, ResponseShape } from './httpUtils';
+
+export interface HttpBatchLinkOptions extends HTTPLinkOptions {
+  maxURLLength?: number;
+}
 
 export function httpBatchLink<TRouter extends AnyRouter>(
-  opts: HTTPLinkOptions,
+  opts: HttpBatchLinkOptions,
 ): TRPCLink<TRouter> {
-  const { url } = opts;
+  // initialized config
   return (runtime) => {
-    type Key = { id: number; path: string; input: unknown };
-    const fetcher = (type: ProcedureType) => (keyInputPairs: Key[]) => {
-      const path = keyInputPairs.map((op) => op.path).join(',');
-      const inputs = keyInputPairs.map((op) => op.input);
+    type BatchOperation = { id: number; path: string; input: unknown };
 
-      const { promise, cancel } = httpRequest({
-        url,
-        inputs,
-        path,
-        runtime,
-        type,
-      });
+    const maxURLLength = opts.maxURLLength || Infinity;
+
+    const batchLoader = (type: ProcedureType) => {
+      const validate = (batchOps: BatchOperation[]) => {
+        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({ url: opts.url, runtime, type, path, inputs });
+        return url.length <= maxURLLength;
+      };
+
+      const fetch = (batchOps: BatchOperation[]) => {
+        const path = batchOps.map((op) => op.path).join(',');
+        const inputs = batchOps.map((op) => op.input);
 
-      return {
-        promise: promise.then((res) => {
-          const resJSON = Array.isArray(res.json)
-            ? res.json
-            : keyInputPairs.map(() => res.json);
+        const { promise, cancel } = httpRequest({
+          url: opts.url,
+          runtime,
+          type,
+          path,
+          inputs,
+        });
 
-          const result = resJSON.map((item) => ({
-            meta: res.meta,
-            json: item,
-          }));
+        return {
+          promise: promise.then((res) => {
+            const resJSON = Array.isArray(res.json)
+              ? res.json
+              : batchOps.map(() => res.json);
 
-          return result;
-        }),
-        cancel,
+            const result = resJSON.map((item) => ({
+              meta: res.meta,
+              json: item,
+            }));
+
+            return result;
+          }),
+          cancel,
+        };
       };
+
+      return { validate, fetch };
     };
-    const query = dataLoader<Key, ResponseShape>(fetcher('query'));
-    const mutation = dataLoader<Key, ResponseShape>(fetcher('mutation'));
-    const subscription = dataLoader<Key, ResponseShape>(
-      fetcher('subscription'),
+
+    const query = dataLoader<BatchOperation, ResponseShape>(
+      batchLoader('query'),
+    );
+    const mutation = dataLoader<BatchOperation, ResponseShape>(
+      batchLoader('mutation'),
+    );
+    const subscription = dataLoader<BatchOperation, ResponseShape>(
+      batchLoader('subscription'),
     );
 
     const loaders = { query, subscription, mutation };

package/src/links/httpLink.ts

@@ -1,7 +1,7 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../rx/observable';
+import { observable } from '@trpc/server/observable';
+import { HTTPLinkOptions, httpRequest } from './internals/httpUtils';
 import { TRPCLink } from './types';
-import { HTTPLinkOptions, httpRequest } from './httpUtils';
 
 export function httpLink<TRouter extends AnyRouter>(
   opts: HTTPLinkOptions,
@@ -12,11 +12,11 @@ export function httpLink<TRouter extends AnyRouter>(
       observable((observer) => {
         const { path, input, type } = op;
         const { promise, cancel } = httpRequest({
+          url,
           runtime,
+          type,
           path,
           input,
-          type,
-          url,
         });
         promise
           .then((res) => {

package/src/links/index.ts

@@ -0,0 +1,8 @@
+export * from './dedupeLink';
+export * from './httpBatchLink';
+export * from './httpLink';
+export * from './loggerLink';
+export * from './retryLink';
+export * from './splitLink';
+export * from './wsLink';
+export * from './types';

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

@@ -1,6 +1,6 @@
+import { observable } from '@trpc/server/observable';
 import { AnyRouter } from '@trpc/server/src';
 import { createChain } from './createChain';
-import { observable } from '../../rx/observable';
 
 describe('chain', () => {
   test('trivial', () => {
@@ -8,9 +8,9 @@ describe('chain', () => {
       links: [
         ({ next, op }) => {
           return observable((observer) => {
-            const next$ = next(op).subscribe(observer);
+            const subscription = next(op).subscribe(observer);
             return () => {
-              next$.unsubscribe();
+              subscription.unsubscribe();
             };
           });
         },
@@ -62,9 +62,9 @@ describe('chain', () => {
                 },
               },
             });
-            const next$ = next(op).subscribe(observer);
+            const subscription = next(op).subscribe(observer);
             return () => {
-              next$.unsubscribe();
+              subscription.unsubscribe();
             };
           });
         },

package/src/links/internals/createChain.ts

@@ -1,5 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../../rx/observable';
+import { observable } from '@trpc/server/observable';
 import { Operation, OperationLink, OperationResultObservable } from '../types';
 
 /** @internal */
@@ -14,7 +14,12 @@ export function createChain<
   return observable((observer) => {
     function execute(index = 0, op = opts.op) {
       const next = opts.links[index];
-      const next$ = next({
+      if (!next) {
+        throw new Error(
+          'No more links to execute - did you forget to add an ending link?',
+        );
+      }
+      const subscription = next({
         op,
         next(nextOp) {
           const nextObserver = execute(index + 1, nextOp);
@@ -22,7 +27,7 @@ export function createChain<
           return nextObserver;
         },
       });
-      return next$;
+      return subscription;
     }
 
     const obs$ = execute();

package/src/links/internals/httpUtils.ts

@@ -0,0 +1,116 @@
+import { ProcedureType } from '@trpc/server';
+import { PromiseAndCancel, TRPCClientRuntime } from '../types';
+
+export interface HTTPLinkOptions {
+  url: string;
+}
+
+// https://github.com/trpc/trpc/pull/669
+function arrayToDict(array: unknown[]) {
+  const dict: Record<number, unknown> = {};
+  for (let index = 0; index < array.length; index++) {
+    const element = array[index];
+    dict[index] = element;
+  }
+  return dict;
+}
+
+const METHOD = {
+  query: 'GET',
+  mutation: 'POST',
+  subscription: 'PATCH',
+} as const;
+
+export interface ResponseShape {
+  json: unknown;
+  meta: {
+    response: Response;
+  };
+}
+
+type GetInputOptions = {
+  runtime: TRPCClientRuntime;
+} & ({ inputs: unknown[] } | { input: unknown });
+
+function getInput(opts: GetInputOptions) {
+  return 'input' in opts
+    ? opts.runtime.transformer.serialize(opts.input)
+    : arrayToDict(
+        opts.inputs.map((_input) => opts.runtime.transformer.serialize(_input)),
+      );
+}
+
+export type HTTPRequestOptions = HTTPLinkOptions &
+  GetInputOptions & {
+    type: ProcedureType;
+    path: string;
+  };
+
+export function getUrl(opts: HTTPRequestOptions) {
+  let url = opts.url + '/' + opts.path;
+  const queryParts: string[] = [];
+  if ('inputs' in opts) {
+    queryParts.push('batch=1');
+  }
+  if (opts.type === 'query') {
+    const input = getInput(opts);
+    if (input !== undefined) {
+      queryParts.push(`input=${encodeURIComponent(JSON.stringify(input))}`);
+    }
+  }
+  if (queryParts.length) {
+    url += '?' + queryParts.join('&');
+  }
+  return url;
+}
+
+type GetBodyOptions = { type: ProcedureType } & GetInputOptions;
+
+export function getBody(opts: GetBodyOptions) {
+  if (opts.type === 'query') {
+    return undefined;
+  }
+  const input = getInput(opts);
+  return input !== undefined ? JSON.stringify(input) : undefined;
+}
+
+export function httpRequest(
+  opts: HTTPRequestOptions,
+): PromiseAndCancel<ResponseShape> {
+  const { type, runtime } = opts;
+  const ac = runtime.AbortController ? new runtime.AbortController() : null;
+
+  const promise = new Promise<ResponseShape>((resolve, reject) => {
+    const url = getUrl(opts);
+    const body = getBody(opts);
+
+    const meta = {} as any as ResponseShape['meta'];
+    Promise.resolve(runtime.headers())
+      .then((headers) =>
+        runtime.fetch(url, {
+          method: METHOD[type],
+          signal: ac?.signal,
+          body: body,
+          headers: {
+            'content-type': 'application/json',
+            ...headers,
+          },
+        }),
+      )
+      .then((_res) => {
+        meta.response = _res;
+        return _res.json();
+      })
+      .then((json) => {
+        resolve({
+          json,
+          meta,
+        });
+      })
+      .catch(reject);
+  });
+  const cancel = () => {
+    ac?.abort();
+  };
+  return { promise, cancel };
+}

package/src/links/internals/transformOperationResult.ts

@@ -1,25 +1,53 @@
 import { AnyRouter } from '@trpc/server';
+import { TRPCResultMessage } from '@trpc/server/rpc';
+import { TRPCClientRuntime } from '..';
 import { TRPCClientError } from '../../TRPCClientError';
 import { OperationResult } from '../types';
 
 /** @internal */
 export function transformOperationResult<TRouter extends AnyRouter, TOutput>(
   result: OperationResult<TRouter, TOutput>,
+  runtime: TRPCClientRuntime,
 ) {
   const { context } = result;
 
   if ('error' in result.data) {
-    const error = TRPCClientError.from<TRouter>(result.data);
-    return {
-      ok: false,
-      error,
-      context,
-    } as const;
+    const error = TRPCClientError.from<TRouter>({
+      ...result.data,
+      error: runtime.transformer.deserialize(result.data.error),
+    });
+    return { ok: false, error, context } as const;
   }
-  const data = (result.data.result as any).data as TOutput;
-  return {
-    ok: true,
-    data,
-    context,
-  } as const;
+
+  const data = runtime.transformer.deserialize(
+    (result.data.result as any).data,
+  ) as TOutput;
+  return { ok: true, data, context } as const;
+}
+
+/** @internal */
+export function transformSubscriptionOperationResult<
+  TRouter extends AnyRouter,
+  TOutput,
+>(result: OperationResult<TRouter, TOutput>, runtime: TRPCClientRuntime) {
+  const { context } = result;
+
+  if ('error' in result.data) {
+    const error = TRPCClientError.from<TRouter>(
+      {
+        ...result.data,
+        error: runtime.transformer.deserialize(result.data.error),
+      },
+      { meta: context },
+    );
+    return { ok: false, error, context } as const;
+  }
+
+  const data = {
+    ...result.data.result,
+    ...((result.data.result as any).type === 'data' && {
+      data: runtime.transformer.deserialize((result.data.result as any).data),
+    }),
+  } as TRPCResultMessage<TOutput>;
+  return { ok: true, data, context } as const;
 }

package/src/links/loggerLink.ts

@@ -1,7 +1,6 @@
 import { AnyRouter } from '@trpc/server';
+import { observable, tap } from '@trpc/server/observable';
 import { TRPCClientError } from '..';
-import { observable } from '../rx/observable';
-import { tap } from '../rx/operators';
 import { Operation, OperationResult, TRPCLink } from './types';
 
 type ConsoleEsque = {

package/src/links/retryLink.ts

@@ -1,6 +1,5 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../rx/observable';
-import { Unsubscribable } from '../rx/types';
+import { Unsubscribable, observable } from '@trpc/server/observable';
 import { TRPCLink } from './types';
 
 export function retryLink<TRouter extends AnyRouter = AnyRouter>(opts: {

package/src/links/splitLink.test.ts

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
+import { observable } from '@trpc/server/observable';
+import { splitLink } from '../';
+import { OperationLink, TRPCLink } from '../';
 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();

package/src/links/splitLink.ts

@@ -1,7 +1,7 @@
 import { AnyRouter } from '@trpc/server';
-import { observable } from '../rx/observable';
-import { TRPCLink, Operation } from './types';
+import { observable } from '@trpc/server/observable';
 import { createChain } from './internals/createChain';
+import { Operation, TRPCLink } from './types';
 
 function asArray<T>(value: T | T[]) {
   return Array.isArray(value) ? value : [value];
@@ -17,9 +17,9 @@ export function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
    */
   false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
 }): TRPCLink<TRouter> {
-  return (rt) => {
-    const yes = asArray(opts.true).map((link) => link(rt));
-    const no = asArray(opts.false).map((link) => link(rt));
+  return (runtime) => {
+    const yes = asArray(opts.true).map((link) => link(runtime));
+    const no = asArray(opts.false).map((link) => link(runtime));
     return (props) => {
       return observable((observer) => {
         const links = opts.condition(props.op) ? yes : no;

package/src/links/types.ts

@@ -1,6 +1,6 @@
-import { AnyRouter, inferRouterError, Dict } from '@trpc/server';
-import { TRPCResponse } from '@trpc/server/rpc';
-import { Observable, Observer } from '../rx/types';
+import { AnyRouter, DataTransformer, inferRouterError } from '@trpc/server';
+import { Observable, Observer } from '@trpc/server/observable';
+import { TRPCResponse, TRPCResponseMessage } from '@trpc/server/rpc';
 import { TRPCClientError } from '../TRPCClientError';
 
 export type CancelFn = () => void;
@@ -16,10 +16,10 @@ export type Operation<TInput = unknown> = {
   type: 'query' | 'mutation' | 'subscription';
   input: TInput;
   path: string;
-  context?: OperationContext;
+  context: OperationContext;
 };
 
-export type HTTPHeaders = Dict<string | string[]>;
+export type HTTPHeaders = Record<string, string | string[]>;
 
 /**
  * The default `fetch` implementation has an overloaded signature. By convention this library
@@ -30,14 +30,19 @@ export type TRPCFetch = (
   options?: RequestInit,
 ) => Promise<Response>;
 
-export interface LinkRuntime {
-  headers: () => HTTPHeaders | Promise<HTTPHeaders>;
+export interface TRPCClientRuntime {
   fetch: TRPCFetch;
   AbortController?: typeof AbortController;
+  headers: () => HTTPHeaders | Promise<HTTPHeaders>;
+  transformer: DataTransformer;
 }
 
+type OperationResultData<TRouter extends AnyRouter, TOutput> =
+  | TRPCResponse<TOutput, inferRouterError<TRouter>>
+  | TRPCResponseMessage<TOutput, inferRouterError<TRouter>>;
+
 export interface OperationResult<TRouter extends AnyRouter, TOutput> {
-  data: TRPCResponse<TOutput, inferRouterError<TRouter>>;
+  data: OperationResultData<TRouter, TOutput>;
   context?: OperationContext;
 }
 
@@ -61,5 +66,5 @@ export type OperationLink<
 }) => OperationResultObservable<TRouter, TOutput>;
 
 export type TRPCLink<TRouter extends AnyRouter> = (
-  opts: LinkRuntime,
+  opts: TRPCClientRuntime,
 ) => OperationLink<TRouter>;

package/src/links/wsLink.ts

@@ -1,19 +1,19 @@
 import { AnyRouter, ProcedureType } from '@trpc/server';
+import { UnsubscribeFn, observable } from '@trpc/server/observable';
 import {
   TRPCClientIncomingMessage,
   TRPCClientIncomingRequest,
-  TRPCRequest,
-  TRPCResponse,
+  TRPCClientOutgoingMessage,
+  TRPCRequestMessage,
+  TRPCResponseMessage,
 } from '@trpc/server/rpc';
-import { retryDelay } from '../internals/retryDelay';
-import { UnsubscribeFn } from '../rx';
-import { observable } from '../rx/observable';
 import { TRPCClientError } from '../TRPCClientError';
+import { retryDelay } from '../internals/retryDelay';
 import { Operation, OperationResultObserver, TRPCLink } from './types';
 
 export interface WebSocketClientOptions {
   url: string;
-  WebSocket?: WebSocket;
+  WebSocket?: typeof WebSocket;
   retryDelayMs?: typeof retryDelay;
 }
 export function createWSClient(opts: WebSocketClientOptions) {
@@ -31,7 +31,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
   /**
    * outgoing messages buffer whilst not open
    */
-  let outgoing: TRPCRequest[] = [];
+  let outgoing: TRPCClientOutgoingMessage[] = [];
   /**
    * pending outgoing requests that are awaiting callback
    */
@@ -112,7 +112,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
   }
 
   function createWS() {
-    const conn = new WebSocket(url);
+    const conn = new WebSocketImpl(url);
     clearTimeout(connectTimer as any);
     connectTimer = null;
 
@@ -141,7 +141,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
         }
       }
     };
-    const handleIncomingResponse = (data: TRPCResponse) => {
+    const handleIncomingResponse = (data: TRPCResponseMessage) => {
       const req = data.id !== null && pendingRequests[data.id];
       if (!req) {
         // do something?
@@ -184,8 +184,7 @@ export function createWSClient(opts: WebSocketClientOptions) {
         tryReconnect();
       }
 
-      for (const key in pendingRequests) {
-        const req = pendingRequests[key];
+      for (const [key, req] of Object.entries(pendingRequests)) {
         if (req.ws !== conn) {
           continue;
         }
@@ -208,9 +207,8 @@ export function createWSClient(opts: WebSocketClientOptions) {
 
   function request(op: Operation, callbacks: TCallbacks): UnsubscribeFn {
     const { type, input, path, id } = op;
-    const envelope: TRPCRequest = {
+    const envelope: TRPCRequestMessage = {
       id,
-      jsonrpc: '2.0',
       method: type,
       params: {
         input,
@@ -238,7 +236,6 @@ export function createWSClient(opts: WebSocketClientOptions) {
         outgoing.push({
           id,
           method: 'subscription.stop',
-          params: undefined,
         });
         dispatch();
       }
@@ -248,6 +245,8 @@ export function createWSClient(opts: WebSocketClientOptions) {
     close: () => {
       state = 'closed';
       closeIfNoPending(activeConnection);
+      clearTimeout(connectTimer as any);
+      connectTimer = null;
     },
     request,
     getConnection() {
@@ -279,11 +278,13 @@ class TRPCSubscriptionEndedError extends Error {
 export function wsLink<TRouter extends AnyRouter>(
   opts: WebSocketLinkOptions,
 ): TRPCLink<TRouter> {
-  return () => {
+  return (runtime) => {
     const { client } = opts;
     return ({ op }) => {
       return observable((observer) => {
-        const { type, input, path, id, context } = op;
+        const { type, path, id, context } = op;
+
+        const input = runtime.transformer.serialize(op.input);
 
         let isDone = false;
         const unsub = client.request(