@apollo/client 3.8.0-alpha.12 → 3.8.0-alpha.14

package/react/hooks/hooks.cjs

@@ -8,8 +8,8 @@ var context = require('../context');
 var tslib = require('tslib');
 var utilities = require('../../utilities');
 var equality = require('@wry/equality');
-var core = require('../../core');
 var errors = require('../../errors');
+var core = require('../../core');
 var parser = require('../parser');
 var cache = require('../../cache');
 
@@ -248,7 +248,7 @@ var InternalState = (function () {
             toMerge.push(this.queryHookOptions.defaultOptions);
         }
         toMerge.push(utilities.compact(this.observable && this.observable.options, this.watchQueryOptions));
-        return toMerge.reduce(core.mergeOptions);
+        return toMerge.reduce(utilities.mergeOptions);
     };
     InternalState.prototype.createWatchQueryOptions = function (_a) {
         var _b;
@@ -466,7 +466,7 @@ function useMutation(mutation, options) {
             });
         }
         var mutationId = ++ref.current.mutationId;
-        var clientOptions = core.mergeOptions(baseOptions, executeOptions);
+        var clientOptions = utilities.mergeOptions(baseOptions, executeOptions);
         return client.mutate(clientOptions).then(function (response) {
             var _a;
             var data = response.data, errors$1 = response.errors;
@@ -612,9 +612,13 @@ function useSubscription(subscription, options) {
         if (!observable) {
             return;
         }
+        var subscriptionStopped = false;
         var subscription = observable.subscribe({
             next: function (fetchResult) {
                 var _a, _b;
+                if (subscriptionStopped) {
+                    return;
+                }
                 var result = {
                     loading: false,
                     data: fetchResult.data,
@@ -637,26 +641,33 @@ function useSubscription(subscription, options) {
             },
             error: function (error) {
                 var _a, _b;
-                setResult({
-                    loading: false,
-                    data: void 0,
-                    error: error,
-                    variables: options === null || options === void 0 ? void 0 : options.variables,
-                });
-                (_b = (_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
+                if (!subscriptionStopped) {
+                    setResult({
+                        loading: false,
+                        data: void 0,
+                        error: error,
+                        variables: options === null || options === void 0 ? void 0 : options.variables,
+                    });
+                    (_b = (_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
+                }
             },
             complete: function () {
                 var _a, _b;
-                if ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onComplete) {
-                    ref.current.options.onComplete();
-                }
-                else if ((_b = ref.current.options) === null || _b === void 0 ? void 0 : _b.onSubscriptionComplete) {
-                    ref.current.options.onSubscriptionComplete();
+                if (!subscriptionStopped) {
+                    if ((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onComplete) {
+                        ref.current.options.onComplete();
+                    }
+                    else if ((_b = ref.current.options) === null || _b === void 0 ? void 0 : _b.onSubscriptionComplete) {
+                        ref.current.options.onSubscriptionComplete();
+                    }
                 }
             },
         });
         return function () {
-            subscription.unsubscribe();
+            subscriptionStopped = true;
+            setTimeout(function () {
+                subscription.unsubscribe();
+            });
         };
     }, [observable]);
     return result;
@@ -680,7 +691,7 @@ function useReactiveVar(rv) {
 function useFragment_experimental(options) {
     var cache = useApolloClient().cache;
     var fragment = options.fragment, fragmentName = options.fragmentName, from = options.from, _a = options.optimistic, optimistic = _a === void 0 ? true : _a, rest = tslib.__rest(options, ["fragment", "fragmentName", "from", "optimistic"]);
-    var diffOptions = tslib.__assign(tslib.__assign({}, rest), { id: typeof from === "string" ? from : cache.identify(from), query: cache["getFragmentDoc"](fragment, fragmentName), optimistic: optimistic });
+    var diffOptions = tslib.__assign(tslib.__assign({}, rest), { returnPartialData: true, id: typeof from === "string" ? from : cache.identify(from), query: cache["getFragmentDoc"](fragment, fragmentName), optimistic: optimistic });
     var resultRef = React.useRef();
     var latestDiff = cache.diff(diffOptions);
     var getSnapshot = function () {
@@ -748,47 +759,51 @@ function useSuspenseCache(override) {
     var suspenseCache = override || context$1.suspenseCache;
     globals.__DEV__ ? globals.invariant(suspenseCache, 'Could not find a "suspenseCache" in the context or passed in as an option. ' +
         'Wrap the root component in an <ApolloProvider> and provide a suspenseCache, ' +
-        'or pass a SuspenseCache instance in via options.') : globals.invariant(suspenseCache, 34);
+        'or pass a SuspenseCache instance in via options.') : globals.invariant(suspenseCache, 35);
     return suspenseCache;
 }
 
 function useSuspenseQuery_experimental(query, options) {
     if (options === void 0) { options = Object.create(null); }
-    var didPreviouslySuspend = React.useRef(false);
     var client = useApolloClient(options.client);
     var suspenseCache = useSuspenseCache(options.suspenseCache);
     var watchQueryOptions = useWatchQueryOptions({ query: query, options: options });
-    var _a = watchQueryOptions.returnPartialData, returnPartialData = _a === void 0 ? false : _a, variables = watchQueryOptions.variables;
-    var _b = options.suspensePolicy, suspensePolicy = _b === void 0 ? 'always' : _b, _c = options.queryKey, queryKey = _c === void 0 ? [] : _c;
-    var shouldSuspend = suspensePolicy === 'always' || !didPreviouslySuspend.current;
+    var variables = watchQueryOptions.variables;
+    var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
     var cacheKey = [client, query, cache.canonicalStringify(variables)].concat(queryKey);
-    var subscription = suspenseCache.getSubscription(cacheKey, function () {
+    var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
         return client.watchQuery(watchQueryOptions);
     });
-    var dispose = useTrackedSubscriptions(subscription);
-    useStrictModeSafeCleanupEffect(dispose);
-    var result = useSyncExternalStore(subscription.listen, function () { return subscription.result; }, function () { return subscription.result; });
-    var previousVariables = React.useRef(variables);
-    var previousData = React.useRef(result.data);
-    if (!equality.equal(variables, previousVariables.current)) {
-        if (result.networkStatus !== core.NetworkStatus.ready) {
-            result = tslib.__assign(tslib.__assign({}, result), { data: previousData.current, networkStatus: core.NetworkStatus.setVariables });
-        }
-        previousVariables.current = variables;
-        previousData.current = result.data;
+    var _b = React.useState(function () { return new Map([[queryRef.key, queryRef.promise]]); }), promiseCache = _b[0], setPromiseCache = _b[1];
+    var promise = promiseCache.get(queryRef.key);
+    if (!promise) {
+        promise = queryRef.promise;
+        promiseCache.set(queryRef.key, promise);
     }
-    if (result.networkStatus === core.NetworkStatus.error ||
-        (shouldSuspend &&
-            !shouldUseCachedResult(subscription.result, {
-                returnPartialData: returnPartialData,
-                fetchPolicy: options.fetchPolicy,
-            }))) {
-        __use(subscription.promise);
-    }
-    didPreviouslySuspend.current = true;
-    var fetchMore = React.useCallback(function (options) { return subscription.fetchMore(options); }, [subscription]);
-    var refetch = React.useCallback(function (variables) { return subscription.refetch(variables); }, [subscription]);
-    var subscribeToMore = React.useCallback(function (options) { return subscription.observable.subscribeToMore(options); }, [subscription]);
+    useTrackedQueryRefs(queryRef);
+    React.useEffect(function () {
+        return queryRef.listen(function (promise) {
+            setPromiseCache(function (promiseCache) {
+                return new Map(promiseCache).set(queryRef.key, promise);
+            });
+        });
+    }, [queryRef]);
+    var result = __use(promise);
+    var fetchMore = React.useCallback(function (options) {
+        var promise = queryRef.fetchMore(options);
+        setPromiseCache(function (previousPromiseCache) {
+            return new Map(previousPromiseCache).set(queryRef.key, promise);
+        });
+        return promise;
+    }, [queryRef]);
+    var refetch = React.useCallback(function (variables) {
+        var promise = queryRef.refetch(variables);
+        setPromiseCache(function (previousPromiseCache) {
+            return new Map(previousPromiseCache).set(queryRef.key, promise);
+        });
+        return promise;
+    }, [queryRef]);
+    var subscribeToMore = React.useCallback(function (options) { return queryRef.observable.subscribeToMore(options); }, [queryRef]);
     return React.useMemo(function () {
         return {
             client: client,
@@ -815,7 +830,7 @@ function validateFetchPolicy(fetchPolicy) {
         'no-cache',
         'cache-and-network',
     ];
-    globals.__DEV__ ? globals.invariant(supportedFetchPolicies.includes(fetchPolicy), "The fetch policy `".concat(fetchPolicy, "` is not supported with suspense.")) : globals.invariant(supportedFetchPolicies.includes(fetchPolicy), 35);
+    globals.__DEV__ ? globals.invariant(supportedFetchPolicies.includes(fetchPolicy), "The fetch policy `".concat(fetchPolicy, "` is not supported with suspense.")) : globals.invariant(supportedFetchPolicies.includes(fetchPolicy), 36);
 }
 function validatePartialDataReturn(fetchPolicy, returnPartialData) {
     if (fetchPolicy === 'no-cache' && returnPartialData) {
@@ -827,45 +842,94 @@ function toApolloError(result) {
         ? new core.ApolloError({ graphQLErrors: result.errors })
         : result.error;
 }
-function useTrackedSubscriptions(subscription) {
-    var trackedSubscriptions = React.useRef(new Set());
-    trackedSubscriptions.current.add(subscription);
-    return function dispose() {
-        trackedSubscriptions.current.forEach(function (sub) { return sub.dispose(); });
-    };
+function useTrackedQueryRefs(queryRef) {
+    var trackedQueryRefs = React.useRef(new Set());
+    trackedQueryRefs.current.add(queryRef);
+    useStrictModeSafeCleanupEffect(function () {
+        trackedQueryRefs.current.forEach(function (sub) { return sub.dispose(); });
+    });
 }
 function useWatchQueryOptions(_a) {
     var query = _a.query, options = _a.options;
-    var watchQueryOptions = useDeepMemo(function () { return (tslib.__assign(tslib.__assign({}, options), { query: query, notifyOnNetworkStatusChange: true, nextFetchPolicy: void 0 })); }, [options, query]);
+    var watchQueryOptions = useDeepMemo(function () { return (tslib.__assign(tslib.__assign({}, options), { query: query, notifyOnNetworkStatusChange: false, nextFetchPolicy: void 0 })); }, [options, query]);
     if (globals.__DEV__) {
         validateOptions(watchQueryOptions);
     }
     return watchQueryOptions;
 }
-function shouldUseCachedResult(result, _a) {
-    var returnPartialData = _a.returnPartialData, fetchPolicy = _a.fetchPolicy;
-    if (result.networkStatus === core.NetworkStatus.refetch ||
-        result.networkStatus === core.NetworkStatus.fetchMore ||
-        result.networkStatus === core.NetworkStatus.error) {
-        return false;
-    }
-    switch (fetchPolicy) {
-        case void 0:
-        case 'cache-first':
-        case 'cache-and-network': {
-            return Boolean(result.data && (!result.partial || returnPartialData));
-        }
-        default:
-            return false;
+
+function useBackgroundQuery_experimental(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    var suspenseCache = useSuspenseCache(options.suspenseCache);
+    var client = useApolloClient(options.client);
+    var watchQueryOptions = useWatchQueryOptions({ query: query, options: options });
+    var variables = watchQueryOptions.variables;
+    var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
+    var cacheKey = [client, query, cache.canonicalStringify(variables)].concat(queryKey);
+    var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
+        return client.watchQuery(watchQueryOptions);
+    });
+    var _b = React.useState(function () { return new Map([[queryRef.key, queryRef.promise]]); }), promiseCache = _b[0], setPromiseCache = _b[1];
+    useTrackedQueryRefs(queryRef);
+    var fetchMore = React.useCallback(function (options) {
+        var promise = queryRef.fetchMore(options);
+        setPromiseCache(function (promiseCache) {
+            return new Map(promiseCache).set(queryRef.key, promise);
+        });
+        return promise;
+    }, [queryRef]);
+    var refetch = React.useCallback(function (variables) {
+        var promise = queryRef.refetch(variables);
+        setPromiseCache(function (promiseCache) {
+            return new Map(promiseCache).set(queryRef.key, promise);
+        });
+        return promise;
+    }, [queryRef]);
+    queryRef.promiseCache = promiseCache;
+    return React.useMemo(function () {
+        return [
+            queryRef,
+            {
+                fetchMore: fetchMore,
+                refetch: refetch,
+            },
+        ];
+    }, [queryRef, fetchMore, refetch]);
+}
+function useReadQuery_experimental(queryRef) {
+    var _a = React.useState(0), forceUpdate = _a[1];
+    globals.__DEV__ ? globals.invariant(queryRef.promiseCache, 'It appears that `useReadQuery` was used outside of `useBackgroundQuery`. ' +
+        '`useReadQuery` is only supported for use with `useBackgroundQuery`. ' +
+        'Please ensure you are passing the `queryRef` returned from `useBackgroundQuery`.') : globals.invariant(queryRef.promiseCache, 34);
+    var promise = queryRef.promiseCache.get(queryRef.key);
+    if (!promise) {
+        promise = queryRef.promise;
+        queryRef.promiseCache.set(queryRef.key, promise);
     }
+    React.useEffect(function () {
+        return queryRef.listen(function (promise) {
+            queryRef.promiseCache.set(queryRef.key, promise);
+            forceUpdate(function (prevState) { return prevState + 1; });
+        });
+    }, [queryRef]);
+    var result = __use(promise);
+    return React.useMemo(function () {
+        return {
+            data: result.data,
+            networkStatus: result.networkStatus,
+            error: toApolloError(result),
+        };
+    }, [result]);
 }
 
 exports.useApolloClient = useApolloClient;
+exports.useBackgroundQuery_experimental = useBackgroundQuery_experimental;
 exports.useFragment_experimental = useFragment_experimental;
 exports.useLazyQuery = useLazyQuery;
 exports.useMutation = useMutation;
 exports.useQuery = useQuery;
 exports.useReactiveVar = useReactiveVar;
+exports.useReadQuery_experimental = useReadQuery_experimental;
 exports.useSubscription = useSubscription;
 exports.useSuspenseQuery_experimental = useSuspenseQuery_experimental;
 //# sourceMappingURL=hooks.cjs.map