From dfda94e931a070bc65ee84d40c2462aa6bfad5bc Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 4 Jul 2024 13:23:58 +0200 Subject: [PATCH] Apply suggestions from code review Co-authored-by: Jerel Miller --- src/react/hooks/useLazyQuery.ts | 3 +- src/react/hooks/useQuery.ts | 73 +++++++++++++-------------------- 2 files changed, 31 insertions(+), 45 deletions(-) diff --git a/src/react/hooks/useLazyQuery.ts b/src/react/hooks/useLazyQuery.ts index 35b89ca6950..3a396fece8c 100644 --- a/src/react/hooks/useLazyQuery.ts +++ b/src/react/hooks/useLazyQuery.ts @@ -25,6 +25,7 @@ import { toQueryResult, useQueryInternals, } from "./useQuery.js"; +import { useIsomorphicLayoutEffect } from "./internal/useIsomorphicLayoutEffect.js"; // The following methods, when called will execute the query, regardless of // whether the useLazyQuery execute function was called before. @@ -188,7 +189,7 @@ export function useLazyQuery< ); const executeRef = React.useRef(execute); - React.useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { executeRef.current = execute; }); diff --git a/src/react/hooks/useQuery.ts b/src/react/hooks/useQuery.ts index da4321d93f7..098ca360d70 100644 --- a/src/react/hooks/useQuery.ts +++ b/src/react/hooks/useQuery.ts @@ -193,12 +193,7 @@ function useInternalState< (renderPromises && renderPromises.getSSRObservable(makeWatchQueryOptions())) || client.watchQuery( - getObsQueryOptions( - undefined, - client, - options, - makeWatchQueryOptions() - ) + getObsQueryOptions(void 0, client, options, makeWatchQueryOptions()) ), resultData: { // Reuse previousData from previous InternalState (if any) to provide @@ -267,7 +262,7 @@ export function useQueryInternals< const renderPromises = React.useContext(getApolloContext()).renderPromises; const isSyncSSR = !!renderPromises; const disableNetworkFetches = client.disableNetworkFetches; - const ssrAllowed = !(options.ssr === false || options.skip); + const ssrAllowed = options.ssr !== false && !options.skip; const partialRefetch = options.partialRefetch; const makeWatchQueryOptions = createMakeWatchQueryOptions( @@ -310,11 +305,7 @@ export function useQueryInternals< isSyncSSR ); - useRegisterSSRObservable( - observable, - renderPromises, - ssrAllowed - ); + useRegisterSSRObservable(observable, renderPromises, ssrAllowed); const result = useObservableSubscriptionResult( resultData, @@ -349,7 +340,6 @@ function useObservableSubscriptionResult< disableNetworkFetches: boolean, partialRefetch: boolean | undefined, skipSubscribing: boolean, - callbacks: { onCompleted: (data: TData) => void; onError: (error: ApolloError) => void; @@ -483,11 +473,8 @@ function useObservableSubscriptionResult< ); } -function useRegisterSSRObservable< - TData = any, - TVariables extends OperationVariables = OperationVariables, ->( - observable: ObsQueryWithMeta, +function useRegisterSSRObservable( + observable: ObsQueryWithMeta, renderPromises: RenderPromises | undefined, ssrAllowed: boolean ) { @@ -569,32 +556,30 @@ function useResubscribeIfNecessary< options: QueryHookOptions, NoInfer>, watchQueryOptions: Readonly> ) { - { - if ( - observable[lastWatchOptions] && - !equal(observable[lastWatchOptions], watchQueryOptions) - ) { - // Though it might be tempting to postpone this reobserve call to the - // useEffect block, we need getCurrentResult to return an appropriate - // loading:true result synchronously (later within the same call to - // useQuery). Since we already have this.observable here (not true for - // the very first call to useQuery), we are not initiating any new - // subscriptions, though it does feel less than ideal that reobserve - // (potentially) kicks off a network request (for example, when the - // variables have changed), which is technically a side-effect. - observable.reobserve( - getObsQueryOptions(observable, client, options, watchQueryOptions) - ); - - // Make sure getCurrentResult returns a fresh ApolloQueryResult, - // but save the current data as this.previousData, just like setResult - // usually does. - resultData.previousData = - resultData.current?.data || resultData.previousData; - resultData.current = void 0; - } - observable[lastWatchOptions] = watchQueryOptions; + if ( + observable[lastWatchOptions] && + !equal(observable[lastWatchOptions], watchQueryOptions) + ) { + // Though it might be tempting to postpone this reobserve call to the + // useEffect block, we need getCurrentResult to return an appropriate + // loading:true result synchronously (later within the same call to + // useQuery). Since we already have this.observable here (not true for + // the very first call to useQuery), we are not initiating any new + // subscriptions, though it does feel less than ideal that reobserve + // (potentially) kicks off a network request (for example, when the + // variables have changed), which is technically a side-effect. + observable.reobserve( + getObsQueryOptions(observable, client, options, watchQueryOptions) + ); + + // Make sure getCurrentResult returns a fresh ApolloQueryResult, + // but save the current data as this.previousData, just like setResult + // usually does. + resultData.previousData = + resultData.current?.data || resultData.previousData; + resultData.current = void 0; } + observable[lastWatchOptions] = watchQueryOptions; } /* @@ -724,7 +709,7 @@ function setResult( ); } -function handleErrorOrCompleted( +function handleErrorOrCompleted( result: ApolloQueryResult, previousResult: ApolloQueryResult | undefined, callbacks: Callbacks