@apollo/client 3.8.0-alpha.13 → 3.8.0-alpha.15

package/apollo-client.cjs

@@ -67,7 +67,7 @@ function shouldInclude(_a, variables) {
         var evaledValue = false;
         if (ifArgument.value.kind === 'Variable') {
             evaledValue = variables && variables[ifArgument.value.name.value];
-            __DEV__ ? tsInvariant.invariant(evaledValue !== void 0, "Invalid variable referenced in @".concat(directive.name.value, " directive.")) : tsInvariant.invariant(evaledValue !== void 0, 41);
+            __DEV__ ? tsInvariant.invariant(evaledValue !== void 0, "Invalid variable referenced in @".concat(directive.name.value, " directive.")) : tsInvariant.invariant(evaledValue !== void 0, 43);
         }
         else {
             evaledValue = ifArgument.value.value;
@@ -103,13 +103,13 @@ function getInclusionDirectives(directives) {
                 return;
             var directiveArguments = directive.arguments;
             var directiveName = directive.name.value;
-            __DEV__ ? tsInvariant.invariant(directiveArguments && directiveArguments.length === 1, "Incorrect number of arguments for the @".concat(directiveName, " directive.")) : tsInvariant.invariant(directiveArguments && directiveArguments.length === 1, 42);
+            __DEV__ ? tsInvariant.invariant(directiveArguments && directiveArguments.length === 1, "Incorrect number of arguments for the @".concat(directiveName, " directive.")) : tsInvariant.invariant(directiveArguments && directiveArguments.length === 1, 44);
             var ifArgument = directiveArguments[0];
-            __DEV__ ? tsInvariant.invariant(ifArgument.name && ifArgument.name.value === 'if', "Invalid argument for the @".concat(directiveName, " directive.")) : tsInvariant.invariant(ifArgument.name && ifArgument.name.value === 'if', 43);
+            __DEV__ ? tsInvariant.invariant(ifArgument.name && ifArgument.name.value === 'if', "Invalid argument for the @".concat(directiveName, " directive.")) : tsInvariant.invariant(ifArgument.name && ifArgument.name.value === 'if', 45);
             var ifValue = ifArgument.value;
             __DEV__ ? tsInvariant.invariant(ifValue &&
                 (ifValue.kind === 'Variable' || ifValue.kind === 'BooleanValue'), "Argument for the @".concat(directiveName, " directive must be a variable or a boolean value.")) : tsInvariant.invariant(ifValue &&
-                (ifValue.kind === 'Variable' || ifValue.kind === 'BooleanValue'), 44);
+                (ifValue.kind === 'Variable' || ifValue.kind === 'BooleanValue'), 46);
             result.push({ directive: directive, ifArgument: ifArgument });
         });
     }
@@ -122,14 +122,14 @@ function getFragmentQueryDocument(document, fragmentName) {
     document.definitions.forEach(function (definition) {
         if (definition.kind === 'OperationDefinition') {
             throw __DEV__ ? new tsInvariant.InvariantError("Found a ".concat(definition.operation, " operation").concat(definition.name ? " named '".concat(definition.name.value, "'") : '', ". ") +
-                'No operations are allowed when using a fragment as a query. Only fragments are allowed.') : new tsInvariant.InvariantError(45);
+                'No operations are allowed when using a fragment as a query. Only fragments are allowed.') : new tsInvariant.InvariantError(47);
         }
         if (definition.kind === 'FragmentDefinition') {
             fragments.push(definition);
         }
     });
     if (typeof actualFragmentName === 'undefined') {
-        __DEV__ ? tsInvariant.invariant(fragments.length === 1, "Found ".concat(fragments.length, " fragments. `fragmentName` must be provided when there is not exactly 1 fragment.")) : tsInvariant.invariant(fragments.length === 1, 46);
+        __DEV__ ? tsInvariant.invariant(fragments.length === 1, "Found ".concat(fragments.length, " fragments. `fragmentName` must be provided when there is not exactly 1 fragment.")) : tsInvariant.invariant(fragments.length === 1, 48);
         actualFragmentName = fragments[0].name.value;
     }
     var query = tslib.__assign(tslib.__assign({}, document), { definitions: tslib.__spreadArray([
@@ -170,7 +170,7 @@ function getFragmentFromSelection(selection, fragmentMap) {
                 return fragmentMap(fragmentName);
             }
             var fragment = fragmentMap && fragmentMap[fragmentName];
-            __DEV__ ? tsInvariant.invariant(fragment, "No fragment named ".concat(fragmentName)) : tsInvariant.invariant(fragment, 47);
+            __DEV__ ? tsInvariant.invariant(fragment, "No fragment named ".concat(fragmentName)) : tsInvariant.invariant(fragment, 49);
             return fragment || null;
         }
         default:
@@ -181,12 +181,6 @@ function getFragmentFromSelection(selection, fragmentMap) {
 function isNonNullObject(obj) {
     return obj !== null && typeof obj === 'object';
 }
-function isPlainObject(obj) {
-    return (obj !== null &&
-        typeof obj === 'object' &&
-        (Object.getPrototypeOf(obj) === Object.prototype ||
-            Object.getPrototypeOf(obj) === null));
-}
 
 function makeReference(id) {
     return { __ref: String(id) };
@@ -260,7 +254,7 @@ function valueToObjectRepresentation(argObj, name, value, variables) {
     else {
         throw __DEV__ ? new tsInvariant.InvariantError("The inline argument \"".concat(name.value, "\" of kind \"").concat(value.kind, "\"") +
             'is not supported. Use variables instead of inline arguments to ' +
-            'overcome this limitation.') : new tsInvariant.InvariantError(56);
+            'overcome this limitation.') : new tsInvariant.InvariantError(58);
     }
 }
 function storeKeyNameFromField(field, variables) {
@@ -369,9 +363,7 @@ function resultKeyNameFromField(field) {
     return field.alias ? field.alias.value : field.name.value;
 }
 function getTypenameFromResult(result, selectionSet, fragmentMap) {
-    if (typeof result.__typename === 'string') {
-        return result.__typename;
-    }
+    var fragments;
     for (var _i = 0, _a = selectionSet.selections; _i < _a.length; _i++) {
         var selection = _a[_i];
         if (isField(selection)) {
@@ -379,7 +371,19 @@ function getTypenameFromResult(result, selectionSet, fragmentMap) {
                 return result[resultKeyNameFromField(selection)];
             }
         }
+        else if (fragments) {
+            fragments.push(selection);
+        }
         else {
+            fragments = [selection];
+        }
+    }
+    if (typeof result.__typename === 'string') {
+        return result.__typename;
+    }
+    if (fragments) {
+        for (var _b = 0, fragments_1 = fragments; _b < fragments_1.length; _b++) {
+            var selection = fragments_1[_b];
             var typename = getTypenameFromResult(result, getFragmentFromSelection(selection, fragmentMap).selectionSet, fragmentMap);
             if (typeof typename === 'string') {
                 return typename;
@@ -395,16 +399,16 @@ function isInlineFragment(selection) {
 }
 
 function checkDocument(doc) {
-    __DEV__ ? tsInvariant.invariant(doc && doc.kind === 'Document', "Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a \"gql\" tag? http://docs.apollostack.com/apollo-client/core.html#gql") : tsInvariant.invariant(doc && doc.kind === 'Document', 48);
+    __DEV__ ? tsInvariant.invariant(doc && doc.kind === 'Document', "Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a \"gql\" tag? http://docs.apollostack.com/apollo-client/core.html#gql") : tsInvariant.invariant(doc && doc.kind === 'Document', 50);
     var operations = doc.definitions
         .filter(function (d) { return d.kind !== 'FragmentDefinition'; })
         .map(function (definition) {
         if (definition.kind !== 'OperationDefinition') {
-            throw __DEV__ ? new tsInvariant.InvariantError("Schema type definitions not allowed in queries. Found: \"".concat(definition.kind, "\"")) : new tsInvariant.InvariantError(49);
+            throw __DEV__ ? new tsInvariant.InvariantError("Schema type definitions not allowed in queries. Found: \"".concat(definition.kind, "\"")) : new tsInvariant.InvariantError(51);
         }
         return definition;
     });
-    __DEV__ ? tsInvariant.invariant(operations.length <= 1, "Ambiguous GraphQL document: contains ".concat(operations.length, " operations")) : tsInvariant.invariant(operations.length <= 1, 50);
+    __DEV__ ? tsInvariant.invariant(operations.length <= 1, "Ambiguous GraphQL document: contains ".concat(operations.length, " operations")) : tsInvariant.invariant(operations.length <= 1, 52);
     return doc;
 }
 function getOperationDefinition(doc) {
@@ -427,14 +431,14 @@ function getFragmentDefinitions(doc) {
 }
 function getQueryDefinition(doc) {
     var queryDef = getOperationDefinition(doc);
-    __DEV__ ? tsInvariant.invariant(queryDef && queryDef.operation === 'query', 'Must contain a query definition.') : tsInvariant.invariant(queryDef && queryDef.operation === 'query', 51);
+    __DEV__ ? tsInvariant.invariant(queryDef && queryDef.operation === 'query', 'Must contain a query definition.') : tsInvariant.invariant(queryDef && queryDef.operation === 'query', 53);
     return queryDef;
 }
 function getFragmentDefinition(doc) {
-    __DEV__ ? tsInvariant.invariant(doc.kind === 'Document', "Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a \"gql\" tag? http://docs.apollostack.com/apollo-client/core.html#gql") : tsInvariant.invariant(doc.kind === 'Document', 52);
-    __DEV__ ? tsInvariant.invariant(doc.definitions.length <= 1, 'Fragment must have exactly one definition.') : tsInvariant.invariant(doc.definitions.length <= 1, 53);
+    __DEV__ ? tsInvariant.invariant(doc.kind === 'Document', "Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a \"gql\" tag? http://docs.apollostack.com/apollo-client/core.html#gql") : tsInvariant.invariant(doc.kind === 'Document', 54);
+    __DEV__ ? tsInvariant.invariant(doc.definitions.length <= 1, 'Fragment must have exactly one definition.') : tsInvariant.invariant(doc.definitions.length <= 1, 55);
     var fragmentDef = doc.definitions[0];
-    __DEV__ ? tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 'Must be a fragment definition.') : tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 54);
+    __DEV__ ? tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 'Must be a fragment definition.') : tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 56);
     return fragmentDef;
 }
 function getMainDefinition(queryDoc) {
@@ -457,7 +461,7 @@ function getMainDefinition(queryDoc) {
     if (fragmentDefinition) {
         return fragmentDefinition;
     }
-    throw __DEV__ ? new tsInvariant.InvariantError('Expected a parsed GraphQL query with a query, mutation, subscription, or a fragment.') : new tsInvariant.InvariantError(55);
+    throw __DEV__ ? new tsInvariant.InvariantError('Expected a parsed GraphQL query with a query, mutation, subscription, or a fragment.') : new tsInvariant.InvariantError(57);
 }
 function getDefaultValues(definition) {
     var defaultValues = Object.create(null);
@@ -1236,51 +1240,6 @@ function isNodeReadableStream(value) {
     return !!value.pipe;
 }
 
-function omitDeep(value, key) {
-    return __omitDeep(value, key);
-}
-function __omitDeep(value, key, known) {
-    if (known === void 0) { known = new Map(); }
-    if (known.has(value)) {
-        return known.get(value);
-    }
-    var modified = false;
-    if (Array.isArray(value)) {
-        var array_1 = [];
-        known.set(value, array_1);
-        value.forEach(function (value, index) {
-            var result = __omitDeep(value, key, known);
-            modified || (modified = result !== value);
-            array_1[index] = result;
-        });
-        if (modified) {
-            return array_1;
-        }
-    }
-    else if (isPlainObject(value)) {
-        var obj_1 = Object.create(Object.getPrototypeOf(value));
-        known.set(value, obj_1);
-        Object.keys(value).forEach(function (k) {
-            if (k === key) {
-                modified = true;
-            }
-            else {
-                var result = __omitDeep(value[k], key, known);
-                modified || (modified = result !== value[k]);
-                obj_1[k] = result;
-            }
-        });
-        if (modified) {
-            return obj_1;
-        }
-    }
-    return value;
-}
-
-function stripTypename(value) {
-    return omitDeep(value, '__typename');
-}
-
 function fromError(errorValue) {
     return new zenObservableTs.Observable(function (observer) {
         observer.error(errorValue);
@@ -1501,7 +1460,7 @@ var concat = ApolloLink.concat;
 
 var execute = ApolloLink.execute;
 
-var version = '3.8.0-alpha.13';
+var version = '3.8.0-alpha.15';
 
 function asyncIterator(source) {
     var _a;
@@ -1903,7 +1862,7 @@ function selectHttpOptionsAndBodyInternal(operation, printer) {
         options.headers = removeDuplicateHeaders(options.headers, http.preserveHeaderCase);
     }
     var operationName = operation.operationName, extensions = operation.extensions, variables = operation.variables, query = operation.query;
-    var body = { operationName: operationName, variables: stripTypename(variables) };
+    var body = { operationName: operationName, variables: variables };
     if (http.includeExtensions)
         body.extensions = extensions;
     if (http.includeQuery)
@@ -3381,7 +3340,7 @@ var Policies = (function () {
         var policy = typename && this.getTypePolicy(typename);
         var keyFn = policy && policy.keyFn || this.config.dataIdFromObject;
         while (keyFn) {
-            var specifierOrId = keyFn(object, context);
+            var specifierOrId = keyFn(tslib.__assign(tslib.__assign({}, object), storeObject), context);
             if (isArray(specifierOrId)) {
                 keyFn = keyFieldsFnFromSpecifier(specifierOrId);
             }
@@ -6735,18 +6694,23 @@ var contextKey = canUseSymbol
     ? Symbol.for('__APOLLO_CONTEXT__')
     : '__APOLLO_CONTEXT__';
 function getApolloContext() {
-    var context = React__namespace.createContext[contextKey];
+    __DEV__ ? tsInvariant.invariant('createContext' in React__namespace, 'Invoking `getApolloContext` in an environment where `React.createContext` is not available.\n' +
+        'The Apollo Client functionality you are trying to use is only available in React Client Components.\n' +
+        'Please make sure to add "use client" at the top of your file.\n' +
+        'For more information, see https://nextjs.org/docs/getting-started/react-essentials#client-components') : tsInvariant.invariant('createContext' in React__namespace, 29);
+    var contextStorage = global$1[contextKey];
+    if (!contextStorage) {
+        contextStorage = global$1[contextKey] = new Map();
+    }
+    var context = contextStorage.get(React__namespace);
     if (!context) {
-        Object.defineProperty(React__namespace.createContext, contextKey, {
-            value: context = React__namespace.createContext({}),
-            enumerable: false,
-            writable: false,
-            configurable: true,
-        });
+        context = React__namespace.createContext({});
         context.displayName = 'ApolloContext';
+        contextStorage.set(React__namespace, context);
     }
     return context;
 }
+var resetApolloContext = getApolloContext;
 
 var ApolloConsumer = function (props) {
     var ApolloContext = getApolloContext();
@@ -6760,18 +6724,13 @@ var ApolloConsumer = function (props) {
 var ApolloProvider = function (_a) {
     var client = _a.client, suspenseCache = _a.suspenseCache, children = _a.children;
     var ApolloContext = getApolloContext();
-    return (React__namespace.createElement(ApolloContext.Consumer, null, function (context) {
-        if (context === void 0) { context = {}; }
-        if (client && context.client !== client) {
-            context = Object.assign({}, context, { client: client });
-        }
-        if (suspenseCache) {
-            context = Object.assign({}, context, { suspenseCache: suspenseCache });
-        }
-        __DEV__ ? tsInvariant.invariant(context.client, 'ApolloProvider was not passed a client instance. Make ' +
-            'sure you pass in your client via the "client" prop.') : tsInvariant.invariant(context.client, 29);
-        return (React__namespace.createElement(ApolloContext.Provider, { value: context }, children));
-    }));
+    var parentContext = React__namespace.useContext(ApolloContext);
+    var context = React__namespace.useMemo(function () {
+        return tslib.__assign(tslib.__assign({}, parentContext), { client: client || parentContext.client, suspenseCache: suspenseCache || parentContext.suspenseCache });
+    }, [parentContext, client, suspenseCache]);
+    __DEV__ ? tsInvariant.invariant(context.client, 'ApolloProvider was not passed a client instance. Make ' +
+        'sure you pass in your client via the "client" prop.') : tsInvariant.invariant(context.client, 30);
+    return (React__namespace.createElement(ApolloContext.Provider, { value: context }, children));
 };
 
 function useApolloClient(override) {
@@ -6779,7 +6738,7 @@ function useApolloClient(override) {
     var client = override || context.client;
     __DEV__ ? tsInvariant.invariant(!!client, 'Could not find "client" in the context or passed in as an option. ' +
         'Wrap the root component in an <ApolloProvider>, or pass an ApolloClient ' +
-        'instance in via options.') : tsInvariant.invariant(!!client, 32);
+        'instance in via options.') : tsInvariant.invariant(!!client, 33);
     return client;
 }
 
@@ -6857,7 +6816,7 @@ function parser(document) {
     var variables, type, name;
     __DEV__ ? tsInvariant.invariant(!!document && !!document.kind, "Argument of ".concat(document, " passed to parser was not a valid GraphQL ") +
         "DocumentNode. You may need to use 'graphql-tag' or another method " +
-        "to convert your operation into a document") : tsInvariant.invariant(!!document && !!document.kind, 35);
+        "to convert your operation into a document") : tsInvariant.invariant(!!document && !!document.kind, 37);
     var fragments = [];
     var queries = [];
     var mutations = [];
@@ -6885,11 +6844,11 @@ function parser(document) {
     __DEV__ ? tsInvariant.invariant(!fragments.length ||
         (queries.length || mutations.length || subscriptions.length), "Passing only a fragment to 'graphql' is not yet supported. " +
         "You must include a query, subscription or mutation as well") : tsInvariant.invariant(!fragments.length ||
-        (queries.length || mutations.length || subscriptions.length), 36);
+        (queries.length || mutations.length || subscriptions.length), 38);
     __DEV__ ? tsInvariant.invariant(queries.length + mutations.length + subscriptions.length <= 1, "react-apollo only supports a query, subscription, or a mutation per HOC. " +
         "".concat(document, " had ").concat(queries.length, " queries, ").concat(subscriptions.length, " ") +
         "subscriptions and ".concat(mutations.length, " mutations. ") +
-        "You can use 'compose' to join multiple operation types to a component") : tsInvariant.invariant(queries.length + mutations.length + subscriptions.length <= 1, 37);
+        "You can use 'compose' to join multiple operation types to a component") : tsInvariant.invariant(queries.length + mutations.length + subscriptions.length <= 1, 39);
     type = queries.length ? exports.DocumentType.Query : exports.DocumentType.Mutation;
     if (!queries.length && !mutations.length)
         type = exports.DocumentType.Subscription;
@@ -6900,7 +6859,7 @@ function parser(document) {
             : subscriptions;
     __DEV__ ? tsInvariant.invariant(definitions.length === 1, "react-apollo only supports one definition per HOC. ".concat(document, " had ") +
         "".concat(definitions.length, " definitions. ") +
-        "You can use 'compose' to join multiple operation types to a component") : tsInvariant.invariant(definitions.length === 1, 38);
+        "You can use 'compose' to join multiple operation types to a component") : tsInvariant.invariant(definitions.length === 1, 40);
     var definition = definitions[0];
     variables = definition.variableDefinitions || [];
     if (definition.name && definition.name.kind === 'Name') {
@@ -6918,7 +6877,7 @@ function verifyDocumentType(document, type) {
     var requiredOperationName = operationName(type);
     var usedOperationName = operationName(operation.type);
     __DEV__ ? tsInvariant.invariant(operation.type === type, "Running a ".concat(requiredOperationName, " requires a graphql ") +
-        "".concat(requiredOperationName, ", but a ").concat(usedOperationName, " was used instead.")) : tsInvariant.invariant(operation.type === type, 39);
+        "".concat(requiredOperationName, ", but a ").concat(usedOperationName, " was used instead.")) : tsInvariant.invariant(operation.type === type, 41);
 }
 
 var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -7528,7 +7487,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 () {
@@ -7596,7 +7555,7 @@ function useSuspenseCache(override) {
     var suspenseCache = override || context.suspenseCache;
     __DEV__ ? tsInvariant.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.') : tsInvariant.invariant(suspenseCache, 33);
+        'or pass a SuspenseCache instance in via options.') : tsInvariant.invariant(suspenseCache, 35);
     return suspenseCache;
 }
 
@@ -7607,30 +7566,40 @@ function useSuspenseQuery_experimental(query, options) {
     var watchQueryOptions = useWatchQueryOptions({ query: query, options: options });
     var variables = watchQueryOptions.variables;
     var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
-    var _b = usePromiseVersion(), version = _b[0], setVersion = _b[1];
     var cacheKey = [client, query, canonicalStringify(variables)].concat(queryKey);
-    var subscription = suspenseCache.getSubscription(cacheKey, function () {
+    var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
         return client.watchQuery(watchQueryOptions);
     });
-    useTrackedSubscriptions(subscription);
+    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);
+    }
+    useTrackedQueryRefs(queryRef);
     React.useEffect(function () {
-        return subscription.listen(function () {
-            setVersion('main');
+        return queryRef.listen(function (promise) {
+            setPromiseCache(function (promiseCache) {
+                return new Map(promiseCache).set(queryRef.key, promise);
+            });
         });
-    }, [subscription]);
-    var promise = subscription.promises[version] || subscription.promises.main;
+    }, [queryRef]);
     var result = __use(promise);
     var fetchMore = React.useCallback(function (options) {
-        var promise = subscription.fetchMore(options);
-        setVersion('network');
+        var promise = queryRef.fetchMore(options);
+        setPromiseCache(function (previousPromiseCache) {
+            return new Map(previousPromiseCache).set(queryRef.key, promise);
+        });
         return promise;
-    }, [subscription]);
+    }, [queryRef]);
     var refetch = React.useCallback(function (variables) {
-        var promise = subscription.refetch(variables);
-        setVersion('network');
+        var promise = queryRef.refetch(variables);
+        setPromiseCache(function (previousPromiseCache) {
+            return new Map(previousPromiseCache).set(queryRef.key, promise);
+        });
         return promise;
-    }, [subscription]);
-    var subscribeToMore = React.useCallback(function (options) { return subscription.observable.subscribeToMore(options); }, [subscription]);
+    }, [queryRef]);
+    var subscribeToMore = React.useCallback(function (options) { return queryRef.observable.subscribeToMore(options); }, [queryRef]);
     return React.useMemo(function () {
         return {
             client: client,
@@ -7657,7 +7626,7 @@ function validateFetchPolicy(fetchPolicy) {
         'no-cache',
         'cache-and-network',
     ];
-    __DEV__ ? tsInvariant.invariant(supportedFetchPolicies.includes(fetchPolicy), "The fetch policy `".concat(fetchPolicy, "` is not supported with suspense.")) : tsInvariant.invariant(supportedFetchPolicies.includes(fetchPolicy), 34);
+    __DEV__ ? tsInvariant.invariant(supportedFetchPolicies.includes(fetchPolicy), "The fetch policy `".concat(fetchPolicy, "` is not supported with suspense.")) : tsInvariant.invariant(supportedFetchPolicies.includes(fetchPolicy), 36);
 }
 function validatePartialDataReturn(fetchPolicy, returnPartialData) {
     if (fetchPolicy === 'no-cache' && returnPartialData) {
@@ -7669,20 +7638,13 @@ function toApolloError(result) {
         ? new ApolloError({ graphQLErrors: result.errors })
         : result.error;
 }
-function useTrackedSubscriptions(subscription) {
-    var trackedSubscriptions = React.useRef(new Set());
-    trackedSubscriptions.current.add(subscription);
+function useTrackedQueryRefs(queryRef) {
+    var trackedQueryRefs = React.useRef(new Set());
+    trackedQueryRefs.current.add(queryRef);
     useStrictModeSafeCleanupEffect(function () {
-        trackedSubscriptions.current.forEach(function (sub) { return sub.dispose(); });
+        trackedQueryRefs.current.forEach(function (sub) { return sub.dispose(); });
     });
 }
-function usePromiseVersion() {
-    var _a = React.useState({
-        version: 'main',
-    }), version = _a[0].version, setState = _a[1];
-    var setVersion = React.useCallback(function (version) { return setState({ version: version }); }, []);
-    return [version, setVersion];
-}
 function useWatchQueryOptions(_a) {
     var query = _a.query, options = _a.options;
     var watchQueryOptions = useDeepMemo(function () { return (tslib.__assign(tslib.__assign({}, options), { query: query, notifyOnNetworkStatusChange: false, nextFetchPolicy: void 0 })); }, [options, query]);
@@ -7692,9 +7654,72 @@ function useWatchQueryOptions(_a) {
     return watchQueryOptions;
 }
 
-var QuerySubscription = (function () {
-    function QuerySubscription(observable, options) {
-        if (options === void 0) { options = Object.create(null); }
+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, 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];
+    __DEV__ ? tsInvariant.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`.') : tsInvariant.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]);
+}
+
+var QueryReference = (function () {
+    function QueryReference(observable, options) {
         var _this = this;
         var _a;
         this.listeners = new Set();
@@ -7706,13 +7731,14 @@ var QuerySubscription = (function () {
         this.dispose = this.dispose.bind(this);
         this.observable = observable;
         this.result = observable.getCurrentResult(false);
+        this.key = options.key;
         if (options.onDispose) {
             this.onDispose = options.onDispose;
         }
         if (isNetworkRequestSettled(this.result.networkStatus) ||
             (this.result.data &&
                 (!this.result.partial || this.observable.options.returnPartialData))) {
-            this.promises = { main: createFulfilledPromise(this.result) };
+            this.promise = createFulfilledPromise(this.result);
             this.initialized = true;
             this.refetching = false;
         }
@@ -7720,17 +7746,15 @@ var QuerySubscription = (function () {
             next: this.handleNext,
             error: this.handleError,
         });
-        if (!this.promises) {
-            this.promises = {
-                main: new Promise(function (resolve, reject) {
-                    _this.resolve = resolve;
-                    _this.reject = reject;
-                }),
-            };
+        if (!this.promise) {
+            this.promise = new Promise(function (resolve, reject) {
+                _this.resolve = resolve;
+                _this.reject = reject;
+            });
         }
         this.autoDisposeTimeoutId = setTimeout(this.dispose, (_a = options.autoDisposeTimeoutMs) !== null && _a !== void 0 ? _a : 30000);
     }
-    QuerySubscription.prototype.listen = function (listener) {
+    QueryReference.prototype.listen = function (listener) {
         var _this = this;
         clearTimeout(this.autoDisposeTimeoutId);
         this.listeners.add(listener);
@@ -7738,26 +7762,33 @@ var QuerySubscription = (function () {
             _this.listeners.delete(listener);
         };
     };
-    QuerySubscription.prototype.refetch = function (variables) {
+    QueryReference.prototype.refetch = function (variables) {
         this.refetching = true;
         var promise = this.observable.refetch(variables);
-        this.promises.network = promise;
+        this.promise = promise;
         return promise;
     };
-    QuerySubscription.prototype.fetchMore = function (options) {
+    QueryReference.prototype.fetchMore = function (options) {
         var promise = this.observable.fetchMore(options);
-        this.promises.network = promise;
+        this.promise = promise;
         return promise;
     };
-    QuerySubscription.prototype.dispose = function () {
+    QueryReference.prototype.dispose = function () {
         this.subscription.unsubscribe();
         this.onDispose();
     };
-    QuerySubscription.prototype.onDispose = function () {
+    QueryReference.prototype.onDispose = function () {
     };
-    QuerySubscription.prototype.handleNext = function (result) {
-        if (!this.initialized) {
+    QueryReference.prototype.handleNext = function (result) {
+        if (!this.initialized || this.refetching) {
+            if (!isNetworkRequestSettled(result.networkStatus)) {
+                return;
+            }
+            if (this.result.data && result.data === void 0) {
+                result.data = this.result.data;
+            }
             this.initialized = true;
+            this.refetching = false;
             this.result = result;
             this.resolve(result);
             return;
@@ -7765,14 +7796,11 @@ var QuerySubscription = (function () {
         if (result.data === this.result.data) {
             return;
         }
-        if (this.result.data && result.data === void 0) {
-            result.data = this.result.data;
-        }
         this.result = result;
-        this.promises.main = createFulfilledPromise(result);
-        this.deliver();
+        this.promise = createFulfilledPromise(result);
+        this.deliver(this.promise);
     };
-    QuerySubscription.prototype.handleError = function (error) {
+    QueryReference.prototype.handleError = function (error) {
         var result = tslib.__assign(tslib.__assign({}, this.result), { error: error, networkStatus: exports.NetworkStatus.error });
         this.result = result;
         if (!this.initialized || this.refetching) {
@@ -7782,34 +7810,35 @@ var QuerySubscription = (function () {
             return;
         }
         this.result = result;
-        this.promises.main = result.data
+        this.promise = result.data
             ? createFulfilledPromise(result)
             : createRejectedPromise(result);
-        this.deliver();
+        this.deliver(this.promise);
     };
-    QuerySubscription.prototype.deliver = function () {
-        this.listeners.forEach(function (listener) { return listener(); });
+    QueryReference.prototype.deliver = function (promise) {
+        this.listeners.forEach(function (listener) { return listener(promise); });
     };
-    return QuerySubscription;
+    return QueryReference;
 }());
 
 var SuspenseCache = (function () {
     function SuspenseCache(options) {
         if (options === void 0) { options = Object.create(null); }
         this.cacheKeys = new trie.Trie(canUseWeakMap, function (cacheKey) { return cacheKey; });
-        this.subscriptions = new Map();
+        this.queryRefs = new Map();
         this.options = options;
     }
-    SuspenseCache.prototype.getSubscription = function (cacheKey, createObservable) {
+    SuspenseCache.prototype.getQueryRef = function (cacheKey, createObservable) {
         var _this = this;
         var stableCacheKey = this.cacheKeys.lookupArray(cacheKey);
-        if (!this.subscriptions.has(stableCacheKey)) {
-            this.subscriptions.set(stableCacheKey, new QuerySubscription(createObservable(), {
+        if (!this.queryRefs.has(stableCacheKey)) {
+            this.queryRefs.set(stableCacheKey, new QueryReference(createObservable(), {
+                key: stableCacheKey,
                 autoDisposeTimeoutMs: this.options.autoDisposeTimeoutMs,
-                onDispose: function () { return _this.subscriptions.delete(stableCacheKey); },
+                onDispose: function () { return _this.queryRefs.delete(stableCacheKey); },
             }));
         }
-        return this.subscriptions.get(stableCacheKey);
+        return this.queryRefs.get(stableCacheKey);
     };
     return SuspenseCache;
 }());
@@ -7854,7 +7883,7 @@ exports.mergeOptions = mergeOptions;
 exports.operationName = operationName;
 exports.parseAndCheckHttpResponse = parseAndCheckHttpResponse;
 exports.parser = parser;
-exports.resetApolloContext = getApolloContext;
+exports.resetApolloContext = resetApolloContext;
 exports.rewriteURIForGET = rewriteURIForGET;
 exports.selectHttpOptionsAndBody = selectHttpOptionsAndBody;
 exports.selectHttpOptionsAndBodyInternal = selectHttpOptionsAndBodyInternal;
@@ -7864,11 +7893,13 @@ exports.split = split;
 exports.throwServerError = throwServerError;
 exports.toPromise = toPromise;
 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=apollo-client.cjs.map