chore: Add options to useEndpoint (#37020)

dougfabris · tassoevan · web-flow · commit affd1acaf28f · 2025-09-30T20:23:26.000Z
Co-authored-by: Tasso Evangelista &lt;2263066+tassoevan@users.noreply.github.com&gt;
diff --git a/apps/meteor/client/apps/gameCenter/hooks/useExternalComponentsQuery.ts b/apps/meteor/client/apps/gameCenter/hooks/useExternalComponentsQuery.ts
@@ -6,8 +6,8 @@ export const useExternalComponentsQuery = () => {
 	return useQuery({
 		queryKey: ['apps/external-components'],
 
-		queryFn: async () => {
-			return (await getExternalComponents()).externalComponents;
+		queryFn: async ({ signal }) => {
+			return (await getExternalComponents(undefined, { signal })).externalComponents;
 		},
 
 		staleTime: 10_000,
diff --git a/apps/meteor/client/providers/ServerProvider.tsx b/apps/meteor/client/providers/ServerProvider.tsx
@@ -30,26 +30,28 @@ const callEndpoint = <TMethod extends Method, TPathPattern extends PathPattern>(
 	pathPattern,
 	keys,
 	params,
+	signal,
 }: {
 	method: TMethod;
 	pathPattern: TPathPattern;
 	keys: UrlParams<TPathPattern>;
 	params: OperationParams<TMethod, TPathPattern>;
+	signal?: AbortSignal;
 }): Promise<Serialized<OperationResult<TMethod, TPathPattern>>> => {
 	const compiledPath = compile(pathPattern, { encode: encodeURIComponent })(keys) as any;
 
 	switch (method) {
 		case 'GET':
-			return sdk.rest.get(compiledPath, params as any) as any;
+			return sdk.rest.get(compiledPath, params as any, { signal }) as any;
 
 		case 'POST':
-			return sdk.rest.post(compiledPath, params as any) as any;
+			return sdk.rest.post(compiledPath, params as any, { signal }) as any;
 
 		case 'PUT':
-			return sdk.rest.put(compiledPath, params as never) as never;
+			return sdk.rest.put(compiledPath, params as never, { signal }) as never;
 
 		case 'DELETE':
-			return sdk.rest.delete(compiledPath, params as any) as any;
+			return sdk.rest.delete(compiledPath, params as any, { signal }) as any;
 
 		default:
 			throw new Error('Invalid HTTP method');
diff --git a/packages/ui-contexts/src/ServerContext.ts b/packages/ui-contexts/src/ServerContext.ts
@@ -32,6 +32,7 @@ export type ServerContextValue = {
 		pathPattern: TPathPattern;
 		keys: UrlParams<TPathPattern>;
 		params: OperationParams<TMethod, TPathPattern>;
+		signal?: AbortSignal;
 	}) => Promise<Serialized<OperationResult<TMethod, TPathPattern>>>;
 	uploadToEndpoint: (
 		endpoint: PathFor<'POST'>,
diff --git a/packages/ui-contexts/src/hooks/useEndpoint.ts b/packages/ui-contexts/src/hooks/useEndpoint.ts
@@ -4,10 +4,20 @@ import { useCallback, useContext, useRef } from 'react';
 
 import { ServerContext } from '../ServerContext';
 
+type EndpointOptions = {
+	signal?: AbortSignal;
+};
+
 export type EndpointFunction<TMethod extends Method, TPathPattern extends PathPattern> =
 	undefined extends OperationParams<TMethod, TPathPattern>
-		? (params?: OperationParams<TMethod, TPathPattern>) => Promise<Serialized<OperationResult<TMethod, TPathPattern>>>
-		: (params: OperationParams<TMethod, TPathPattern>) => Promise<Serialized<OperationResult<TMethod, TPathPattern>>>;
+		? (
+				params?: OperationParams<TMethod, TPathPattern>,
+				options?: EndpointOptions,
+			) => Promise<Serialized<OperationResult<TMethod, TPathPattern>>>
+		: (
+				params: OperationParams<TMethod, TPathPattern>,
+				options?: EndpointOptions,
+			) => Promise<Serialized<OperationResult<TMethod, TPathPattern>>>;
 
 export function useEndpoint<TMethod extends Method, TPathPattern extends PathPattern>(
 	method: TMethod,
@@ -19,12 +29,13 @@ export function useEndpoint<TMethod extends Method, TPathPattern extends PathPat
 	keysRef.current = keys;
 
 	return useCallback(
-		(params: OperationParams<TMethod, TPathPattern> | undefined) =>
+		(params: OperationParams<TMethod, TPathPattern> | undefined, options?: EndpointOptions) =>
 			callEndpoint({
 				method,
 				pathPattern,
 				keys: keysRef.current as UrlParams<TPathPattern>,
 				params: params as OperationParams<TMethod, TPathPattern>,
+				signal: options?.signal,
 			}),
 		[callEndpoint, pathPattern, method],
 	);
