@apollo/client 3.10.4 → 3.10.6

package/react/hooks/hooks.cjs.native.js

@@ -95,15 +95,28 @@ function useDeepMemo(memoFn, deps) {
     return ref.current.value;
 }
 
-function getRenderDispatcher() {
-    var _a, _b;
-    return (_b = (_a = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _a === void 0 ? void 0 : _a.ReactCurrentDispatcher) === null || _b === void 0 ? void 0 : _b.current;
-}
-var RenderDispatcher = null;
+var useIsomorphicLayoutEffect = utilities.canUseDOM ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+
+var Ctx;
+function noop() { }
 function useRenderGuard() {
-    RenderDispatcher = getRenderDispatcher();
-    return React__namespace.useCallback(function () {
-        return (RenderDispatcher != null && RenderDispatcher === getRenderDispatcher());
+    if (!Ctx) {
+        Ctx = React__namespace.createContext(null);
+    }
+    return React__namespace.useCallback(
+ function () {
+        var orig = console.error;
+        try {
+            console.error = noop;
+            React__namespace["useContext" ](Ctx);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+        finally {
+            console.error = orig;
+        }
     }, []);
 }
 
@@ -148,14 +161,16 @@ function _useQuery(query, options) {
     return useInternalState(useApolloClient(options.client), query).useQuery(options);
 }
 function useInternalState(client, query) {
-    var stateRef = React__namespace.useRef();
-    if (!stateRef.current ||
-        client !== stateRef.current.client ||
-        query !== stateRef.current.query) {
-        stateRef.current = new InternalState(client, query, stateRef.current);
+    var forceUpdateState = React__namespace.useReducer(function (tick) { return tick + 1; }, 0)[1];
+    function createInternalState(previous) {
+        return Object.assign(new InternalState(client, query, previous), {
+            forceUpdateState: forceUpdateState,
+        });
+    }
+    var _a = React__namespace.useState(createInternalState), state = _a[0], updateState = _a[1];
+    if (client !== state.client || query !== state.query) {
+        updateState((state = createInternalState(state)));
     }
-    var state = stateRef.current;
-    state.forceUpdateState = React__namespace.useReducer(function (tick) { return tick + 1; }, 0)[1];
     return state;
 }
 var InternalState =  (function () {
@@ -218,7 +233,8 @@ var InternalState =  (function () {
         this.renderPromises = React__namespace.useContext(context.getApolloContext()).renderPromises;
         this.useOptions(options);
         var obsQuery = this.useObservableQuery();
-        var result = useSyncExternalStore(React__namespace.useCallback(function (handleStoreChange) {
+        var result = useSyncExternalStore(
+        React__namespace.useCallback(function (handleStoreChange) {
             if (_this.renderPromises) {
                 return function () { };
             }
@@ -453,17 +469,15 @@ function useLazyQuery(query, options) {
     var useQueryResult = internalState.useQuery(tslib.__assign(tslib.__assign({}, merged), { skip: !execOptionsRef.current }));
     var initialFetchPolicy = useQueryResult.observable.options.initialFetchPolicy ||
         internalState.getDefaultFetchPolicy();
-    var result = Object.assign(useQueryResult, {
-        called: !!execOptionsRef.current,
-    });
+    var forceUpdateState = internalState.forceUpdateState, obsQueryFields = internalState.obsQueryFields;
     var eagerMethods = React__namespace.useMemo(function () {
         var eagerMethods = {};
         var _loop_1 = function (key) {
-            var method = result[key];
+            var method = obsQueryFields[key];
             eagerMethods[key] = function () {
                 if (!execOptionsRef.current) {
                     execOptionsRef.current = Object.create(null);
-                    internalState.forceUpdateState();
+                    forceUpdateState();
                 }
                 return method.apply(this, arguments);
             };
@@ -473,8 +487,9 @@ function useLazyQuery(query, options) {
             _loop_1(key);
         }
         return eagerMethods;
-    }, []);
-    Object.assign(result, eagerMethods);
+    }, [forceUpdateState, obsQueryFields]);
+    var called = !!execOptionsRef.current;
+    var result = React__namespace.useMemo(function () { return (tslib.__assign(tslib.__assign(tslib.__assign({}, useQueryResult), eagerMethods), { called: called })); }, [useQueryResult, eagerMethods, called]);
     var execute = React__namespace.useCallback(function (executeOptions) {
         execOptionsRef.current =
             executeOptions ? tslib.__assign(tslib.__assign({}, executeOptions), { fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy }) : {
@@ -486,7 +501,7 @@ function useLazyQuery(query, options) {
             .then(function (queryResult) { return Object.assign(queryResult, eagerMethods); });
         promise.catch(function () { });
         return promise;
-    }, []);
+    }, [eagerMethods, initialFetchPolicy, internalState]);
     return [execute, result];
 }
 
@@ -506,9 +521,9 @@ function useMutation(mutation, options) {
         mutation: mutation,
         options: options,
     });
-    {
+    useIsomorphicLayoutEffect(function () {
         Object.assign(ref.current, { client: client, options: options, mutation: mutation });
-    }
+    });
     var execute = React__namespace.useCallback(function (executeOptions) {
         if (executeOptions === void 0) { executeOptions = {}; }
         var _a = ref.current, options = _a.options, mutation = _a.mutation;
@@ -582,15 +597,20 @@ function useMutation(mutation, options) {
     }, []);
     var reset = React__namespace.useCallback(function () {
         if (ref.current.isMounted) {
-            var result_3 = { called: false, loading: false, client: client };
+            var result_3 = {
+                called: false,
+                loading: false,
+                client: ref.current.client,
+            };
             Object.assign(ref.current, { mutationId: 0, result: result_3 });
             setResult(result_3);
         }
     }, []);
     React__namespace.useEffect(function () {
-        ref.current.isMounted = true;
+        var current = ref.current;
+        current.isMounted = true;
         return function () {
-            ref.current.isMounted = false;
+            current.isMounted = false;
         };
     }, []);
     return [execute, tslib.__assign({ reset: reset }, result)];
@@ -846,11 +866,11 @@ function _useSuspenseQuery(query, options) {
         };
     }, [queryRef.result]);
     var result = fetchPolicy === "standby" ? skipResult : __use(promise);
-    var fetchMore = React__namespace.useCallback((function (options) {
+    var fetchMore = React__namespace.useCallback(function (options) {
         var promise = queryRef.fetchMore(options);
         setPromise([queryRef.key, queryRef.promise]);
         return promise;
-    }), [queryRef]);
+    }, [queryRef]);
     var refetch = React__namespace.useCallback(function (variables) {
         var promise = queryRef.refetch(variables);
         setPromise([queryRef.key, queryRef.promise]);
@@ -1013,10 +1033,17 @@ function useLoadableQuery(query, options) {
             return client.watchQuery(tslib.__assign(tslib.__assign({}, watchQueryOptions), { variables: variables }));
         });
         setQueryRef(internal.wrapQueryRef(queryRef));
-    }, [query, queryKey, suspenseCache, watchQueryOptions, calledDuringRender]);
+    }, [
+        query,
+        queryKey,
+        suspenseCache,
+        watchQueryOptions,
+        calledDuringRender,
+        client,
+    ]);
     var reset = React__namespace.useCallback(function () {
         setQueryRef(null);
-    }, [queryRef]);
+    }, []);
     return [loadQuery, queryRef, { fetchMore: fetchMore, refetch: refetch, reset: reset }];
 }
 
@@ -1071,7 +1098,7 @@ function _useReadQuery(queryRef) {
             internal.updateWrappedQueryRef(queryRef, promise);
             forceUpdate();
         });
-    }, [internalQueryRef]), getPromise, getPromise);
+    }, [internalQueryRef, queryRef]), getPromise, getPromise);
     var result = __use(promise);
     return React__namespace.useMemo(function () {
         return {

package/react/hooks/internal/useRenderGuard.js

@@ -1,17 +1,42 @@
 import * as React from "rehackt";
-function getRenderDispatcher() {
-    var _a, _b;
-    return (_b = (_a = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _a === void 0 ? void 0 : _a.ReactCurrentDispatcher) === null || _b === void 0 ? void 0 : _b.current;
-}
-var RenderDispatcher = null;
-/*
-Relay does this too, so we hope this is safe.
-https://github.com/facebook/relay/blob/8651fbca19adbfbb79af7a3bc40834d105fd7747/packages/react-relay/relay-hooks/loadQuery.js#L90-L98
-*/
+var Ctx;
+function noop() { }
 export function useRenderGuard() {
-    RenderDispatcher = getRenderDispatcher();
-    return React.useCallback(function () {
-        return (RenderDispatcher != null && RenderDispatcher === getRenderDispatcher());
+    if (!Ctx) {
+        // we want the intialization to be lazy because `createContext` would error on import in a RSC
+        Ctx = React.createContext(null);
+    }
+    return React.useCallback(
+    /**
+     * @returns true if the hook was called during render
+     */ function () {
+        var orig = console.error;
+        try {
+            console.error = noop;
+            /**
+             * `useContext` can be called conditionally during render, so this is safe.
+             * (Also, during render we would want to throw as a reaction to this anyways, so it
+             * wouldn't even matter if we got the order of hooks mixed up...)
+             *
+             * They cannot however be called outside of Render, and that's what we're testing here.
+             *
+             * Different versions of React have different behaviour on an invalid hook call:
+             *
+             * React 16.8 - 17: throws an error
+             * https://github.com/facebook/react/blob/2b93d686e359c7afa299e2ec5cf63160a32a1155/packages/react/src/ReactHooks.js#L18-L26
+             *
+             * React 18 & 19: `console.error` in development, then `resolveDispatcher` returns `null` and a member access on `null` throws.
+             * https://github.com/facebook/react/blob/58e8304483ebfadd02a295339b5e9a989ac98c6e/packages/react/src/ReactHooks.js#L28-L35
+             */
+            React["useContext" /* hide this from the linter */](Ctx);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+        finally {
+            console.error = orig;
+        }
     }, []);
 }
 //# sourceMappingURL=useRenderGuard.js.map

package/react/hooks/internal/useRenderGuard.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRenderGuard.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/useRenderGuard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,SAAS,mBAAmB;;IAC1B,OAAO,MAAA,MAAC,KAAa,CAAC,kDAAkD,0CACpE,sBAAsB,0CAAE,OAAO,CAAC;AACtC,CAAC;AAED,IAAI,gBAAgB,GAAY,IAAI,CAAC;AAErC;;;EAGE;AACF,MAAM,UAAU,cAAc;IAC5B,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAEzC,OAAO,KAAK,CAAC,WAAW,CAAC;QACvB,OAAO,CACL,gBAAgB,IAAI,IAAI,IAAI,gBAAgB,KAAK,mBAAmB,EAAE,CACvE,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC","sourcesContent":["import * as React from \"rehackt\";\n\nfunction getRenderDispatcher() {\n  return (React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED\n    ?.ReactCurrentDispatcher?.current;\n}\n\nlet RenderDispatcher: unknown = null;\n\n/*\nRelay does this too, so we hope this is safe.\nhttps://github.com/facebook/relay/blob/8651fbca19adbfbb79af7a3bc40834d105fd7747/packages/react-relay/relay-hooks/loadQuery.js#L90-L98\n*/\nexport function useRenderGuard() {\n  RenderDispatcher = getRenderDispatcher();\n\n  return React.useCallback(() => {\n    return (\n      RenderDispatcher != null && RenderDispatcher === getRenderDispatcher()\n    );\n  }, []);\n}\n"]}
+{"version":3,"file":"useRenderGuard.js","sourceRoot":"","sources":["../../../../src/react/hooks/internal/useRenderGuard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,IAAI,GAAwB,CAAC;AAE7B,SAAS,IAAI,KAAI,CAAC;AAClB,MAAM,UAAU,cAAc;IAC5B,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,8FAA8F;QAC9F,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,OAAO,KAAK,CAAC,WAAW;IACtB;;OAEG,CAAC;QACF,IAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC;YACH,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;YAErB;;;;;;;;;;;;;;eAcG;YACH,KAAK,CAAC,YAAY,CAAC,+BAA+B,CAAC,CAAC,GAAG,CAAC,CAAC;YACzD,OAAO,IAAI,CAAC;QACd,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,KAAK,CAAC;QACf,CAAC;gBAAS,CAAC;YACT,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;QACvB,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAC;AACJ,CAAC","sourcesContent":["import * as React from \"rehackt\";\n\nlet Ctx: React.Context<null>;\n\nfunction noop() {}\nexport function useRenderGuard() {\n  if (!Ctx) {\n    // we want the intialization to be lazy because `createContext` would error on import in a RSC\n    Ctx = React.createContext(null);\n  }\n\n  return React.useCallback(\n    /**\n     * @returns true if the hook was called during render\n     */ () => {\n      const orig = console.error;\n      try {\n        console.error = noop;\n\n        /**\n         * `useContext` can be called conditionally during render, so this is safe.\n         * (Also, during render we would want to throw as a reaction to this anyways, so it\n         * wouldn't even matter if we got the order of hooks mixed up...)\n         *\n         * They cannot however be called outside of Render, and that's what we're testing here.\n         *\n         * Different versions of React have different behaviour on an invalid hook call:\n         *\n         * React 16.8 - 17: throws an error\n         * https://github.com/facebook/react/blob/2b93d686e359c7afa299e2ec5cf63160a32a1155/packages/react/src/ReactHooks.js#L18-L26\n         *\n         * React 18 & 19: `console.error` in development, then `resolveDispatcher` returns `null` and a member access on `null` throws.\n         * https://github.com/facebook/react/blob/58e8304483ebfadd02a295339b5e9a989ac98c6e/packages/react/src/ReactHooks.js#L28-L35\n         */\n        React[\"useContext\" /* hide this from the linter */](Ctx);\n        return true;\n      } catch (e) {\n        return false;\n      } finally {\n        console.error = orig;\n      }\n    },\n    []\n  );\n}\n"]}

package/react/hooks/useLazyQuery.js

@@ -63,19 +63,17 @@ export function useLazyQuery(query, options) {
     var useQueryResult = internalState.useQuery(__assign(__assign({}, merged), { skip: !execOptionsRef.current }));
     var initialFetchPolicy = useQueryResult.observable.options.initialFetchPolicy ||
         internalState.getDefaultFetchPolicy();
-    var result = Object.assign(useQueryResult, {
-        called: !!execOptionsRef.current,
-    });
+    var forceUpdateState = internalState.forceUpdateState, obsQueryFields = internalState.obsQueryFields;
     // We use useMemo here to make sure the eager methods have a stable identity.
     var eagerMethods = React.useMemo(function () {
         var eagerMethods = {};
         var _loop_1 = function (key) {
-            var method = result[key];
+            var method = obsQueryFields[key];
             eagerMethods[key] = function () {
                 if (!execOptionsRef.current) {
                     execOptionsRef.current = Object.create(null);
                     // Only the first time populating execOptionsRef.current matters here.
-                    internalState.forceUpdateState();
+                    forceUpdateState();
                 }
                 // @ts-expect-error this is just too generic to type
                 return method.apply(this, arguments);
@@ -86,8 +84,9 @@ export function useLazyQuery(query, options) {
             _loop_1(key);
         }
         return eagerMethods;
-    }, []);
-    Object.assign(result, eagerMethods);
+    }, [forceUpdateState, obsQueryFields]);
+    var called = !!execOptionsRef.current;
+    var result = React.useMemo(function () { return (__assign(__assign(__assign({}, useQueryResult), eagerMethods), { called: called })); }, [useQueryResult, eagerMethods, called]);
     var execute = React.useCallback(function (executeOptions) {
         execOptionsRef.current =
             executeOptions ? __assign(__assign({}, executeOptions), { fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy }) : {
@@ -101,7 +100,7 @@ export function useLazyQuery(query, options) {
         // to catch the promise to prevent unhandled rejections.
         promise.catch(function () { });
         return promise;
-    }, []);
+    }, [eagerMethods, initialFetchPolicy, internalState]);
     return [execute, result];
 }
 //# sourceMappingURL=useLazyQuery.js.map

package/react/hooks/useLazyQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLazyQuery.js","sourceRoot":"","sources":["../../../src/react/hooks/useLazyQuery.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport * as React from \"rehackt\";\n\nimport type { OperationVariables } from \"../../core/index.js\";\nimport { mergeOptions } from \"../../utilities/index.js\";\nimport type {\n  LazyQueryHookExecOptions,\n  LazyQueryHookOptions,\n  LazyQueryResultTuple,\n  NoInfer,\n  QueryResult,\n} from \"../types/types.js\";\nimport { useInternalState } from \"./useQuery.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\n\n// The following methods, when called will execute the query, regardless of\n// whether the useLazyQuery execute function was called before.\nconst EAGER_METHODS = [\n  \"refetch\",\n  \"reobserve\",\n  \"fetchMore\",\n  \"updateQuery\",\n  \"startPolling\",\n  \"subscribeToMore\",\n] as const;\n\n/**\n * A hook for imperatively executing queries in an Apollo application, e.g. in response to user interaction.\n *\n * > Refer to the [Queries - Manual execution with useLazyQuery](https://www.apollographql.com/docs/react/data/queries#manual-execution-with-uselazyquery) section for a more in-depth overview of `useLazyQuery`.\n *\n * @example\n * ```jsx\n * import { gql, useLazyQuery } from \"@apollo/client\";\n *\n * const GET_GREETING = gql`\n *   query GetGreeting($language: String!) {\n *     greeting(language: $language) {\n *       message\n *     }\n *   }\n * `;\n *\n * function Hello() {\n *   const [loadGreeting, { called, loading, data }] = useLazyQuery(\n *     GET_GREETING,\n *     { variables: { language: \"english\" } }\n *   );\n *   if (called && loading) return <p>Loading ...</p>\n *   if (!called) {\n *     return <button onClick={() => loadGreeting()}>Load greeting</button>\n *   }\n *   return <h1>Hello {data.greeting.message}!</h1>;\n * }\n * ```\n * @since 3.0.0\n *\n * @param query - A GraphQL query document parsed into an AST by `gql`.\n * @param options - Default options to control how the query is executed.\n * @returns A tuple in the form of `[execute, result]`\n */\nexport function useLazyQuery<\n  TData = any,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options?: LazyQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>\n): LazyQueryResultTuple<TData, TVariables> {\n  const execOptionsRef =\n    React.useRef<Partial<LazyQueryHookExecOptions<TData, TVariables>>>();\n  const optionsRef = React.useRef<LazyQueryHookOptions<TData, TVariables>>();\n  const queryRef = React.useRef<\n    DocumentNode | TypedDocumentNode<TData, TVariables>\n  >();\n  const merged = mergeOptions(options, execOptionsRef.current || {});\n  const document = merged?.query ?? query;\n\n  // Use refs to track options and the used query to ensure the `execute`\n  // function remains referentially stable between renders.\n  optionsRef.current = options;\n  queryRef.current = document;\n\n  const internalState = useInternalState<TData, TVariables>(\n    useApolloClient(options && options.client),\n    document\n  );\n\n  const useQueryResult = internalState.useQuery({\n    ...merged,\n    skip: !execOptionsRef.current,\n  });\n\n  const initialFetchPolicy =\n    useQueryResult.observable.options.initialFetchPolicy ||\n    internalState.getDefaultFetchPolicy();\n\n  const result: QueryResult<TData, TVariables> = Object.assign(useQueryResult, {\n    called: !!execOptionsRef.current,\n  });\n\n  // We use useMemo here to make sure the eager methods have a stable identity.\n  const eagerMethods = React.useMemo(() => {\n    const eagerMethods: Record<string, any> = {};\n    for (const key of EAGER_METHODS) {\n      const method = result[key];\n      eagerMethods[key] = function () {\n        if (!execOptionsRef.current) {\n          execOptionsRef.current = Object.create(null);\n          // Only the first time populating execOptionsRef.current matters here.\n          internalState.forceUpdateState();\n        }\n        // @ts-expect-error this is just too generic to type\n        return method.apply(this, arguments);\n      };\n    }\n\n    return eagerMethods;\n  }, []);\n\n  Object.assign(result, eagerMethods);\n\n  const execute = React.useCallback<LazyQueryResultTuple<TData, TVariables>[0]>(\n    (executeOptions) => {\n      execOptionsRef.current =\n        executeOptions ?\n          {\n            ...executeOptions,\n            fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy,\n          }\n        : {\n            fetchPolicy: initialFetchPolicy,\n          };\n\n      const options = mergeOptions(optionsRef.current, {\n        query: queryRef.current,\n        ...execOptionsRef.current,\n      });\n\n      const promise = internalState\n        .executeQuery({ ...options, skip: false })\n        .then((queryResult) => Object.assign(queryResult, eagerMethods));\n\n      // Because the return value of `useLazyQuery` is usually floated, we need\n      // to catch the promise to prevent unhandled rejections.\n      promise.catch(() => {});\n\n      return promise;\n    },\n    []\n  );\n\n  return [execute, result];\n}\n"]}
+{"version":3,"file":"useLazyQuery.js","sourceRoot":"","sources":["../../../src/react/hooks/useLazyQuery.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport * as React from \"rehackt\";\n\nimport type { OperationVariables } from \"../../core/index.js\";\nimport { mergeOptions } from \"../../utilities/index.js\";\nimport type {\n  LazyQueryHookExecOptions,\n  LazyQueryHookOptions,\n  LazyQueryResultTuple,\n  NoInfer,\n} from \"../types/types.js\";\nimport { useInternalState } from \"./useQuery.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\n\n// The following methods, when called will execute the query, regardless of\n// whether the useLazyQuery execute function was called before.\nconst EAGER_METHODS = [\n  \"refetch\",\n  \"reobserve\",\n  \"fetchMore\",\n  \"updateQuery\",\n  \"startPolling\",\n  \"subscribeToMore\",\n] as const;\n\n/**\n * A hook for imperatively executing queries in an Apollo application, e.g. in response to user interaction.\n *\n * > Refer to the [Queries - Manual execution with useLazyQuery](https://www.apollographql.com/docs/react/data/queries#manual-execution-with-uselazyquery) section for a more in-depth overview of `useLazyQuery`.\n *\n * @example\n * ```jsx\n * import { gql, useLazyQuery } from \"@apollo/client\";\n *\n * const GET_GREETING = gql`\n *   query GetGreeting($language: String!) {\n *     greeting(language: $language) {\n *       message\n *     }\n *   }\n * `;\n *\n * function Hello() {\n *   const [loadGreeting, { called, loading, data }] = useLazyQuery(\n *     GET_GREETING,\n *     { variables: { language: \"english\" } }\n *   );\n *   if (called && loading) return <p>Loading ...</p>\n *   if (!called) {\n *     return <button onClick={() => loadGreeting()}>Load greeting</button>\n *   }\n *   return <h1>Hello {data.greeting.message}!</h1>;\n * }\n * ```\n * @since 3.0.0\n *\n * @param query - A GraphQL query document parsed into an AST by `gql`.\n * @param options - Default options to control how the query is executed.\n * @returns A tuple in the form of `[execute, result]`\n */\nexport function useLazyQuery<\n  TData = any,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options?: LazyQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>\n): LazyQueryResultTuple<TData, TVariables> {\n  const execOptionsRef =\n    React.useRef<Partial<LazyQueryHookExecOptions<TData, TVariables>>>();\n  const optionsRef = React.useRef<LazyQueryHookOptions<TData, TVariables>>();\n  const queryRef = React.useRef<\n    DocumentNode | TypedDocumentNode<TData, TVariables>\n  >();\n  const merged = mergeOptions(options, execOptionsRef.current || {});\n  const document = merged?.query ?? query;\n\n  // Use refs to track options and the used query to ensure the `execute`\n  // function remains referentially stable between renders.\n  optionsRef.current = options;\n  queryRef.current = document;\n\n  const internalState = useInternalState<TData, TVariables>(\n    useApolloClient(options && options.client),\n    document\n  );\n\n  const useQueryResult = internalState.useQuery({\n    ...merged,\n    skip: !execOptionsRef.current,\n  });\n\n  const initialFetchPolicy =\n    useQueryResult.observable.options.initialFetchPolicy ||\n    internalState.getDefaultFetchPolicy();\n\n  const { forceUpdateState, obsQueryFields } = internalState;\n  // We use useMemo here to make sure the eager methods have a stable identity.\n  const eagerMethods = React.useMemo(() => {\n    const eagerMethods: Record<string, any> = {};\n    for (const key of EAGER_METHODS) {\n      const method = obsQueryFields[key];\n      eagerMethods[key] = function () {\n        if (!execOptionsRef.current) {\n          execOptionsRef.current = Object.create(null);\n          // Only the first time populating execOptionsRef.current matters here.\n          forceUpdateState();\n        }\n        // @ts-expect-error this is just too generic to type\n        return method.apply(this, arguments);\n      };\n    }\n\n    return eagerMethods;\n  }, [forceUpdateState, obsQueryFields]);\n\n  const called = !!execOptionsRef.current;\n  const result = React.useMemo(\n    () => ({\n      ...useQueryResult,\n      ...eagerMethods,\n      called,\n    }),\n    [useQueryResult, eagerMethods, called]\n  );\n\n  const execute = React.useCallback<LazyQueryResultTuple<TData, TVariables>[0]>(\n    (executeOptions) => {\n      execOptionsRef.current =\n        executeOptions ?\n          {\n            ...executeOptions,\n            fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy,\n          }\n        : {\n            fetchPolicy: initialFetchPolicy,\n          };\n\n      const options = mergeOptions(optionsRef.current, {\n        query: queryRef.current,\n        ...execOptionsRef.current,\n      });\n\n      const promise = internalState\n        .executeQuery({ ...options, skip: false })\n        .then((queryResult) => Object.assign(queryResult, eagerMethods));\n\n      // Because the return value of `useLazyQuery` is usually floated, we need\n      // to catch the promise to prevent unhandled rejections.\n      promise.catch(() => {});\n\n      return promise;\n    },\n    [eagerMethods, initialFetchPolicy, internalState]\n  );\n\n  return [execute, result];\n}\n"]}

package/react/hooks/useLoadableQuery.d.ts

@@ -8,7 +8,7 @@ type ResetFunction = () => void;
 export type UseLoadableQueryResult<TData = unknown, TVariables extends OperationVariables = OperationVariables> = [
     loadQuery: LoadQueryFunction<TVariables>,
     queryRef: QueryRef<TData, TVariables> | null,
-    {
+    handlers: {
         /**
          * A function that helps you fetch the next set of results for a [paginated list field](https://www.apollographql.com/docs/react/pagination/core-api/).
          * 

package/react/hooks/useLoadableQuery.js

@@ -51,10 +51,17 @@ export function useLoadableQuery(query, options) {
             return client.watchQuery(__assign(__assign({}, watchQueryOptions), { variables: variables }));
         });
         setQueryRef(wrapQueryRef(queryRef));
-    }, [query, queryKey, suspenseCache, watchQueryOptions, calledDuringRender]);
+    }, [
+        query,
+        queryKey,
+        suspenseCache,
+        watchQueryOptions,
+        calledDuringRender,
+        client,
+    ]);
     var reset = React.useCallback(function () {
         setQueryRef(null);
-    }, [queryRef]);
+    }, []);
     return [loadQuery, queryRef, { fetchMore: fetchMore, refetch: refetch, reset: reset }];
 }
 //# sourceMappingURL=useLoadableQuery.js.map

package/react/hooks/useLoadableQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLoadableQuery.js","sourceRoot":"","sources":["../../../src/react/hooks/useLoadableQuery.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"rehackt\";\nimport type {\n  DocumentNode,\n  FetchMoreQueryOptions,\n  OperationVariables,\n  TypedDocumentNode,\n  WatchQueryOptions,\n} from \"../../core/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\nimport {\n  assertWrappedQueryRef,\n  getSuspenseCache,\n  unwrapQueryRef,\n  updateWrappedQueryRef,\n  wrapQueryRef,\n} from \"../internal/index.js\";\nimport type { CacheKey, QueryRef } from \"../internal/index.js\";\nimport type { LoadableQueryHookOptions } from \"../types/types.js\";\nimport { __use, useRenderGuard } from \"./internal/index.js\";\nimport { useWatchQueryOptions } from \"./useSuspenseQuery.js\";\nimport type { FetchMoreFunction, RefetchFunction } from \"./useSuspenseQuery.js\";\nimport { canonicalStringify } from \"../../cache/index.js\";\nimport type {\n  DeepPartial,\n  OnlyRequiredProperties,\n} from \"../../utilities/index.js\";\nimport { invariant } from \"../../utilities/globals/index.js\";\n\nexport type LoadQueryFunction<TVariables extends OperationVariables> = (\n  // Use variadic args to handle cases where TVariables is type `never`, in\n  // which case we don't want to allow a variables argument. In other\n  // words, we don't want to allow variables to be passed as an argument to this\n  // function if the query does not expect variables in the document.\n  ...args: [TVariables] extends [never] ? []\n  : {} extends OnlyRequiredProperties<TVariables> ? [variables?: TVariables]\n  : [variables: TVariables]\n) => void;\n\ntype ResetFunction = () => void;\n\nexport type UseLoadableQueryResult<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n> = [\n  loadQuery: LoadQueryFunction<TVariables>,\n  queryRef: QueryRef<TData, TVariables> | null,\n  {\n    /** {@inheritDoc @apollo/client!QueryResultDocumentation#fetchMore:member} */\n    fetchMore: FetchMoreFunction<TData, TVariables>;\n    /** {@inheritDoc @apollo/client!QueryResultDocumentation#refetch:member} */\n    refetch: RefetchFunction<TData, TVariables>;\n    /**\n     * A function that resets the `queryRef` back to `null`.\n     */\n    reset: ResetFunction;\n  },\n];\n\nexport function useLoadableQuery<\n  TData,\n  TVariables extends OperationVariables,\n  TOptions extends LoadableQueryHookOptions,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options?: LoadableQueryHookOptions & TOptions\n): UseLoadableQueryResult<\n  TOptions[\"errorPolicy\"] extends \"ignore\" | \"all\" ?\n    TOptions[\"returnPartialData\"] extends true ?\n      DeepPartial<TData> | undefined\n    : TData | undefined\n  : TOptions[\"returnPartialData\"] extends true ? DeepPartial<TData>\n  : TData,\n  TVariables\n>;\n\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options: LoadableQueryHookOptions & {\n    returnPartialData: true;\n    errorPolicy: \"ignore\" | \"all\";\n  }\n): UseLoadableQueryResult<DeepPartial<TData> | undefined, TVariables>;\n\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options: LoadableQueryHookOptions & {\n    errorPolicy: \"ignore\" | \"all\";\n  }\n): UseLoadableQueryResult<TData | undefined, TVariables>;\n\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options: LoadableQueryHookOptions & {\n    returnPartialData: true;\n  }\n): UseLoadableQueryResult<DeepPartial<TData>, TVariables>;\n\n/**\n * A hook for imperatively loading a query, such as responding to a user\n * interaction.\n *\n * > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.\n *\n * @example\n * ```jsx\n * import { gql, useLoadableQuery } from \"@apollo/client\";\n *\n * const GET_GREETING = gql`\n *   query GetGreeting($language: String!) {\n *     greeting(language: $language) {\n *       message\n *     }\n *   }\n * `;\n *\n * function App() {\n *   const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);\n *\n *   return (\n *     <>\n *       <button onClick={() => loadGreeting({ language: \"english\" })}>\n *         Load greeting\n *       </button>\n *       <Suspense fallback={<div>Loading...</div>}>\n *         {queryRef && <Hello queryRef={queryRef} />}\n *       </Suspense>\n *     </>\n *   );\n * }\n *\n * function Hello({ queryRef }) {\n *   const { data } = useReadQuery(queryRef);\n *\n *   return <div>{data.greeting.message}</div>;\n * }\n * ```\n *\n * @since 3.9.0\n * @param query - A GraphQL query document parsed into an AST by `gql`.\n * @param options - Options to control how the query is executed.\n * @returns A tuple in the form of `[loadQuery, queryRef, handlers]`\n */\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options?: LoadableQueryHookOptions\n): UseLoadableQueryResult<TData, TVariables>;\n\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options: LoadableQueryHookOptions = Object.create(null)\n): UseLoadableQueryResult<TData, TVariables> {\n  const client = useApolloClient(options.client);\n  const suspenseCache = getSuspenseCache(client);\n  const watchQueryOptions = useWatchQueryOptions({ client, query, options });\n  const { queryKey = [] } = options;\n\n  const [queryRef, setQueryRef] = React.useState<QueryRef<\n    TData,\n    TVariables\n  > | null>(null);\n\n  assertWrappedQueryRef(queryRef);\n\n  const internalQueryRef = queryRef && unwrapQueryRef(queryRef);\n\n  if (queryRef && internalQueryRef?.didChangeOptions(watchQueryOptions)) {\n    const promise = internalQueryRef.applyOptions(watchQueryOptions);\n    updateWrappedQueryRef(queryRef, promise);\n  }\n\n  const calledDuringRender = useRenderGuard();\n\n  const fetchMore: FetchMoreFunction<TData, TVariables> = React.useCallback(\n    (options) => {\n      if (!internalQueryRef) {\n        throw new Error(\n          \"The query has not been loaded. Please load the query.\"\n        );\n      }\n\n      const promise = internalQueryRef.fetchMore(\n        options as FetchMoreQueryOptions<TVariables, TData>\n      );\n\n      setQueryRef(wrapQueryRef(internalQueryRef));\n\n      return promise;\n    },\n    [internalQueryRef]\n  );\n\n  const refetch: RefetchFunction<TData, TVariables> = React.useCallback(\n    (options) => {\n      if (!internalQueryRef) {\n        throw new Error(\n          \"The query has not been loaded. Please load the query.\"\n        );\n      }\n\n      const promise = internalQueryRef.refetch(options);\n\n      setQueryRef(wrapQueryRef(internalQueryRef));\n\n      return promise;\n    },\n    [internalQueryRef]\n  );\n\n  const loadQuery: LoadQueryFunction<TVariables> = React.useCallback(\n    (...args) => {\n      invariant(\n        !calledDuringRender(),\n        \"useLoadableQuery: 'loadQuery' should not be called during render. To start a query during render, use the 'useBackgroundQuery' hook.\"\n      );\n\n      const [variables] = args;\n\n      const cacheKey: CacheKey = [\n        query,\n        canonicalStringify(variables),\n        ...([] as any[]).concat(queryKey),\n      ];\n\n      const queryRef = suspenseCache.getQueryRef(cacheKey, () =>\n        client.watchQuery({\n          ...watchQueryOptions,\n          variables,\n        } as WatchQueryOptions<any, any>)\n      );\n\n      setQueryRef(wrapQueryRef(queryRef));\n    },\n    [query, queryKey, suspenseCache, watchQueryOptions, calledDuringRender]\n  );\n\n  const reset: ResetFunction = React.useCallback(() => {\n    setQueryRef(null);\n  }, [queryRef]);\n\n  return [loadQuery, queryRef, { fetchMore, refetch, reset }];\n}\n"]}
+{"version":3,"file":"useLoadableQuery.js","sourceRoot":"","sources":["../../../src/react/hooks/useLoadableQuery.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"rehackt\";\nimport type {\n  DocumentNode,\n  FetchMoreQueryOptions,\n  OperationVariables,\n  TypedDocumentNode,\n  WatchQueryOptions,\n} from \"../../core/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\nimport {\n  assertWrappedQueryRef,\n  getSuspenseCache,\n  unwrapQueryRef,\n  updateWrappedQueryRef,\n  wrapQueryRef,\n} from \"../internal/index.js\";\nimport type { CacheKey, QueryRef } from \"../internal/index.js\";\nimport type { LoadableQueryHookOptions } from \"../types/types.js\";\nimport { __use, useRenderGuard } from \"./internal/index.js\";\nimport { useWatchQueryOptions } from \"./useSuspenseQuery.js\";\nimport type { FetchMoreFunction, RefetchFunction } from \"./useSuspenseQuery.js\";\nimport { canonicalStringify } from \"../../cache/index.js\";\nimport type {\n  DeepPartial,\n  OnlyRequiredProperties,\n} from \"../../utilities/index.js\";\nimport { invariant } from \"../../utilities/globals/index.js\";\n\nexport type LoadQueryFunction<TVariables extends OperationVariables> = (\n  // Use variadic args to handle cases where TVariables is type `never`, in\n  // which case we don't want to allow a variables argument. In other\n  // words, we don't want to allow variables to be passed as an argument to this\n  // function if the query does not expect variables in the document.\n  ...args: [TVariables] extends [never] ? []\n  : {} extends OnlyRequiredProperties<TVariables> ? [variables?: TVariables]\n  : [variables: TVariables]\n) => void;\n\ntype ResetFunction = () => void;\n\nexport type UseLoadableQueryResult<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n> = [\n  loadQuery: LoadQueryFunction<TVariables>,\n  queryRef: QueryRef<TData, TVariables> | null,\n  handlers: {\n    /** {@inheritDoc @apollo/client!QueryResultDocumentation#fetchMore:member} */\n    fetchMore: FetchMoreFunction<TData, TVariables>;\n    /** {@inheritDoc @apollo/client!QueryResultDocumentation#refetch:member} */\n    refetch: RefetchFunction<TData, TVariables>;\n    /**\n     * A function that resets the `queryRef` back to `null`.\n     */\n    reset: ResetFunction;\n  },\n];\n\nexport function useLoadableQuery<\n  TData,\n  TVariables extends OperationVariables,\n  TOptions extends LoadableQueryHookOptions,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options?: LoadableQueryHookOptions & TOptions\n): UseLoadableQueryResult<\n  TOptions[\"errorPolicy\"] extends \"ignore\" | \"all\" ?\n    TOptions[\"returnPartialData\"] extends true ?\n      DeepPartial<TData> | undefined\n    : TData | undefined\n  : TOptions[\"returnPartialData\"] extends true ? DeepPartial<TData>\n  : TData,\n  TVariables\n>;\n\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options: LoadableQueryHookOptions & {\n    returnPartialData: true;\n    errorPolicy: \"ignore\" | \"all\";\n  }\n): UseLoadableQueryResult<DeepPartial<TData> | undefined, TVariables>;\n\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options: LoadableQueryHookOptions & {\n    errorPolicy: \"ignore\" | \"all\";\n  }\n): UseLoadableQueryResult<TData | undefined, TVariables>;\n\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options: LoadableQueryHookOptions & {\n    returnPartialData: true;\n  }\n): UseLoadableQueryResult<DeepPartial<TData>, TVariables>;\n\n/**\n * A hook for imperatively loading a query, such as responding to a user\n * interaction.\n *\n * > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.\n *\n * @example\n * ```jsx\n * import { gql, useLoadableQuery } from \"@apollo/client\";\n *\n * const GET_GREETING = gql`\n *   query GetGreeting($language: String!) {\n *     greeting(language: $language) {\n *       message\n *     }\n *   }\n * `;\n *\n * function App() {\n *   const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);\n *\n *   return (\n *     <>\n *       <button onClick={() => loadGreeting({ language: \"english\" })}>\n *         Load greeting\n *       </button>\n *       <Suspense fallback={<div>Loading...</div>}>\n *         {queryRef && <Hello queryRef={queryRef} />}\n *       </Suspense>\n *     </>\n *   );\n * }\n *\n * function Hello({ queryRef }) {\n *   const { data } = useReadQuery(queryRef);\n *\n *   return <div>{data.greeting.message}</div>;\n * }\n * ```\n *\n * @since 3.9.0\n * @param query - A GraphQL query document parsed into an AST by `gql`.\n * @param options - Options to control how the query is executed.\n * @returns A tuple in the form of `[loadQuery, queryRef, handlers]`\n */\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options?: LoadableQueryHookOptions\n): UseLoadableQueryResult<TData, TVariables>;\n\nexport function useLoadableQuery<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  query: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options: LoadableQueryHookOptions = Object.create(null)\n): UseLoadableQueryResult<TData, TVariables> {\n  const client = useApolloClient(options.client);\n  const suspenseCache = getSuspenseCache(client);\n  const watchQueryOptions = useWatchQueryOptions({ client, query, options });\n  const { queryKey = [] } = options;\n\n  const [queryRef, setQueryRef] = React.useState<QueryRef<\n    TData,\n    TVariables\n  > | null>(null);\n\n  assertWrappedQueryRef(queryRef);\n\n  const internalQueryRef = queryRef && unwrapQueryRef(queryRef);\n\n  if (queryRef && internalQueryRef?.didChangeOptions(watchQueryOptions)) {\n    const promise = internalQueryRef.applyOptions(watchQueryOptions);\n    updateWrappedQueryRef(queryRef, promise);\n  }\n\n  const calledDuringRender = useRenderGuard();\n\n  const fetchMore: FetchMoreFunction<TData, TVariables> = React.useCallback(\n    (options) => {\n      if (!internalQueryRef) {\n        throw new Error(\n          \"The query has not been loaded. Please load the query.\"\n        );\n      }\n\n      const promise = internalQueryRef.fetchMore(\n        options as FetchMoreQueryOptions<TVariables, TData>\n      );\n\n      setQueryRef(wrapQueryRef(internalQueryRef));\n\n      return promise;\n    },\n    [internalQueryRef]\n  );\n\n  const refetch: RefetchFunction<TData, TVariables> = React.useCallback(\n    (options) => {\n      if (!internalQueryRef) {\n        throw new Error(\n          \"The query has not been loaded. Please load the query.\"\n        );\n      }\n\n      const promise = internalQueryRef.refetch(options);\n\n      setQueryRef(wrapQueryRef(internalQueryRef));\n\n      return promise;\n    },\n    [internalQueryRef]\n  );\n\n  const loadQuery: LoadQueryFunction<TVariables> = React.useCallback(\n    (...args) => {\n      invariant(\n        !calledDuringRender(),\n        \"useLoadableQuery: 'loadQuery' should not be called during render. To start a query during render, use the 'useBackgroundQuery' hook.\"\n      );\n\n      const [variables] = args;\n\n      const cacheKey: CacheKey = [\n        query,\n        canonicalStringify(variables),\n        ...([] as any[]).concat(queryKey),\n      ];\n\n      const queryRef = suspenseCache.getQueryRef(cacheKey, () =>\n        client.watchQuery({\n          ...watchQueryOptions,\n          variables,\n        } as WatchQueryOptions<any, any>)\n      );\n\n      setQueryRef(wrapQueryRef(queryRef));\n    },\n    [\n      query,\n      queryKey,\n      suspenseCache,\n      watchQueryOptions,\n      calledDuringRender,\n      client,\n    ]\n  );\n\n  const reset: ResetFunction = React.useCallback(() => {\n    setQueryRef(null);\n  }, []);\n\n  return [loadQuery, queryRef, { fetchMore, refetch, reset }];\n}\n"]}

package/react/hooks/useMutation.js

@@ -5,6 +5,7 @@ import { equal } from "@wry/equality";
 import { DocumentType, verifyDocumentType } from "../parser/index.js";
 import { ApolloError } from "../../errors/index.js";
 import { useApolloClient } from "./useApolloClient.js";
+import { useIsomorphicLayoutEffect } from "./internal/useIsomorphicLayoutEffect.js";
 /**
  *
  *
@@ -68,11 +69,9 @@ export function useMutation(mutation, options) {
         mutation: mutation,
         options: options,
     });
-    // TODO: Trying to assign these in a useEffect or useLayoutEffect breaks
-    // higher-order components.
-    {
+    useIsomorphicLayoutEffect(function () {
         Object.assign(ref.current, { client: client, options: options, mutation: mutation });
-    }
+    });
     var execute = React.useCallback(function (executeOptions) {
         if (executeOptions === void 0) { executeOptions = {}; }
         var _a = ref.current, options = _a.options, mutation = _a.mutation;
@@ -147,15 +146,20 @@ export function useMutation(mutation, options) {
     }, []);
     var reset = React.useCallback(function () {
         if (ref.current.isMounted) {
-            var result_3 = { called: false, loading: false, client: client };
+            var result_3 = {
+                called: false,
+                loading: false,
+                client: ref.current.client,
+            };
             Object.assign(ref.current, { mutationId: 0, result: result_3 });
             setResult(result_3);
         }
     }, []);
     React.useEffect(function () {
-        ref.current.isMounted = true;
+        var current = ref.current;
+        current.isMounted = true;
         return function () {
-            ref.current.isMounted = false;
+            current.isMounted = false;
         };
     }, []);
     return [execute, __assign({ reset: reset }, result)];

package/react/hooks/useMutation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMutation.js","sourceRoot":"","sources":["../../../src/react/hooks/useMutation.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAiBjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,UAAU,WAAW,CAMzB,QAA6D,EAC7D,OAKC;IAED,IAAM,MAAM,GAAG,eAAe,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAC,CAAC;IAChD,kBAAkB,CAAC,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAA,KAAsB,KAAK,CAAC,QAAQ,CAAgC;QACxE,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,KAAK;QACd,MAAM,QAAA;KACP,CAAC,EAJK,MAAM,QAAA,EAAE,SAAS,QAItB,CAAC;IAEH,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;QACvB,MAAM,QAAA;QACN,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,IAAI;QACf,MAAM,QAAA;QACN,QAAQ,UAAA;QACR,OAAO,SAAA;KACR,CAAC,CAAC;IAEH,wEAAwE;IACxE,2BAA2B;IAC3B,CAAC;QACC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,MAAM,QAAA,EAAE,OAAO,SAAA,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAC;IAC5D,CAAC;IAED,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,UACE,cAKM;QALN,+BAAA,EAAA,mBAKM;QAEA,IAAA,KAAwB,GAAG,CAAC,OAAO,EAAjC,OAAO,aAAA,EAAE,QAAQ,cAAgB,CAAC;QAC1C,IAAM,WAAW,yBAAQ,OAAO,KAAE,QAAQ,UAAA,GAAE,CAAC;QAC7C,IAAM,MAAM,GAAG,cAAc,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC;QAE3D,IACE,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO;YAC3B,CAAC,WAAW,CAAC,aAAa;YAC1B,GAAG,CAAC,OAAO,CAAC,SAAS,EACrB,CAAC;YACD,SAAS,CACP,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG;gBACpB,OAAO,EAAE,IAAI;gBACb,KAAK,EAAE,KAAK,CAAC;gBACb,IAAI,EAAE,KAAK,CAAC;gBACZ,MAAM,EAAE,IAAI;gBACZ,MAAM,QAAA;aACP,CAAC,CACH,CAAC;QACJ,CAAC;QAED,IAAM,UAAU,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC;QAC5C,IAAM,aAAa,GAAG,YAAY,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;QAEhE,OAAO,MAAM;aACV,MAAM,CAAC,aAA2D,CAAC;aACnE,IAAI,CAAC,UAAC,QAAQ;;YACL,IAAA,IAAI,GAAa,QAAQ,KAArB,EAAE,MAAM,GAAK,QAAQ,OAAb,CAAc;YAClC,IAAM,KAAK,GACT,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC3B,IAAI,WAAW,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;gBAC5C,CAAC,CAAC,KAAK,CAAC,CAAC;YAEX,IAAM,OAAO,GACX,cAAc,CAAC,OAAO,KAAI,MAAA,GAAG,CAAC,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,CAAC;YAEzD,IAAI,KAAK,IAAI,OAAO,EAAE,CAAC;gBACrB,OAAO,CACL,KAAK,EACL,aAA2D,CAC5D,CAAC;YACJ,CAAC;YAED,IACE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC,UAAU;gBACrC,CAAC,aAAa,CAAC,aAAa,EAC5B,CAAC;gBACD,IAAM,QAAM,GAAG;oBACb,MAAM,EAAE,IAAI;oBACZ,OAAO,EAAE,KAAK;oBACd,IAAI,MAAA;oBACJ,KAAK,OAAA;oBACL,MAAM,QAAA;iBACP,CAAC;gBAEF,IAAI,GAAG,CAAC,OAAO,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,QAAM,CAAC,EAAE,CAAC;oBAChE,SAAS,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,QAAM,CAAC,CAAC,CAAC;gBAC3C,CAAC;YACH,CAAC;YAED,IAAM,WAAW,GACf,cAAc,CAAC,WAAW,KAAI,MAAA,GAAG,CAAC,OAAO,CAAC,OAAO,0CAAE,WAAW,CAAA,CAAC;YAEjE,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,WAAW,aAAX,WAAW,uBAAX,WAAW,CACT,QAAQ,CAAC,IAAK,EACd,aAA2D,CAC5D,CAAC;YACJ,CAAC;YAED,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC;aACD,KAAK,CAAC,UAAC,KAAK;;YACX,IAAI,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBACnE,IAAM,QAAM,GAAG;oBACb,OAAO,EAAE,KAAK;oBACd,KAAK,OAAA;oBACL,IAAI,EAAE,KAAK,CAAC;oBACZ,MAAM,EAAE,IAAI;oBACZ,MAAM,QAAA;iBACP,CAAC;gBAEF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,QAAM,CAAC,EAAE,CAAC;oBACvC,SAAS,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,QAAM,CAAC,CAAC,CAAC;gBAC3C,CAAC;YACH,CAAC;YAED,IAAM,OAAO,GACX,cAAc,CAAC,OAAO,KAAI,MAAA,GAAG,CAAC,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,CAAC;YAEzD,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CACL,KAAK,EACL,aAA2D,CAC5D,CAAC;gBAEF,iDAAiD;gBACjD,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;YACzC,CAAC;YAED,MAAM,KAAK,CAAC;QACd,CAAC,CAAC,CAAC;IACP,CAAC,EACD,EAAE,CACH,CAAC;IAEF,IAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC;QAC9B,IAAI,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;YAC1B,IAAM,QAAM,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,QAAA,EAAE,CAAC;YACzD,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,UAAA,EAAE,CAAC,CAAC;YACtD,SAAS,CAAC,QAAM,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC;QACd,GAAG,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;QAE7B,OAAO;YACL,GAAG,CAAC,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAAC,OAAO,aAAI,KAAK,OAAA,IAAK,MAAM,EAAG,CAAC;AACzC,CAAC","sourcesContent":["import * as React from \"rehackt\";\nimport type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport type {\n  MutationFunctionOptions,\n  MutationHookOptions,\n  MutationResult,\n  MutationTuple,\n  NoInfer,\n} from \"../types/types.js\";\n\nimport type {\n  ApolloCache,\n  DefaultContext,\n  MutationOptions,\n  OperationVariables,\n} from \"../../core/index.js\";\nimport { mergeOptions } from \"../../utilities/index.js\";\nimport { equal } from \"@wry/equality\";\nimport { DocumentType, verifyDocumentType } from \"../parser/index.js\";\nimport { ApolloError } from \"../../errors/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\n\n/**\n *\n *\n * > Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.\n *\n * @example\n * ```jsx\n * import { gql, useMutation } from '@apollo/client';\n *\n * const ADD_TODO = gql`\n *   mutation AddTodo($type: String!) {\n *     addTodo(type: $type) {\n *       id\n *       type\n *     }\n *   }\n * `;\n *\n * function AddTodo() {\n *   let input;\n *   const [addTodo, { data }] = useMutation(ADD_TODO);\n *\n *   return (\n *     <div>\n *       <form\n *         onSubmit={e => {\n *           e.preventDefault();\n *           addTodo({ variables: { type: input.value } });\n *           input.value = '';\n *         }}\n *       >\n *         <input\n *           ref={node => {\n *             input = node;\n *           }}\n *         />\n *         <button type=\"submit\">Add Todo</button>\n *       </form>\n *     </div>\n *   );\n * }\n * ```\n * @since 3.0.0\n * @param mutation - A GraphQL mutation document parsed into an AST by `gql`.\n * @param options - Options to control how the mutation is executed.\n * @returns A tuple in the form of `[mutate, result]`\n */\nexport function useMutation<\n  TData = any,\n  TVariables = OperationVariables,\n  TContext = DefaultContext,\n  TCache extends ApolloCache<any> = ApolloCache<any>,\n>(\n  mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options?: MutationHookOptions<\n    NoInfer<TData>,\n    NoInfer<TVariables>,\n    TContext,\n    TCache\n  >\n): MutationTuple<TData, TVariables, TContext, TCache> {\n  const client = useApolloClient(options?.client);\n  verifyDocumentType(mutation, DocumentType.Mutation);\n  const [result, setResult] = React.useState<Omit<MutationResult, \"reset\">>({\n    called: false,\n    loading: false,\n    client,\n  });\n\n  const ref = React.useRef({\n    result,\n    mutationId: 0,\n    isMounted: true,\n    client,\n    mutation,\n    options,\n  });\n\n  // TODO: Trying to assign these in a useEffect or useLayoutEffect breaks\n  // higher-order components.\n  {\n    Object.assign(ref.current, { client, options, mutation });\n  }\n\n  const execute = React.useCallback(\n    (\n      executeOptions: MutationFunctionOptions<\n        TData,\n        TVariables,\n        TContext,\n        TCache\n      > = {}\n    ) => {\n      const { options, mutation } = ref.current;\n      const baseOptions = { ...options, mutation };\n      const client = executeOptions.client || ref.current.client;\n\n      if (\n        !ref.current.result.loading &&\n        !baseOptions.ignoreResults &&\n        ref.current.isMounted\n      ) {\n        setResult(\n          (ref.current.result = {\n            loading: true,\n            error: void 0,\n            data: void 0,\n            called: true,\n            client,\n          })\n        );\n      }\n\n      const mutationId = ++ref.current.mutationId;\n      const clientOptions = mergeOptions(baseOptions, executeOptions);\n\n      return client\n        .mutate(clientOptions as MutationOptions<TData, OperationVariables>)\n        .then((response) => {\n          const { data, errors } = response;\n          const error =\n            errors && errors.length > 0 ?\n              new ApolloError({ graphQLErrors: errors })\n            : void 0;\n\n          const onError =\n            executeOptions.onError || ref.current.options?.onError;\n\n          if (error && onError) {\n            onError(\n              error,\n              clientOptions as MutationOptions<TData, OperationVariables>\n            );\n          }\n\n          if (\n            mutationId === ref.current.mutationId &&\n            !clientOptions.ignoreResults\n          ) {\n            const result = {\n              called: true,\n              loading: false,\n              data,\n              error,\n              client,\n            };\n\n            if (ref.current.isMounted && !equal(ref.current.result, result)) {\n              setResult((ref.current.result = result));\n            }\n          }\n\n          const onCompleted =\n            executeOptions.onCompleted || ref.current.options?.onCompleted;\n\n          if (!error) {\n            onCompleted?.(\n              response.data!,\n              clientOptions as MutationOptions<TData, OperationVariables>\n            );\n          }\n\n          return response;\n        })\n        .catch((error) => {\n          if (mutationId === ref.current.mutationId && ref.current.isMounted) {\n            const result = {\n              loading: false,\n              error,\n              data: void 0,\n              called: true,\n              client,\n            };\n\n            if (!equal(ref.current.result, result)) {\n              setResult((ref.current.result = result));\n            }\n          }\n\n          const onError =\n            executeOptions.onError || ref.current.options?.onError;\n\n          if (onError) {\n            onError(\n              error,\n              clientOptions as MutationOptions<TData, OperationVariables>\n            );\n\n            // TODO(brian): why are we returning this here???\n            return { data: void 0, errors: error };\n          }\n\n          throw error;\n        });\n    },\n    []\n  );\n\n  const reset = React.useCallback(() => {\n    if (ref.current.isMounted) {\n      const result = { called: false, loading: false, client };\n      Object.assign(ref.current, { mutationId: 0, result });\n      setResult(result);\n    }\n  }, []);\n\n  React.useEffect(() => {\n    ref.current.isMounted = true;\n\n    return () => {\n      ref.current.isMounted = false;\n    };\n  }, []);\n\n  return [execute, { reset, ...result }];\n}\n"]}
+{"version":3,"file":"useMutation.js","sourceRoot":"","sources":["../../../src/react/hooks/useMutation.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"rehackt\";\nimport type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport type {\n  MutationFunctionOptions,\n  MutationHookOptions,\n  MutationResult,\n  MutationTuple,\n  NoInfer,\n} from \"../types/types.js\";\n\nimport type {\n  ApolloCache,\n  DefaultContext,\n  MutationOptions,\n  OperationVariables,\n} from \"../../core/index.js\";\nimport { mergeOptions } from \"../../utilities/index.js\";\nimport { equal } from \"@wry/equality\";\nimport { DocumentType, verifyDocumentType } from \"../parser/index.js\";\nimport { ApolloError } from \"../../errors/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\nimport { useIsomorphicLayoutEffect } from \"./internal/useIsomorphicLayoutEffect.js\";\n\n/**\n *\n *\n * > Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.\n *\n * @example\n * ```jsx\n * import { gql, useMutation } from '@apollo/client';\n *\n * const ADD_TODO = gql`\n *   mutation AddTodo($type: String!) {\n *     addTodo(type: $type) {\n *       id\n *       type\n *     }\n *   }\n * `;\n *\n * function AddTodo() {\n *   let input;\n *   const [addTodo, { data }] = useMutation(ADD_TODO);\n *\n *   return (\n *     <div>\n *       <form\n *         onSubmit={e => {\n *           e.preventDefault();\n *           addTodo({ variables: { type: input.value } });\n *           input.value = '';\n *         }}\n *       >\n *         <input\n *           ref={node => {\n *             input = node;\n *           }}\n *         />\n *         <button type=\"submit\">Add Todo</button>\n *       </form>\n *     </div>\n *   );\n * }\n * ```\n * @since 3.0.0\n * @param mutation - A GraphQL mutation document parsed into an AST by `gql`.\n * @param options - Options to control how the mutation is executed.\n * @returns A tuple in the form of `[mutate, result]`\n */\nexport function useMutation<\n  TData = any,\n  TVariables = OperationVariables,\n  TContext = DefaultContext,\n  TCache extends ApolloCache<any> = ApolloCache<any>,\n>(\n  mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  options?: MutationHookOptions<\n    NoInfer<TData>,\n    NoInfer<TVariables>,\n    TContext,\n    TCache\n  >\n): MutationTuple<TData, TVariables, TContext, TCache> {\n  const client = useApolloClient(options?.client);\n  verifyDocumentType(mutation, DocumentType.Mutation);\n  const [result, setResult] = React.useState<Omit<MutationResult, \"reset\">>({\n    called: false,\n    loading: false,\n    client,\n  });\n\n  const ref = React.useRef({\n    result,\n    mutationId: 0,\n    isMounted: true,\n    client,\n    mutation,\n    options,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    Object.assign(ref.current, { client, options, mutation });\n  });\n\n  const execute = React.useCallback(\n    (\n      executeOptions: MutationFunctionOptions<\n        TData,\n        TVariables,\n        TContext,\n        TCache\n      > = {}\n    ) => {\n      const { options, mutation } = ref.current;\n      const baseOptions = { ...options, mutation };\n      const client = executeOptions.client || ref.current.client;\n\n      if (\n        !ref.current.result.loading &&\n        !baseOptions.ignoreResults &&\n        ref.current.isMounted\n      ) {\n        setResult(\n          (ref.current.result = {\n            loading: true,\n            error: void 0,\n            data: void 0,\n            called: true,\n            client,\n          })\n        );\n      }\n\n      const mutationId = ++ref.current.mutationId;\n      const clientOptions = mergeOptions(baseOptions, executeOptions);\n\n      return client\n        .mutate(clientOptions as MutationOptions<TData, OperationVariables>)\n        .then((response) => {\n          const { data, errors } = response;\n          const error =\n            errors && errors.length > 0 ?\n              new ApolloError({ graphQLErrors: errors })\n            : void 0;\n\n          const onError =\n            executeOptions.onError || ref.current.options?.onError;\n\n          if (error && onError) {\n            onError(\n              error,\n              clientOptions as MutationOptions<TData, OperationVariables>\n            );\n          }\n\n          if (\n            mutationId === ref.current.mutationId &&\n            !clientOptions.ignoreResults\n          ) {\n            const result = {\n              called: true,\n              loading: false,\n              data,\n              error,\n              client,\n            };\n\n            if (ref.current.isMounted && !equal(ref.current.result, result)) {\n              setResult((ref.current.result = result));\n            }\n          }\n\n          const onCompleted =\n            executeOptions.onCompleted || ref.current.options?.onCompleted;\n\n          if (!error) {\n            onCompleted?.(\n              response.data!,\n              clientOptions as MutationOptions<TData, OperationVariables>\n            );\n          }\n\n          return response;\n        })\n        .catch((error) => {\n          if (mutationId === ref.current.mutationId && ref.current.isMounted) {\n            const result = {\n              loading: false,\n              error,\n              data: void 0,\n              called: true,\n              client,\n            };\n\n            if (!equal(ref.current.result, result)) {\n              setResult((ref.current.result = result));\n            }\n          }\n\n          const onError =\n            executeOptions.onError || ref.current.options?.onError;\n\n          if (onError) {\n            onError(\n              error,\n              clientOptions as MutationOptions<TData, OperationVariables>\n            );\n\n            // TODO(brian): why are we returning this here???\n            return { data: void 0, errors: error };\n          }\n\n          throw error;\n        });\n    },\n    []\n  );\n\n  const reset = React.useCallback(() => {\n    if (ref.current.isMounted) {\n      const result = {\n        called: false,\n        loading: false,\n        client: ref.current.client,\n      };\n      Object.assign(ref.current, { mutationId: 0, result });\n      setResult(result);\n    }\n  }, []);\n\n  React.useEffect(() => {\n    const current = ref.current;\n    current.isMounted = true;\n\n    return () => {\n      current.isMounted = false;\n    };\n  }, []);\n\n  return [execute, { reset, ...result }];\n}\n"]}

package/react/hooks/useQuery.d.ts

@@ -1,6 +1,6 @@
 import type { OperationVariables, WatchQueryFetchPolicy } from "../../core/index.js";
 import type { ApolloClient, ApolloQueryResult, DocumentNode, TypedDocumentNode } from "../../core/index.js";
-import type { QueryHookOptions, QueryResult, NoInfer } from "../types/types.js";
+import type { QueryHookOptions, QueryResult, ObservableQueryFields, NoInfer } from "../types/types.js";
 import { useApolloClient } from "./useApolloClient.js";
 /**
  * A hook for executing queries in an Apollo application.
@@ -71,7 +71,7 @@ declare class InternalState<TData, TVariables extends OperationVariables> {
     private onCompleted;
     private onError;
     private observable;
-    private obsQueryFields;
+    obsQueryFields: Omit<ObservableQueryFields<TData, TVariables>, "variables">;
     private useObservableQuery;
     private result;
     private previousData;

package/react/hooks/useQuery.js

@@ -54,20 +54,27 @@ function _useQuery(query, options) {
     return useInternalState(useApolloClient(options.client), query).useQuery(options);
 }
 export function useInternalState(client, query) {
-    var stateRef = React.useRef();
-    if (!stateRef.current ||
-        client !== stateRef.current.client ||
-        query !== stateRef.current.query) {
-        stateRef.current = new InternalState(client, query, stateRef.current);
-    }
-    var state = stateRef.current;
     // By default, InternalState.prototype.forceUpdate is an empty function, but
     // we replace it here (before anyone has had a chance to see this state yet)
     // with a function that unconditionally forces an update, using the latest
-    // setTick function. Updating this state by calling state.forceUpdate is the
-    // only way we trigger React component updates (no other useState calls within
-    // the InternalState class).
-    state.forceUpdateState = React.useReducer(function (tick) { return tick + 1; }, 0)[1];
+    // setTick function. Updating this state by calling state.forceUpdate or the
+    // uSES notification callback are the only way we trigger React component updates.
+    var forceUpdateState = React.useReducer(function (tick) { return tick + 1; }, 0)[1];
+    function createInternalState(previous) {
+        return Object.assign(new InternalState(client, query, previous), {
+            forceUpdateState: forceUpdateState,
+        });
+    }
+    var _a = React.useState(createInternalState), state = _a[0], updateState = _a[1];
+    if (client !== state.client || query !== state.query) {
+        // If the client or query have changed, we need to create a new InternalState.
+        // This will trigger a re-render with the new state, but it will also continue
+        // to run the current render function to completion.
+        // Since we sometimes trigger some side-effects in the render function, we
+        // re-assign `state` to the new state to ensure that those side-effects are
+        // triggered with the new state.
+        updateState((state = createInternalState(state)));
+    }
     return state;
 }
 var InternalState = /** @class */ (function () {
@@ -161,10 +168,14 @@ var InternalState = /** @class */ (function () {
         // initialization, this.renderPromises is usually undefined (unless SSR is
         // happening), but that's fine as long as it has been initialized that way,
         // rather than left uninitialized.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         this.renderPromises = React.useContext(getApolloContext()).renderPromises;
         this.useOptions(options);
         var obsQuery = this.useObservableQuery();
-        var result = useSyncExternalStore(React.useCallback(function (handleStoreChange) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        var result = useSyncExternalStore(
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useCallback(function (handleStoreChange) {
             if (_this.renderPromises) {
                 return function () { };
             }
@@ -220,7 +231,9 @@ var InternalState = /** @class */ (function () {
             // effectively passing this dependency array to that useEffect buried
             // inside useSyncExternalStore, as desired.
             obsQuery,
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             this.renderPromises,
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             this.client.disableNetworkFetches,
         ]), function () { return _this.getCurrentResult(); }, function () { return _this.getCurrentResult(); });
         // TODO Remove this method when we remove support for options.partialRefetch.
@@ -368,6 +381,7 @@ var InternalState = /** @class */ (function () {
                 this.renderPromises.getSSRObservable(this.watchQueryOptions)) ||
                 this.observable || // Reuse this.observable if possible (and not SSR)
                 this.client.watchQuery(this.getObsQueryOptions()));
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         this.obsQueryFields = React.useMemo(function () { return ({
             refetch: obsQuery.refetch.bind(obsQuery),
             reobserve: obsQuery.reobserve.bind(obsQuery),