@trpc/react-query - npm Package Compare versions

Comparing version 11.0.0-rc.748 to 11.0.0-rc.749

dist/bundle-analysis.json

 {
-  "bundleSize": 43951,
-  "bundleOrigSize": 92072,
-  "bundleReduction": 52.26,
+  "bundleSize": 45016,
+  "bundleOrigSize": 92893,
+  "bundleReduction": 51.54,
   "modules": [
     {
       "id": "/src/shared/hooks/createHooksInternal.tsx",
-      "size": 19278,
-      "origSize": 21256,
+      "size": 20343,
+      "origSize": 22215,
       "renderedExports": [
@@ -17,4 +17,4 @@ "createRootHooks"
       ],
-      "percent": 43.86,
-      "reduction": 9.31
+      "percent": 45.19,
+      "reduction": 8.43
     },
@@ -33,3 +33,3 @@ {
       ],
-      "percent": 16.44,
+      "percent": 16.05,
       "reduction": 0
@@ -48,3 +48,3 @@ },
       ],
-      "percent": 8.99,
+      "percent": 8.78,
       "reduction": 34.89
@@ -65,3 +65,3 @@ },
       ],
-      "percent": 8.25,
+      "percent": 8.06,
       "reduction": 78.16
@@ -78,3 +78,3 @@ },
       "dependents": [],
-      "percent": 7.35,
+      "percent": 7.18,
       "reduction": 40.13
@@ -101,3 +101,3 @@ },
       ],
-      "percent": 5.69,
+      "percent": 5.56,
       "reduction": 40.27
@@ -108,3 +108,3 @@ },
       "size": 875,
-      "origSize": 13837,
+      "origSize": 13699,
       "renderedExports": [
@@ -118,4 +118,4 @@ "createHooksInternal",
       ],
-      "percent": 1.99,
-      "reduction": 93.68
+      "percent": 1.94,
+      "reduction": 93.61
     },
@@ -136,3 +136,3 @@ {
       ],
-      "percent": 1.97,
+      "percent": 1.92,
       "reduction": 29.96
@@ -151,3 +151,3 @@ },
       ],
-      "percent": 1.77,
+      "percent": 1.73,
       "reduction": 24.2
@@ -167,3 +167,3 @@ },
       ],
-      "percent": 1.59,
+      "percent": 1.55,
       "reduction": 79.52
@@ -184,3 +184,3 @@ },
       ],
-      "percent": 1.08,
+      "percent": 1.05,
       "reduction": 17.31
@@ -199,3 +199,3 @@ },
       ],
-      "percent": 0.37,
+      "percent": 0.36,
       "reduction": 66.6
@@ -218,3 +218,3 @@ },
       ],
-      "percent": 0.35,
+      "percent": 0.34,
       "reduction": 98.32
@@ -221,0 +221,0 @@ },

dist/createTRPCReact.d.ts

@@ -98,7 +98,3 @@ import type { DefinedInitialDataInfiniteOptions, DefinedUseInfiniteQueryResult, InfiniteData, SkipToken, UndefinedInitialDataInfiniteOptions, UseInfiniteQueryOptions, UseInfiniteQueryResult, UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult, UseSuspenseQueryResult } from '@tanstack/react-query';
 interface ProcedureUseSubscription<TDef extends ResolverDef> {
-    (input: TDef['input'], opts?: UseTRPCSubscriptionOptions<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>): Exclude<TRPCSubscriptionResult<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>, {
-        status: 'idle';
-    } | {
-        connectionState: 'idle';
-    }>;
+    (input: TDef['input'], opts?: UseTRPCSubscriptionOptions<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>): TRPCSubscriptionResult<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>;
     (input: TDef['input'] | SkipToken, opts?: Omit<UseTRPCSubscriptionOptions<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>, 'enabled'>): TRPCSubscriptionResult<inferAsyncIterableYield<TDef['output']>, TRPCClientErrorLike<TDef>>;
@@ -105,0 +101,0 @@ }

dist/shared/hooks/createHooksInternal.js

@@ -225,2 +225,12 @@ 'use strict';
     }
+    const initialStateIdle = {
+        data: undefined,
+        error: null,
+        status: 'idle'
+    };
+    const initialStateConnecting = {
+        data: undefined,
+        error: null,
+        status: 'connecting'
+    };
     /* istanbul ignore next -- @preserve */ function useSubscription(path, input, opts) {
@@ -231,117 +241,128 @@ const enabled = opts?.enabled ?? input !== reactQuery.skipToken;
         const optsRef = React__namespace.useRef(opts);
-        optsRef.current = opts;
-        const trackedProps = React__namespace.useRef(new Set([]));
+        React__namespace.useEffect(()=>{
+            optsRef.current = opts;
+        });
+        const [trackedProps] = React__namespace.useState(new Set([]));
         const addTrackedProp = React__namespace.useCallback((key)=>{
-            trackedProps.current.add(key);
-        }, []);
+            trackedProps.add(key);
+        }, [
+            trackedProps
+        ]);
         const currentSubscriptionRef = React__namespace.useRef(null);
+        const updateState = React__namespace.useCallback((callback)=>{
+            const prev = resultRef.current;
+            const next = resultRef.current = callback(prev);
+            let shouldUpdate = false;
+            for (const key of trackedProps){
+                if (prev[key] !== next[key]) {
+                    shouldUpdate = true;
+                    break;
+                }
+            }
+            if (shouldUpdate) {
+                setState(trackResult(next, addTrackedProp));
+            }
+        }, [
+            addTrackedProp,
+            trackedProps
+        ]);
         const reset = React__namespace.useCallback(()=>{
             // unsubscribe from the previous subscription
-            currentSubscriptionRef.current?.();
-            updateState(getInitialState);
+            currentSubscriptionRef.current?.unsubscribe();
             if (!enabled) {
+                updateState(()=>({
+                        ...initialStateIdle,
+                        reset
+                    }));
                 return;
             }
-            let isStopped = false;
+            updateState(()=>({
+                    ...initialStateConnecting,
+                    reset
+                }));
             const subscription = client.subscription(path.join('.'), input ?? undefined, {
                 onStarted: ()=>{
-                    if (!isStopped) {
-                        optsRef.current.onStarted?.();
-                        updateState((prev)=>({
-                                ...prev,
-                                status: 'pending',
-                                error: null
-                            }));
-                    }
+                    optsRef.current.onStarted?.();
+                    updateState((prev)=>({
+                            ...prev,
+                            status: 'pending',
+                            error: null
+                        }));
                 },
                 onData: (data)=>{
-                    if (!isStopped) {
-                        optsRef.current.onData?.(data);
-                        updateState((prev)=>({
-                                ...prev,
-                                status: 'pending',
-                                data,
-                                error: null
-                            }));
-                    }
+                    optsRef.current.onData?.(data);
+                    updateState((prev)=>({
+                            ...prev,
+                            status: 'pending',
+                            data,
+                            error: null
+                        }));
                 },
                 onError: (error)=>{
-                    if (!isStopped) {
-                        optsRef.current.onError?.(error);
-                        updateState((prev)=>({
-                                ...prev,
-                                status: 'error',
-                                error
-                            }));
-                    }
+                    optsRef.current.onError?.(error);
+                    updateState((prev)=>({
+                            ...prev,
+                            status: 'error',
+                            error
+                        }));
                 },
                 onConnectionStateChange: (result)=>{
-                    const delta = {
-                        status: result.state,
-                        error: result.error
-                    };
                     updateState((prev)=>{
-                        return {
+                        switch(result.state){
+                            case 'idle':
+                                return {
+                                    ...prev,
+                                    status: result.state,
+                                    error: null,
+                                    data: undefined
+                                };
+                            case 'connecting':
+                                return {
+                                    ...prev,
+                                    error: result.error,
+                                    status: result.state
+                                };
+                            case 'pending':
+                                // handled when data is received
+                                return prev;
+                        }
+                    });
+                },
+                onComplete: ()=>{
+                    optsRef.current.onComplete?.();
+                    // In the case of WebSockets, the connection might not be idle so `onConnectionStateChange` will not be called until the connection is closed.
+                    // In this case, we need to set the state to idle manually.
+                    updateState((prev)=>({
                             ...prev,
-                            ...delta
-                        };
-                    });
+                            status: 'idle',
+                            error: null,
+                            data: undefined
+                        }));
+                // (We might want to add a `connectionState` to the state to track the connection state separately)
                 }
             });
-            currentSubscriptionRef.current = ()=>{
-                isStopped = true;
-                subscription.unsubscribe();
-            };
+            currentSubscriptionRef.current = subscription;
         // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [
+            client,
             queryKey,
-            enabled
-        ]);
-        const getInitialState = React__namespace.useCallback(()=>{
-            return enabled ? {
-                data: undefined,
-                error: null,
-                status: 'connecting',
-                reset
-            } : {
-                data: undefined,
-                error: null,
-                status: 'idle',
-                reset
-            };
-        }, [
             enabled,
-            reset
+            updateState
         ]);
-        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?.();
+                currentSubscriptionRef.current?.unsubscribe();
             };
         }, [
-            reset,
-            enabled
+            reset
         ]);
+        const resultRef = React__namespace.useRef(enabled ? {
+            ...initialStateConnecting,
+            reset
+        } : {
+            ...initialStateIdle,
+            reset
+        });
+        const [state, setState] = React__namespace.useState(trackResult(resultRef.current, addTrackedProp));
         return state;
@@ -348,0 +369,0 @@ }

dist/shared/hooks/types.d.ts

@@ -73,2 +73,6 @@ import type { DefinedUseQueryResult, FetchInfiniteQueryOptions, FetchQueryOptions, InfiniteData, InfiniteQueryObserverSuccessResult, InitialDataFunction, QueryObserverSuccessResult, QueryOptions, UseBaseQueryOptions, UseInfiniteQueryOptions, UseInfiniteQueryResult, UseMutationOptions, UseMutationResult, UseQueryResult, UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult, UseSuspenseQueryOptions, UseSuspenseQueryResult } from '@tanstack/react-query';
     onError?: (err: TError) => void;
+    /**
+     * Called when the subscription is completed on the server
+     */
+    onComplete?: () => void;
 }
@@ -75,0 +79,0 @@ export interface TRPCSubscriptionBaseResult<TOutput, TError> {

package.json

 {
   "name": "@trpc/react-query",
-  "version": "11.0.0-rc.748+b19e7e9a6",
+  "version": "11.0.0-rc.749+5da722f36",
   "description": "The tRPC React library",
@@ -68,4 +68,4 @@ "author": "KATT",
     "@tanstack/react-query": "^5.62.8",
-    "@trpc/client": "11.0.0-rc.748+b19e7e9a6",
-    "@trpc/server": "11.0.0-rc.748+b19e7e9a6",
+    "@trpc/client": "11.0.0-rc.749+5da722f36",
+    "@trpc/server": "11.0.0-rc.749+5da722f36",
     "react": ">=18.2.0",
@@ -77,4 +77,4 @@ "react-dom": ">=18.2.0",
     "@tanstack/react-query": "^5.62.8",
-    "@trpc/client": "11.0.0-rc.748+b19e7e9a6",
-    "@trpc/server": "11.0.0-rc.748+b19e7e9a6",
+    "@trpc/client": "11.0.0-rc.749+5da722f36",
+    "@trpc/server": "11.0.0-rc.749+5da722f36",
     "@types/express": "^5.0.0",
@@ -100,3 +100,3 @@ "@types/node": "^22.9.0",
   ],
-  "gitHead": "b19e7e9a640511f49de05bcd4436dc0a514f5e0f"
+  "gitHead": "5da722f36dbfe6e1031ae16be7b3264532a5af40"
 }

src/shared/hooks/types.ts

@@ -182,2 +182,6 @@ import type {
   onError?: (err: TError) => void;
+  /**
+   * Called when the subscription is completed on the server
+   */
+  onComplete?: () => void;
 }
@@ -184,0 +188,0 @@

New alerts

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

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

362447

increased by0.84%

Lines of code

8153

increased by0.68%

No dependency changes