@trpc/client 11.0.0-rc.413 → 11.0.0-rc.419

package/src/links/httpSubscriptionLink.ts

@@ -0,0 +1,121 @@
+import { observable } from '@trpc/server/observable';
+import type {
+  AnyClientTypes,
+  inferClientTypes,
+  InferrableClientTypes,
+  MaybePromise,
+  SSEvent,
+} from '@trpc/server/unstable-core-do-not-import';
+import {
+  run,
+  sseStreamConsumer,
+} from '@trpc/server/unstable-core-do-not-import';
+import { TRPCClientError } from '../TRPCClientError';
+import { getTransformer, type TransformerOptions } from '../unstable-internals';
+import { getUrl } from './internals/httpUtils';
+import type { TRPCLink } from './types';
+
+type HTTPSubscriptionLinkOptions<TRoot extends AnyClientTypes> = {
+  /**
+   * The URL to connect to (can be a function that returns a URL)
+   */
+  url: string | (() => MaybePromise<string>);
+  /**
+   * EventSource options
+   */
+  eventSourceOptions?: EventSourceInit;
+} & TransformerOptions<TRoot>;
+
+/**
+ * Get the result of a value or function that returns a value
+ */
+const resultOf = <T>(value: T | (() => T)): T => {
+  return typeof value === 'function' ? (value as () => T)() : value;
+};
+
+/**
+ * @see https://trpc.io/docs/client/links/httpSubscriptionLink
+ */
+export function unstable_httpSubscriptionLink<
+  TInferrable extends InferrableClientTypes,
+>(
+  opts: HTTPSubscriptionLinkOptions<inferClientTypes<TInferrable>>,
+): TRPCLink<TInferrable> {
+  const transformer = getTransformer(opts.transformer);
+  return () => {
+    return ({ op }) => {
+      return observable((observer) => {
+        const { type, path, input } = op;
+        /* istanbul ignore if -- @preserve */
+        if (type !== 'subscription') {
+          throw new Error('httpSubscriptionLink only supports subscriptions');
+        }
+
+        let eventSource: EventSource | null = null;
+        let unsubscribed = false;
+
+        run(async () => {
+          const url = getUrl({
+            transformer,
+            url: await resultOf(opts.url),
+            input,
+            path,
+            type,
+            AbortController: null,
+          });
+
+          /* istanbul ignore if -- @preserve */
+          if (unsubscribed) {
+            // already unsubscribed - rare race condition
+            return;
+          }
+          eventSource = new EventSource(url, opts.eventSourceOptions);
+          const onStarted = () => {
+            observer.next({
+              result: {
+                type: 'started',
+              },
+              context: {
+                eventSource,
+              },
+            });
+
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            eventSource!.removeEventListener('open', onStarted);
+          };
+          // console.log('starting', new Date());
+          eventSource.addEventListener('open', onStarted);
+          const iterable = sseStreamConsumer<SSEvent>({
+            from: eventSource,
+            deserialize: transformer.input.deserialize,
+          });
+
+          for await (const chunk of iterable) {
+            // if the `sse({})`-helper is used, we always have an `id` field
+            const data = 'id' in chunk ? chunk : chunk.data;
+            observer.next({
+              result: {
+                data,
+              },
+            });
+          }
+
+          observer.next({
+            result: {
+              type: 'stopped',
+            },
+          });
+          observer.complete();
+        }).catch((error) => {
+          observer.error(TRPCClientError.from(error));
+        });
+
+        return () => {
+          observer.complete();
+          eventSource?.close();
+          unsubscribed = true;
+        };
+      });
+    };
+  };
+}

package/src/links/internals/httpUtils.ts

@@ -1,7 +1,8 @@
 import type {
-  AnyRootTypes,
+  AnyClientTypes,
   CombinedDataTransformer,
   ProcedureType,
+  TRPCAcceptHeader,
   TRPCResponse,
 } from '@trpc/server/unstable-core-do-not-import';
 import { getFetch } from '../../getFetch';
@@ -22,7 +23,7 @@ import type { HTTPHeaders, PromiseAndCancel } from '../types';
  * @internal
  */
 export type HTTPLinkBaseOptions<
-  TRoot extends Pick<AnyRootTypes, 'transformer'>,
+  TRoot extends Pick<AnyClientTypes, 'transformer'>,
 > = {
   url: string | URL;
   /**
@@ -50,10 +51,10 @@ export interface ResolvedHTTPLinkOptions {
 }
 
 export function resolveHTTPLinkOptions(
-  opts: HTTPLinkBaseOptions<AnyRootTypes>,
+  opts: HTTPLinkBaseOptions<AnyClientTypes>,
 ): ResolvedHTTPLinkOptions {
   return {
-    url: opts.url.toString().replace(/\/$/, ''), // Remove any trailing slashes
+    url: opts.url.toString(),
     fetch: opts.fetch,
     AbortController: getAbortController(opts.AbortController),
     transformer: getTransformer(opts.transformer),
@@ -74,6 +75,7 @@ function arrayToDict(array: unknown[]) {
 const METHOD = {
   query: 'GET',
   mutation: 'POST',
+  subscription: 'PATCH',
 } as const;
 
 export interface HTTPResult {
@@ -106,19 +108,20 @@ type GetUrl = (opts: HTTPBaseRequestOptions) => string;
 type GetBody = (opts: HTTPBaseRequestOptions) => RequestInitEsque['body'];
 
 export type ContentOptions = {
-  trpcAcceptHeader?: 'application/jsonl';
+  trpcAcceptHeader?: TRPCAcceptHeader;
   contentTypeHeader?: string;
   getUrl: GetUrl;
   getBody: GetBody;
 };
 
 export const getUrl: GetUrl = (opts) => {
-  let url = opts.url + '/' + opts.path;
+  const base = opts.url.replace(/\/$/, ''); // Remove any trailing slashes
+  let url = base + '/' + opts.path;
   const queryParts: string[] = [];
   if ('inputs' in opts) {
     queryParts.push('batch=1');
   }
-  if (opts.type === 'query') {
+  if (opts.type === 'query' || opts.type === 'subscription') {
     const input = getInput(opts);
     if (input !== undefined && opts.methodOverride !== 'POST') {
       queryParts.push(`input=${encodeURIComponent(JSON.stringify(input))}`);
@@ -172,10 +175,6 @@ export async function fetchHTTPResponse(
     }
     return heads;
   })();
-  /* istanbul ignore if -- @preserve */
-  if (type === 'subscription') {
-    throw new Error('Subscriptions should use wsLink');
-  }
   const headers = {
     ...(opts.contentTypeHeader
       ? { 'content-type': opts.contentTypeHeader }

package/src/links.ts

@@ -7,6 +7,7 @@ export * from './links/httpLink';
 export * from './links/loggerLink';
 export * from './links/splitLink';
 export * from './links/wsLink';
+export * from './links/httpSubscriptionLink';
 
 // These are not public (yet) as we get this functionality from tanstack query
 // export * from './links/internals/retryLink';