@trpc/react-query - npm Package Compare versions

Comparing version 11.0.0-rc.592 to 11.0.0-rc.593

dist/bundle-analysis.json

 {
-  "bundleSize": 40313,
-  "bundleOrigSize": 88085,
-  "bundleReduction": 54.23,
+  "bundleSize": 43624,
+  "bundleOrigSize": 91523,
+  "bundleReduction": 52.34,
   "modules": [
     {
       "id": "/src/shared/hooks/createHooksInternal.tsx",
-      "size": 15733,
-      "origSize": 18037,
+      "size": 19044,
+      "origSize": 20994,
       "renderedExports": [
@@ -17,4 +17,4 @@ "createRootHooks"
       ],
-      "percent": 39.03,
-      "reduction": 12.77
+      "percent": 43.65,
+      "reduction": 9.29
     },
@@ -33,3 +33,3 @@ {
       ],
-      "percent": 17.94,
+      "percent": 16.58,
       "reduction": 0
@@ -48,3 +48,3 @@ },
       ],
-      "percent": 9.85,
+      "percent": 9.11,
       "reduction": 35.1
@@ -65,3 +65,3 @@ },
       ],
-      "percent": 9,
+      "percent": 8.32,
       "reduction": 78.09
@@ -78,3 +78,3 @@ },
       "dependents": [],
-      "percent": 8.02,
+      "percent": 7.41,
       "reduction": 39.65
@@ -101,3 +101,3 @@ },
       ],
-      "percent": 6.21,
+      "percent": 5.74,
       "reduction": 40.22
@@ -108,3 +108,3 @@ },
       "size": 875,
-      "origSize": 13307,
+      "origSize": 13788,
       "renderedExports": [
@@ -118,4 +118,4 @@ "createHooksInternal",
       ],
-      "percent": 2.17,
-      "reduction": 93.42
+      "percent": 2.01,
+      "reduction": 93.65
     },
@@ -136,3 +136,3 @@ {
       ],
-      "percent": 2.15,
+      "percent": 1.98,
       "reduction": 29.96
@@ -151,3 +151,3 @@ },
       ],
-      "percent": 1.94,
+      "percent": 1.79,
       "reduction": 24
@@ -167,3 +167,3 @@ },
       ],
-      "percent": 1.41,
+      "percent": 1.3,
       "reduction": 82.1
@@ -184,3 +184,3 @@ },
       ],
-      "percent": 1.17,
+      "percent": 1.08,
       "reduction": 17.31
@@ -199,3 +199,3 @@ },
       ],
-      "percent": 0.4,
+      "percent": 0.37,
       "reduction": 66.6
@@ -218,3 +218,3 @@ },
       ],
-      "percent": 0.38,
+      "percent": 0.35,
       "reduction": 98.32
@@ -233,3 +233,3 @@ },
       ],
-      "percent": 0.32,
+      "percent": 0.3,
       "reduction": 74.9
@@ -236,0 +236,0 @@ },

dist/createTRPCReact.d.ts

 import type { DefinedInitialDataInfiniteOptions, DefinedUseInfiniteQueryResult, InfiniteData, SkipToken, UndefinedInitialDataInfiniteOptions, UseInfiniteQueryOptions, UseInfiniteQueryResult, UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult, UseSuspenseQueryResult } from '@tanstack/react-query';
 import type { TRPCClientErrorLike } from '@trpc/client';
-import type { AnyProcedure, AnyRootTypes, AnyRouter, inferProcedureInput, inferTransformedProcedureOutput, ProcedureType, ProtectedIntersection, RouterRecord, Simplify } from '@trpc/server/unstable-core-do-not-import';
+import type { AnyProcedure, AnyRootTypes, AnyRouter, inferAsyncIterableYield, inferProcedureInput, inferTransformedProcedureOutput, ProcedureType, ProtectedIntersection, RouterRecord, Simplify } from '@trpc/server/unstable-core-do-not-import';
 import type { TRPCUseQueries, TRPCUseSuspenseQueries } from './internals/useQueries';
 import type { CreateReactUtils, TRPCFetchInfiniteQueryOptions, TRPCFetchQueryOptions } from './shared';
 import type { CreateReactQueryHooks } from './shared/hooks/createHooksInternal';
-import type { CreateClient, DefinedUseTRPCQueryOptions, DefinedUseTRPCQueryResult, TRPCHookResult, TRPCProvider, TRPCUseQueryBaseOptions, UseTRPCMutationOptions, UseTRPCMutationResult, UseTRPCQueryOptions, UseTRPCQueryResult, UseTRPCSubscriptionOptions, UseTRPCSuspenseQueryOptions } from './shared/hooks/types';
+import type { CreateClient, DefinedUseTRPCQueryOptions, DefinedUseTRPCQueryResult, TRPCHookResult, TRPCProvider, TRPCSubscriptionResult, TRPCUseQueryBaseOptions, UseTRPCMutationOptions, UseTRPCMutationResult, UseTRPCQueryOptions, UseTRPCQueryResult, UseTRPCSubscriptionOptions, UseTRPCSuspenseQueryOptions } from './shared/hooks/types';
 import type { CreateTRPCReactOptions } from './shared/types';
@@ -98,4 +98,8 @@ type ResolverDef = {
 interface ProcedureUseSubscription<TDef extends ResolverDef> {
-    (input: TDef['input'], opts: UseTRPCSubscriptionOptions<TDef['output'], TRPCClientErrorLike<TDef>>): void;
-    (input: TDef['input'] | SkipToken, opts: Omit<UseTRPCSubscriptionOptions<TDef['output'], TRPCClientErrorLike<TDef>>, 'enabled'>): void;
+    (input: TDef['input'], opts?: UseTRPCSubscriptionOptions<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>): Exclude<TRPCSubscriptionResult<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>, {
+        status: 'idle';
+    } | {
+        connectionState: 'idle';
+    }>;
+    (input: TDef['input'] | SkipToken, opts?: Omit<UseTRPCSubscriptionOptions<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>, 'enabled'>): TRPCSubscriptionResult<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>;
 }
@@ -102,0 +106,0 @@ /**

dist/shared/hooks/createHooksInternal.d.ts

@@ -6,3 +6,3 @@ import type { TRPCClientErrorLike } from '@trpc/client';
 import type { CreateTRPCReactOptions } from '../types';
-import type { CreateClient, TRPCProvider, UseTRPCInfiniteQueryOptions, UseTRPCInfiniteQueryResult, UseTRPCMutationOptions, UseTRPCMutationResult, UseTRPCPrefetchInfiniteQueryOptions, UseTRPCPrefetchQueryOptions, UseTRPCQueryOptions, UseTRPCQueryResult, UseTRPCSubscriptionOptions, UseTRPCSuspenseInfiniteQueryOptions, UseTRPCSuspenseInfiniteQueryResult, UseTRPCSuspenseQueryOptions, UseTRPCSuspenseQueryResult } from './types';
+import type { CreateClient, TRPCProvider, TRPCSubscriptionResult, UseTRPCInfiniteQueryOptions, UseTRPCInfiniteQueryResult, UseTRPCMutationOptions, UseTRPCMutationResult, UseTRPCPrefetchInfiniteQueryOptions, UseTRPCPrefetchQueryOptions, UseTRPCQueryOptions, UseTRPCQueryResult, UseTRPCSubscriptionOptions, UseTRPCSuspenseInfiniteQueryOptions, UseTRPCSuspenseInfiniteQueryResult, UseTRPCSuspenseQueryOptions, UseTRPCSuspenseQueryResult } from './types';
 /**
@@ -22,3 +22,3 @@ * @internal
     useMutation: (path: readonly string[], opts?: UseTRPCMutationOptions<unknown, TRPCClientErrorLike<TRouter>, unknown, unknown>) => UseTRPCMutationResult<unknown, TRPCClientErrorLike<TRouter>, unknown, unknown>;
-    useSubscription: (path: readonly string[], input: unknown, opts: UseTRPCSubscriptionOptions<unknown, TRPCClientErrorLike<TRouter>>) => void;
+    useSubscription: (path: readonly string[], input: unknown, opts: UseTRPCSubscriptionOptions<unknown, TRPCClientErrorLike<TRouter>>) => TRPCSubscriptionResult<unknown, TRPCClientErrorLike<TRouter>>;
     useInfiniteQuery: (path: readonly string[], input: unknown, opts: UseTRPCInfiniteQueryOptions<unknown, unknown, TRPCClientErrorLike<TRouter>>) => UseTRPCInfiniteQueryResult<unknown, TRPCClientErrorLike<TRouter>, unknown>;
@@ -25,0 +25,0 @@ usePrefetchInfiniteQuery: (path: string[], input: unknown, opts: UseTRPCPrefetchInfiniteQueryOptions<unknown, unknown, TRPCClientErrorLike<TRouter>>) => void;

dist/shared/hooks/createHooksInternal.js

@@ -33,2 +33,11 @@ 'use strict';
 
+const trackResult = (result, onTrackResult)=>{
+    const trackedResult = new Proxy(result, {
+        get (target, prop) {
+            onTrackResult(prop);
+            return target[prop];
+        }
+    });
+    return trackedResult;
+};
 /**
@@ -221,3 +230,11 @@ * @internal
         optsRef.current = opts;
-        React__namespace.useEffect(()=>{
+        const trackedProps = React__namespace.useRef(new Set([]));
+        const addTrackedProp = React__namespace.useCallback((key)=>{
+            trackedProps.current.add(key);
+        }, []);
+        const currentSubscriptionRef = React__namespace.useRef();
+        const reset = React__namespace.useCallback(()=>{
+            // unsubscribe from the previous subscription
+            currentSubscriptionRef.current?.();
+            updateState(getInitialState);
             if (!enabled) {
@@ -231,2 +248,7 @@ return;
                         optsRef.current.onStarted?.();
+                        updateState((prev)=>({
+                                ...prev,
+                                status: 'pending',
+                                error: null
+                            }));
                     }
@@ -236,12 +258,35 @@ },
                     if (!isStopped) {
-                        optsRef.current.onData(data);
+                        optsRef.current.onData?.(data);
+                        updateState((prev)=>({
+                                ...prev,
+                                status: 'pending',
+                                data,
+                                error: null
+                            }));
                     }
                 },
-                onError: (err)=>{
+                onError: (error)=>{
                     if (!isStopped) {
-                        optsRef.current.onError?.(err);
+                        optsRef.current.onError?.(error);
+                        updateState((prev)=>({
+                                ...prev,
+                                status: 'error',
+                                error
+                            }));
                     }
+                },
+                onConnectionStateChange: (result)=>{
+                    const delta = {
+                        status: result.state,
+                        error: result.error
+                    };
+                    updateState((prev)=>{
+                        return {
+                            ...prev,
+                            ...delta
+                        };
+                    });
                 }
             });
-            return ()=>{
+            currentSubscriptionRef.current = ()=>{
                 isStopped = true;
@@ -255,2 +300,50 @@ subscription.unsubscribe();
         ]);
+        const getInitialState = React__namespace.useCallback(()=>{
+            return enabled ? {
+                data: undefined,
+                error: null,
+                status: 'connecting',
+                reset
+            } : {
+                data: undefined,
+                error: null,
+                status: 'idle',
+                reset
+            };
+        }, [
+            enabled,
+            reset
+        ]);
+        const resultRef = React__namespace.useRef(getInitialState());
+        const [state, setState] = React__namespace.useState(trackResult(resultRef.current, addTrackedProp));
+        state.reset = reset;
+        const updateState = React__namespace.useCallback((callback)=>{
+            const prev = resultRef.current;
+            const next = resultRef.current = callback(prev);
+            let shouldUpdate = false;
+            for (const key of trackedProps.current){
+                if (prev[key] !== next[key]) {
+                    shouldUpdate = true;
+                    break;
+                }
+            }
+            if (shouldUpdate) {
+                setState(trackResult(next, addTrackedProp));
+            }
+        }, [
+            addTrackedProp
+        ]);
+        React__namespace.useEffect(()=>{
+            if (!enabled) {
+                return;
+            }
+            reset();
+            return ()=>{
+                currentSubscriptionRef.current?.();
+            };
+        }, [
+            reset,
+            enabled
+        ]);
+        return state;
     }
@@ -257,0 +350,0 @@ function useInfiniteQuery(path, input, opts) {

dist/shared/hooks/types.d.ts

@@ -54,9 +54,52 @@ import type { DefinedUseQueryResult, DehydratedState, FetchInfiniteQueryOptions, FetchQueryOptions, InfiniteData, InfiniteQueryObserverSuccessResult, InitialDataFunction, QueryObserverSuccessResult, QueryOptions, UseBaseQueryOptions, UseInfiniteQueryOptions, UseInfiniteQueryResult, UseMutationOptions, UseMutationResult, UseQueryResult, UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult, UseSuspenseQueryOptions, UseSuspenseQueryResult } from '@tanstack/react-query';
 }
-type inferAsyncIterableYield<T> = T extends AsyncIterable<infer U> ? U : T;
 export interface UseTRPCSubscriptionOptions<TOutput, TError> {
+    /**
+     * @deprecated
+     * use a `skipToken` from `@tanstack/react-query` instead
+     * this will be removed in v12
+     */
     enabled?: boolean;
+    /**
+     * Called when the subscription is started
+     */
     onStarted?: () => void;
-    onData: (data: inferAsyncIterableYield<TOutput>) => void;
+    /**
+     * Called when new data is received
+     */
+    onData?: (data: TOutput) => void;
+    /**
+     * Called when an **unrecoverable error** occurs and the subscription is closed
+     */
     onError?: (err: TError) => void;
 }
+export interface TRPCSubscriptionBaseResult<TOutput, TError> {
+    status: 'idle' | 'connecting' | 'pending' | 'error';
+    data: undefined | TOutput;
+    error: null | TError;
+    /**
+     * Reset the subscription
+     */
+    reset: () => void;
+}
+export interface TRPCSubscriptionIdleResult<TOutput> extends TRPCSubscriptionBaseResult<TOutput, null> {
+    status: 'idle';
+    data: undefined;
+    error: null;
+}
+export interface TRPCSubscriptionConnectingResult<TOutput, TError> extends TRPCSubscriptionBaseResult<TOutput, TError> {
+    status: 'connecting';
+    data: undefined | TOutput;
+    error: TError | null;
+}
+export interface TRPCSubscriptionPendingResult<TOutput> extends TRPCSubscriptionBaseResult<TOutput, undefined> {
+    status: 'pending';
+    data: TOutput;
+    error: null;
+}
+export interface TRPCSubscriptionErrorResult<TOutput, TError> extends TRPCSubscriptionBaseResult<TOutput, TError> {
+    status: 'error';
+    data: TOutput | undefined;
+    error: TError;
+}
+export type TRPCSubscriptionResult<TOutput, TError> = TRPCSubscriptionIdleResult<TOutput> | TRPCSubscriptionConnectingResult<TOutput, TError> | TRPCSubscriptionErrorResult<TOutput, TError> | TRPCSubscriptionPendingResult<TOutput>;
 export interface TRPCProviderProps<TRouter extends AnyRouter, TSSRContext> extends TRPCContextProps<TRouter, TSSRContext> {
@@ -112,3 +155,2 @@ children: ReactNode;
 }
-export {};
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@trpc/react-query",
-  "version": "11.0.0-rc.592+4744c0612",
+  "version": "11.0.0-rc.593+f73cd3fd9",
   "description": "The tRPC React library",
@@ -67,4 +67,4 @@ "author": "KATT",
     "@tanstack/react-query": "^5.59.15",
-    "@trpc/client": "11.0.0-rc.592+4744c0612",
-    "@trpc/server": "11.0.0-rc.592+4744c0612",
+    "@trpc/client": "11.0.0-rc.593+f73cd3fd9",
+    "@trpc/server": "11.0.0-rc.593+f73cd3fd9",
     "react": ">=18.2.0",
@@ -75,4 +75,4 @@ "react-dom": ">=18.2.0"
     "@tanstack/react-query": "^5.59.15",
-    "@trpc/client": "11.0.0-rc.592+4744c0612",
-    "@trpc/server": "11.0.0-rc.592+4744c0612",
+    "@trpc/client": "11.0.0-rc.593+f73cd3fd9",
+    "@trpc/server": "11.0.0-rc.593+f73cd3fd9",
     "@types/express": "^4.17.17",
@@ -97,3 +97,3 @@ "@types/node": "^20.10.0",
   ],
-  "gitHead": "4744c0612c2e6dcf6d9fd3a30fd57621962ac439"
+  "gitHead": "f73cd3fd99734e83d3a6e8ea7ec77eb853055c43"
 }

src/shared/hooks/types.ts

@@ -163,9 +163,67 @@ import type {
 
-type inferAsyncIterableYield<T> = T extends AsyncIterable<infer U> ? U : T;
 export interface UseTRPCSubscriptionOptions<TOutput, TError> {
+  /**
+   * @deprecated
+   * use a `skipToken` from `@tanstack/react-query` instead
+   * this will be removed in v12
+   */
   enabled?: boolean;
+  /**
+   * Called when the subscription is started
+   */
   onStarted?: () => void;
-  onData: (data: inferAsyncIterableYield<TOutput>) => void;
+  /**
+   * Called when new data is received
+   */
+  onData?: (data: TOutput) => void;
+  /**
+   * Called when an **unrecoverable error** occurs and the subscription is closed
+   */
   onError?: (err: TError) => void;
 }
+
+export interface TRPCSubscriptionBaseResult<TOutput, TError> {
+  status: 'idle' | 'connecting' | 'pending' | 'error';
+  data: undefined | TOutput;
+  error: null | TError;
+  /**
+   * Reset the subscription
+   */
+  reset: () => void;
+}
+
+export interface TRPCSubscriptionIdleResult<TOutput>
+  extends TRPCSubscriptionBaseResult<TOutput, null> {
+  status: 'idle';
+  data: undefined;
+  error: null;
+}
+
+export interface TRPCSubscriptionConnectingResult<TOutput, TError>
+  extends TRPCSubscriptionBaseResult<TOutput, TError> {
+  status: 'connecting';
+  data: undefined | TOutput;
+  error: TError | null;
+}
+
+export interface TRPCSubscriptionPendingResult<TOutput>
+  extends TRPCSubscriptionBaseResult<TOutput, undefined> {
+  status: 'pending';
+  data: TOutput;
+  error: null;
+}
+
+export interface TRPCSubscriptionErrorResult<TOutput, TError>
+  extends TRPCSubscriptionBaseResult<TOutput, TError> {
+  status: 'error';
+  data: TOutput | undefined;
+  error: TError;
+}
+
+export type TRPCSubscriptionResult<TOutput, TError> =
+  | TRPCSubscriptionIdleResult<TOutput>
+  | TRPCSubscriptionConnectingResult<TOutput, TError>
+  | TRPCSubscriptionErrorResult<TOutput, TError>
+  | TRPCSubscriptionPendingResult<TOutput>;
+
 export interface TRPCProviderProps<TRouter extends AnyRouter, TSSRContext>
@@ -172,0 +230,0 @@ extends TRPCContextProps<TRouter, TSSRContext> {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

357516

increased by4.27%

Lines of code

8074

increased by5.27%

No dependency changes