@trpc/react-query 11.0.0-alpha-tmp-subscription-connection-state.488 → 11.0.0-alpha-tmp-12-06-react.665

package/dist/shared/hooks/createHooksInternal.js

@@ -7,10 +7,9 @@ var React = require('react');
 var context = require('../../internals/context.js');
 var getClientArgs = require('../../internals/getClientArgs.js');
 var getQueryKey = require('../../internals/getQueryKey.js');
-var useHookResult = require('../../internals/useHookResult.js');
+var trpcResult = require('../../internals/trpcResult.js');
 var createUtilityFunctions = require('../../utils/createUtilityFunctions.js');
 var useQueriesProxy = require('../proxy/useQueriesProxy.js');
-var types = require('./types.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -49,7 +48,7 @@ const trackResult = (result, onTrackResult)=>{
         return client.createTRPCUntypedClient(opts);
     };
     const TRPCProvider = (props)=>{
-        const { abortOnUnmount =false , client , queryClient , ssrContext  } = props;
+        const { abortOnUnmount = false, client, queryClient, ssrContext } = props;
         const [ssrState, setSSRState] = React__namespace.useState(props.ssrState ?? false);
         const fns = React__namespace.useMemo(()=>createUtilityFunctions.createUtilityFunctions({
                 client,
@@ -91,9 +90,9 @@ const trackResult = (result, onTrackResult)=>{
     }
     /**
    * Hack to make sure errors return `status`='error` when doing SSR
-   * @link https://github.com/trpc/trpc/pull/1645
+   * @see https://github.com/trpc/trpc/pull/1645
    */ function useSSRQueryOptionsIfNeeded(queryKey, opts) {
-        const { queryClient , ssrState  } = useContext();
+        const { queryClient, ssrState } = useContext();
         return ssrState && ssrState !== 'mounted' && queryClient.getQueryCache().find({
             queryKey
         })?.state.status === 'error' ? {
@@ -103,7 +102,7 @@ const trackResult = (result, onTrackResult)=>{
     }
     function useQuery(path, input, opts) {
         const context = useContext();
-        const { abortOnUnmount , client , ssrState , queryClient , prefetchQuery  } = context;
+        const { abortOnUnmount, client, ssrState, queryClient, prefetchQuery } = context;
         const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'query');
         const defaultOpts = queryClient.getQueryDefaults(queryKey);
         const isInputSkipToken = input === reactQuery.skipToken;
@@ -134,33 +133,37 @@ const trackResult = (result, onTrackResult)=>{
                 };
                 const result = await client.query(...getClientArgs.getClientArgs(queryKey, actualOpts));
                 if (unstableCoreDoNotImport.isAsyncIterable(result)) {
-                    const queryCache = queryClient.getQueryCache();
-                    const query = queryCache.build(queryFunctionContext.queryKey, {
-                        queryKey
-                    });
-                    query.setState({
-                        data: [],
-                        status: 'success'
-                    });
-                    const aggregate = [];
-                    for await (const value of result){
-                        aggregate.push(value);
-                        query.setState({
-                            data: [
-                                ...aggregate
-                            ]
-                        });
-                    }
-                    return aggregate;
+                    return trpcResult.buildQueryFromAsyncIterable(result, queryClient, queryKey);
                 }
                 return result;
             }
         }, queryClient);
-        hook.trpc = useHookResult.useHookResult({
+        hook.trpc = trpcResult.useHookResult({
             path
         });
         return hook;
     }
+    function usePrefetchQuery(path, input, opts) {
+        const context = useContext();
+        const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'query');
+        const isInputSkipToken = input === reactQuery.skipToken;
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? config?.abortOnUnmount ?? context.abortOnUnmount;
+        reactQuery.usePrefetchQuery({
+            ...opts,
+            queryKey: queryKey,
+            queryFn: isInputSkipToken ? input : (queryFunctionContext)=>{
+                const actualOpts = {
+                    trpc: {
+                        ...opts?.trpc,
+                        ...shouldAbortOnUnmount ? {
+                            signal: queryFunctionContext.signal
+                        } : {}
+                    }
+                };
+                return context.client.query(...getClientArgs.getClientArgs(queryKey, actualOpts));
+            }
+        });
+    }
     function useSuspenseQuery(path, input, opts) {
         const context = useContext();
         const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'query');
@@ -170,7 +173,9 @@ const trackResult = (result, onTrackResult)=>{
             queryKey: queryKey,
             queryFn: (queryFunctionContext)=>{
                 const actualOpts = {
+                    ...opts,
                     trpc: {
+                        ...opts?.trpc,
                         ...shouldAbortOnUnmount ? {
                             signal: queryFunctionContext.signal
                         } : {
@@ -181,7 +186,7 @@ const trackResult = (result, onTrackResult)=>{
                 return context.client.query(...getClientArgs.getClientArgs(queryKey, actualOpts));
             }
         }, context.queryClient);
-        hook.trpc = useHookResult.useHookResult({
+        hook.trpc = trpcResult.useHookResult({
             path
         });
         return [
@@ -190,8 +195,7 @@ const trackResult = (result, onTrackResult)=>{
         ];
     }
     function useMutation(path, opts) {
-        const { client  } = useContext();
-        const queryClient = reactQuery.useQueryClient();
+        const { client, queryClient } = useContext();
         const mutationKey = getQueryKey.getMutationKeyInternal(path);
         const defaultOpts = queryClient.defaultMutationOptions(queryClient.getMutationDefaults(mutationKey));
         const hook = reactQuery.useMutation({
@@ -214,7 +218,7 @@ const trackResult = (result, onTrackResult)=>{
                 });
             }
         }, queryClient);
-        hook.trpc = useHookResult.useHookResult({
+        hook.trpc = trpcResult.useHookResult({
             path
         });
         return hook;
@@ -222,37 +226,18 @@ const trackResult = (result, onTrackResult)=>{
     /* istanbul ignore next -- @preserve */ function useSubscription(path, input, opts) {
         const enabled = opts?.enabled ?? input !== reactQuery.skipToken;
         const queryKey = reactQuery.hashKey(getQueryKey.getQueryKeyInternal(path, input, 'any'));
+        const { client } = useContext();
+        const optsRef = React__namespace.useRef(opts);
+        optsRef.current = opts;
         const trackedProps = React__namespace.useRef(new Set([]));
         const addTrackedProp = React__namespace.useCallback((key)=>{
             trackedProps.current.add(key);
         }, []);
-        // const restart = React.useRef<restartSubscriptionFn<unknown>>(() => {
-        //   throw new Error('not implemented');
-        // });
-        const currentResult = React__namespace.useRef(enabled ? types.getStartingResult() : types.getIdleResult());
-        const [subscriptionState, setSubscriptionState] = React__namespace.useState(trackResult(currentResult.current, addTrackedProp));
-        const updateSubscriptionState = React__namespace.useCallback((opts)=>{
-            const oldResult = currentResult.current;
-            const newResult = typeof opts === 'function' ? opts(currentResult.current) : opts;
-            currentResult.current = newResult;
-            let shouldUpdate = false;
-            for (const key of trackedProps.current){
-                if (oldResult[key] !== newResult[key]) {
-                    shouldUpdate = true;
-                    break;
-                }
-            }
-            if (shouldUpdate) {
-                setSubscriptionState(trackResult(newResult, addTrackedProp));
-                return;
-            }
-        }, [
-            addTrackedProp
-        ]);
-        const { client  } = useContext();
-        const optsRef = React__namespace.useRef(opts);
-        optsRef.current = opts;
-        React__namespace.useEffect(()=>{
+        const currentSubscriptionRef = React__namespace.useRef(null);
+        const reset = React__namespace.useCallback(()=>{
+            // unsubscribe from the previous subscription
+            currentSubscriptionRef.current?.();
+            updateState(getInitialState);
             if (!enabled) {
                 return;
             }
@@ -261,60 +246,107 @@ const trackResult = (result, onTrackResult)=>{
                 onStarted: ()=>{
                     if (!isStopped) {
                         optsRef.current.onStarted?.();
+                        updateState((prev)=>({
+                                ...prev,
+                                status: 'pending',
+                                error: null
+                            }));
                     }
                 },
                 onData: (data)=>{
                     if (!isStopped) {
-                        optsRef.current.onData(data);
-                        updateSubscriptionState((prev)=>{
-                            if (prev.isPending) {
-                                return types.getPendingResult(prev, data);
-                            }
-                            return prev;
-                        });
+                        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
+                            }));
                     }
                 },
-                onStateChange: (state)=>{
-                    if (state.state === 'idle') {
-                        updateSubscriptionState(types.getIdleResult());
-                        return;
-                    }
-                    if (state.state === 'connecting') {
-                        updateSubscriptionState((prev)=>{
-                            return types.getConnectingResult(prev, state.data ?? null);
-                        });
-                        return;
-                    }
-                    if (state.state === 'pending') {
-                        updateSubscriptionState((prev)=>types.getPendingResult(prev));
-                    }
-                    if (state.state === 'error') {
-                        updateSubscriptionState((prev)=>{
-                            return types.getErrorResult(prev, state.data);
-                        });
-                    }
+                onConnectionStateChange: (result)=>{
+                    const delta = {
+                        status: result.state,
+                        error: result.error
+                    };
+                    updateState((prev)=>{
+                        return {
+                            ...prev,
+                            ...delta
+                        };
+                    });
                 }
             });
-            // const effectRestart = restart.current;
-            return ()=>{
+            currentSubscriptionRef.current = ()=>{
                 isStopped = true;
                 subscription.unsubscribe();
-                updateSubscriptionState(types.getIdleResult());
             };
         // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [
             queryKey,
             enabled
         ]);
-        return subscriptionState;
+        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;
     }
     function useInfiniteQuery(path, input, opts) {
-        const { client , ssrState , prefetchInfiniteQuery , queryClient , abortOnUnmount ,  } = useContext();
+        const { client, ssrState, prefetchInfiniteQuery, queryClient, abortOnUnmount } = useContext();
         const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'infinite');
         const defaultOpts = queryClient.getQueryDefaults(queryKey);
         const isInputSkipToken = input === reactQuery.skipToken;
@@ -355,11 +387,43 @@ const trackResult = (result, onTrackResult)=>{
                 }));
             }
         }, queryClient);
-        hook.trpc = useHookResult.useHookResult({
+        hook.trpc = trpcResult.useHookResult({
             path
         });
         return hook;
     }
+    function usePrefetchInfiniteQuery(path, input, opts) {
+        const context = useContext();
+        const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'infinite');
+        const defaultOpts = context.queryClient.getQueryDefaults(queryKey);
+        const isInputSkipToken = input === reactQuery.skipToken;
+        const ssrOpts = useSSRQueryOptionsIfNeeded(queryKey, {
+            ...defaultOpts,
+            ...opts
+        });
+        // request option should take priority over global
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? context.abortOnUnmount;
+        reactQuery.usePrefetchInfiniteQuery({
+            ...opts,
+            initialPageParam: opts.initialCursor ?? null,
+            queryKey,
+            queryFn: isInputSkipToken ? input : (queryFunctionContext)=>{
+                const actualOpts = {
+                    ...ssrOpts,
+                    trpc: {
+                        ...ssrOpts?.trpc,
+                        ...shouldAbortOnUnmount ? {
+                            signal: queryFunctionContext.signal
+                        } : {}
+                    }
+                };
+                return context.client.query(...getClientArgs.getClientArgs(queryKey, actualOpts, {
+                    pageParam: queryFunctionContext.pageParam ?? opts.initialCursor,
+                    direction: queryFunctionContext.direction
+                }));
+            }
+        });
+    }
     function useSuspenseInfiniteQuery(path, input, opts) {
         const context = useContext();
         const queryKey = getQueryKey.getQueryKeyInternal(path, input, 'infinite');
@@ -390,7 +454,7 @@ const trackResult = (result, onTrackResult)=>{
                 }));
             }
         }, context.queryClient);
-        hook.trpc = useHookResult.useHookResult({
+        hook.trpc = trpcResult.useHookResult({
             path
         });
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -400,7 +464,7 @@ const trackResult = (result, onTrackResult)=>{
         ];
     }
     const useQueries = (queriesCallback)=>{
-        const { ssrState , queryClient , prefetchQuery , client  } = useContext();
+        const { ssrState, queryClient, prefetchQuery, client } = useContext();
         const proxy = useQueriesProxy.createUseQueries(client);
         const queries = queriesCallback(proxy);
         if (typeof window === 'undefined' && ssrState === 'prepass') {
@@ -421,12 +485,13 @@ const trackResult = (result, onTrackResult)=>{
         }, queryClient);
     };
     const useSuspenseQueries = (queriesCallback)=>{
-        const { queryClient , client  } = useContext();
+        const { queryClient, client } = useContext();
         const proxy = useQueriesProxy.createUseQueries(client);
         const queries = queriesCallback(proxy);
         const hook = reactQuery.useSuspenseQueries({
             queries: queries.map((query)=>({
                     ...query,
+                    queryFn: query.queryFn,
                     queryKey: query.queryKey
                 }))
         }, queryClient);
@@ -441,12 +506,14 @@ const trackResult = (result, onTrackResult)=>{
         useContext,
         useUtils: useContext,
         useQuery,
+        usePrefetchQuery,
         useSuspenseQuery,
         useQueries,
         useSuspenseQueries,
         useMutation,
         useSubscription,
         useInfiniteQuery,
+        usePrefetchInfiniteQuery,
         useSuspenseInfiniteQuery
     };
 }