@apollo/client 3.7.1 → 3.8.0-alpha.0

package/README.md

@@ -19,7 +19,7 @@ The Apollo Client API reference can be found at: <br/>
 Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apollo's official learning platform: <br/>
 [https://odyssey.apollographql.com/](https://odyssey.apollographql.com/)
 
-## Apollo Maintainers
+## Maintainers
 
 - [@benjamn](https://github.com/benjamn)
 - [@alessbell](https://github.com/alessbell)
@@ -33,10 +33,10 @@ Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apo
 
 [Apollo](https://apollographql.com/) builds open-source software and a graph platform to unify GraphQL across your apps and services. We help you ship faster with:
 
-* [Apollo Studio](https://www.apollographql.com/studio/develop/) – A free, end-to-end platform for managing your GraphQL lifecycle. Track your GraphQL schemas in a hosted registry to create a source of truth for everything in your graph. Studio provides an IDE (Apollo Explorer) so you can explore data, collaborate on queries, observe usage, and safely make schema changes.
-* [Apollo Federation](https://www.apollographql.com/apollo-federation) – The industry-standard open architecture for building a distributed graph. Use Apollo’s gateway to compose a unified graph from multiple subgraphs, determine a query plan, and route requests across your services.
-* [Apollo Client](https://www.apollographql.com/apollo-client/) – The most popular GraphQL client for the web. Apollo also builds and maintains [Apollo iOS](https://github.com/apollographql/apollo-ios) and [Apollo Android](https://github.com/apollographql/apollo-android).
-* [Apollo Server](https://www.apollographql.com/docs/apollo-server/) – A production-ready JavaScript GraphQL server that connects to any microservice, API, or database. Compatible with all popular JavaScript frameworks and deployable in serverless environments.
+- [Apollo Studio](https://www.apollographql.com/studio/develop/) – A free, end-to-end platform for managing your GraphQL lifecycle. Track your GraphQL schemas in a hosted registry to create a source of truth for everything in your graph. Studio provides an IDE (Apollo Explorer) so you can explore data, collaborate on queries, observe usage, and safely make schema changes.
+- [Apollo Federation](https://www.apollographql.com/apollo-federation) – The industry-standard open architecture for building a distributed graph. Use Apollo’s gateway to compose a unified graph from multiple subgraphs, determine a query plan, and route requests across your services.
+- [Apollo Client](https://www.apollographql.com/apollo-client/) – The most popular GraphQL client for the web. Apollo also builds and maintains [Apollo iOS](https://github.com/apollographql/apollo-ios) and [Apollo Android](https://github.com/apollographql/apollo-android).
+- [Apollo Server](https://www.apollographql.com/docs/apollo-server/) – A production-ready JavaScript GraphQL server that connects to any microservice, API, or database. Compatible with all popular JavaScript frameworks and deployable in serverless environments.
 
 ## Learn how to build with Apollo
 

package/apollo-client.cjs

@@ -45,7 +45,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, 39);
+            __DEV__ ? tsInvariant.invariant(evaledValue !== void 0, "Invalid variable referenced in @".concat(directive.name.value, " directive.")) : tsInvariant.invariant(evaledValue !== void 0, 41);
         }
         else {
             evaledValue = ifArgument.value.value;
@@ -81,13 +81,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, 40);
+            __DEV__ ? tsInvariant.invariant(directiveArguments && directiveArguments.length === 1, "Incorrect number of arguments for the @".concat(directiveName, " directive.")) : tsInvariant.invariant(directiveArguments && directiveArguments.length === 1, 42);
             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', 41);
+            __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);
             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'), 42);
+                (ifValue.kind === 'Variable' || ifValue.kind === 'BooleanValue'), 44);
             result.push({ directive: directive, ifArgument: ifArgument });
         });
     }
@@ -100,14 +100,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(43);
+                'No operations are allowed when using a fragment as a query. Only fragments are allowed.') : new tsInvariant.InvariantError(45);
         }
         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, 44);
+        __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);
         actualFragmentName = fragments[0].name.value;
     }
     var query = tslib.__assign(tslib.__assign({}, document), { definitions: tslib.__spreadArray([
@@ -148,7 +148,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, 45);
+            __DEV__ ? tsInvariant.invariant(fragment, "No fragment named ".concat(fragmentName)) : tsInvariant.invariant(fragment, 47);
             return fragment || null;
         }
         default:
@@ -232,7 +232,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(54);
+            'overcome this limitation.') : new tsInvariant.InvariantError(56);
     }
 }
 function storeKeyNameFromField(field, variables) {
@@ -366,16 +366,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', 46);
+    __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);
     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(47);
+            throw __DEV__ ? new tsInvariant.InvariantError("Schema type definitions not allowed in queries. Found: \"".concat(definition.kind, "\"")) : new tsInvariant.InvariantError(49);
         }
         return definition;
     });
-    __DEV__ ? tsInvariant.invariant(operations.length <= 1, "Ambiguous GraphQL document: contains ".concat(operations.length, " operations")) : tsInvariant.invariant(operations.length <= 1, 48);
+    __DEV__ ? tsInvariant.invariant(operations.length <= 1, "Ambiguous GraphQL document: contains ".concat(operations.length, " operations")) : tsInvariant.invariant(operations.length <= 1, 50);
     return doc;
 }
 function getOperationDefinition(doc) {
@@ -394,14 +394,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', 49);
+    __DEV__ ? tsInvariant.invariant(queryDef && queryDef.operation === 'query', 'Must contain a query definition.') : tsInvariant.invariant(queryDef && queryDef.operation === 'query', 51);
     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', 50);
-    __DEV__ ? tsInvariant.invariant(doc.definitions.length <= 1, 'Fragment must have exactly one definition.') : tsInvariant.invariant(doc.definitions.length <= 1, 51);
+    __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);
     var fragmentDef = doc.definitions[0];
-    __DEV__ ? tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 'Must be a fragment definition.') : tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 52);
+    __DEV__ ? tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 'Must be a fragment definition.') : tsInvariant.invariant(fragmentDef.kind === 'FragmentDefinition', 54);
     return fragmentDef;
 }
 function getMainDefinition(queryDoc) {
@@ -424,7 +424,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(53);
+    throw __DEV__ ? new tsInvariant.InvariantError('Expected a parsed GraphQL query with a query, mutation, subscription, or a fragment.') : new tsInvariant.InvariantError(55);
 }
 function getDefaultValues(definition) {
     var defaultValues = Object.create(null);
@@ -1300,7 +1300,7 @@ var concat = ApolloLink.concat;
 
 var execute = ApolloLink.execute;
 
-var version = '3.7.1';
+var version = '3.8.0-alpha.0';
 
 function isNodeResponse(value) {
     return !!value.body;
@@ -4201,6 +4201,7 @@ var ApolloError = (function (_super) {
     function ApolloError(_a) {
         var graphQLErrors = _a.graphQLErrors, clientErrors = _a.clientErrors, networkError = _a.networkError, errorMessage = _a.errorMessage, extraInfo = _a.extraInfo;
         var _this = _super.call(this, errorMessage) || this;
+        _this.name = 'ApolloError';
         _this.graphQLErrors = graphQLErrors || [];
         _this.clientErrors = clientErrors || [];
         _this.networkError = networkError || null;
@@ -4232,13 +4233,14 @@ var ObservableQuery = (function (_super) {
     function ObservableQuery(_a) {
         var queryManager = _a.queryManager, queryInfo = _a.queryInfo, options = _a.options;
         var _this = _super.call(this, function (observer) {
+            var _a = options.fetchOnFirstSubscribe, fetchOnFirstSubscribe = _a === void 0 ? true : _a;
             try {
                 var subObserver = observer._subscription._observer;
                 if (subObserver && !subObserver.error) {
                     subObserver.error = defaultSubscriptionObserverErrorCallback;
                 }
             }
-            catch (_a) { }
+            catch (_b) { }
             var first = !_this.observers.size;
             _this.observers.add(observer);
             var last = _this.last;
@@ -4248,7 +4250,7 @@ var ObservableQuery = (function (_super) {
             else if (last && last.result) {
                 observer.next && observer.next(last.result);
             }
-            if (first) {
+            if (first && fetchOnFirstSubscribe) {
                 _this.reobserve().catch(function () { });
             }
             return function () {
@@ -5174,13 +5176,13 @@ var QueryInfo = (function () {
     };
     QueryInfo.prototype.markResult = function (result, document, options, cacheWriteBehavior) {
         var _this = this;
+        var merger = new DeepMerger();
         var graphQLErrors = isNonEmptyArray(result.errors)
             ? result.errors.slice(0)
             : [];
         this.reset();
         if ('incremental' in result && isNonEmptyArray(result.incremental)) {
             var mergedData_1 = this.getDiff().result;
-            var merger_1 = new DeepMerger();
             result.incremental.forEach(function (_a) {
                 var data = _a.data, path = _a.path, errors = _a.errors;
                 for (var i = path.length - 1; i >= 0; --i) {
@@ -5193,10 +5195,14 @@ var QueryInfo = (function () {
                 if (errors) {
                     graphQLErrors.push.apply(graphQLErrors, errors);
                 }
-                mergedData_1 = merger_1.merge(mergedData_1, data);
+                mergedData_1 = merger.merge(mergedData_1, data);
             });
             result.data = mergedData_1;
         }
+        else if ('hasNext' in result && result.hasNext) {
+            var diff = this.getDiff();
+            result.data = merger.merge(diff.result, result.data);
+        }
         this.graphQLErrors = graphQLErrors;
         if (options.fetchPolicy === 'no-cache') {
             this.updateLastDiff({ result: result.data, complete: true }, this.getDiffOptions(options.variables));
@@ -5850,7 +5856,6 @@ var QueryManager = (function () {
     };
     QueryManager.prototype.getResultsFromLink = function (queryInfo, cacheWriteBehavior, options) {
         var requestId = queryInfo.lastRequestId = this.generateRequestId();
-        options = cloneDeep(options);
         var linkDocument = this.cache.transformForLink(this.transform(queryInfo.document).document);
         return asyncMap(this.getObservableFromLink(linkDocument, options.context, options.variables), function (result) {
             var graphQLErrors = isNonEmptyArray(result.errors)
@@ -6149,7 +6154,7 @@ var ApolloClient = (function () {
         if (connectToDevTools && typeof window === 'object') {
             window.__APOLLO_CLIENT__ = this;
         }
-        if (!hasSuggestedDevtools && __DEV__) {
+        if (!hasSuggestedDevtools && connectToDevTools && __DEV__) {
             hasSuggestedDevtools = true;
             if (typeof window !== 'undefined' &&
                 window.document &&
@@ -6369,13 +6374,16 @@ var ApolloConsumer = function (props) {
 };
 
 var ApolloProvider = function (_a) {
-    var client = _a.client, children = _a.children;
+    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, 28);
         return (React__namespace.createElement(ApolloContext.Provider, { value: context }, children));
@@ -6465,7 +6473,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, 32);
+        "to convert your operation into a document") : tsInvariant.invariant(!!document && !!document.kind, 34);
     var fragments = [];
     var queries = [];
     var mutations = [];
@@ -6493,11 +6501,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), 33);
+        (queries.length || mutations.length || subscriptions.length), 35);
     __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, 34);
+        "You can use 'compose' to join multiple operation types to a component") : tsInvariant.invariant(queries.length + mutations.length + subscriptions.length <= 1, 36);
     type = queries.length ? exports.DocumentType.Query : exports.DocumentType.Mutation;
     if (!queries.length && !mutations.length)
         type = exports.DocumentType.Subscription;
@@ -6508,7 +6516,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, 35);
+        "You can use 'compose' to join multiple operation types to a component") : tsInvariant.invariant(definitions.length === 1, 37);
     var definition = definitions[0];
     variables = definition.variableDefinitions || [];
     if (definition.name && definition.name.kind === 'Name') {
@@ -6526,7 +6534,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, 36);
+        "".concat(requiredOperationName, ", but a ").concat(usedOperationName, " was used instead.")) : tsInvariant.invariant(operation.type === type, 38);
 }
 
 var hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -6753,16 +6761,18 @@ var InternalState = (function () {
         }
         this.result = nextResult;
         this.forceUpdate();
-        this.handleErrorOrCompleted(nextResult);
+        this.handleErrorOrCompleted(nextResult, previousResult);
     };
-    InternalState.prototype.handleErrorOrCompleted = function (result) {
+    InternalState.prototype.handleErrorOrCompleted = function (result, previousResult) {
         var _this = this;
         if (!result.loading) {
             Promise.resolve().then(function () {
                 if (result.error) {
                     _this.onError(result.error);
                 }
-                else if (result.data) {
+                else if (result.data &&
+                    (previousResult === null || previousResult === void 0 ? void 0 : previousResult.networkStatus) !== result.networkStatus &&
+                    result.networkStatus === exports.NetworkStatus.ready) {
                     _this.onCompleted(result.data);
                 }
             }).catch(function (error) {
@@ -7131,6 +7141,214 @@ function diffToResult(diff) {
     return result;
 }
 
+function useDeepMemo(memoFn, deps) {
+    var ref = React.useRef();
+    if (!ref.current || !equality.equal(ref.current.deps, deps)) {
+        ref.current = { value: memoFn(), deps: deps };
+    }
+    return ref.current.value;
+}
+
+function useSuspenseCache() {
+    var suspenseCache = React.useContext(getApolloContext()).suspenseCache;
+    __DEV__ ? tsInvariant.invariant(suspenseCache, 'Could not find a "suspenseCache" in the context. Wrap the root component ' +
+        'in an <ApolloProvider> and provide a suspenseCache.') : tsInvariant.invariant(suspenseCache, 32);
+    return suspenseCache;
+}
+
+var SUPPORTED_FETCH_POLICIES = [
+    'cache-first',
+    'network-only',
+    'no-cache',
+    'cache-and-network',
+];
+var DEFAULT_FETCH_POLICY = 'cache-first';
+var DEFAULT_SUSPENSE_POLICY = 'always';
+var DEFAULT_ERROR_POLICY = 'none';
+function useSuspenseQuery_experimental(query, options) {
+    if (options === void 0) { options = Object.create(null); }
+    var suspenseCache = useSuspenseCache();
+    var client = useApolloClient(options.client);
+    var watchQueryOptions = useWatchQueryOptions({ query: query, options: options, client: client });
+    var previousWatchQueryOptionsRef = React.useRef(watchQueryOptions);
+    var fetchPolicy = watchQueryOptions.fetchPolicy, errorPolicy = watchQueryOptions.errorPolicy, returnPartialData = watchQueryOptions.returnPartialData, variables = watchQueryOptions.variables;
+    var cacheEntry = suspenseCache.lookup(query, variables);
+    var observable = React.useState(function () {
+        return (cacheEntry === null || cacheEntry === void 0 ? void 0 : cacheEntry.observable) || client.watchQuery(watchQueryOptions);
+    })[0];
+    var result = useObservableQueryResult(observable);
+    if (result.error && errorPolicy === 'none') {
+        throw result.error;
+    }
+    if (result.loading) {
+        if (!cacheEntry) {
+            cacheEntry = suspenseCache.add(query, variables, {
+                promise: observable.reobserve(watchQueryOptions),
+                observable: observable,
+            });
+        }
+        var hasFullResult = result.data && !result.partial;
+        var usePartialResult = returnPartialData && result.partial && result.data;
+        var hasUsableResult = usePartialResult ||
+            (fetchPolicy === 'cache-and-network' && hasFullResult);
+        if (!hasUsableResult && !cacheEntry.fulfilled) {
+            throw cacheEntry.promise;
+        }
+    }
+    React.useEffect(function () {
+        var variables = watchQueryOptions.variables, query = watchQueryOptions.query;
+        var previousOpts = previousWatchQueryOptionsRef.current;
+        if (variables !== previousOpts.variables || query !== previousOpts.query) {
+            suspenseCache.remove(previousOpts.query, previousOpts.variables);
+            suspenseCache.add(query, variables, {
+                promise: observable.reobserve({ query: query, variables: variables }),
+                observable: observable,
+            });
+            previousWatchQueryOptionsRef.current = watchQueryOptions;
+        }
+    }, [watchQueryOptions]);
+    React.useEffect(function () {
+        return function () {
+            suspenseCache.remove(query, variables);
+        };
+    }, []);
+    return React.useMemo(function () {
+        return {
+            data: result.data,
+            error: errorPolicy === 'all' ? toApolloError(result) : void 0,
+            fetchMore: function (options) {
+                var promise = observable.fetchMore(options);
+                suspenseCache.add(query, watchQueryOptions.variables, {
+                    promise: promise,
+                    observable: observable,
+                });
+                return promise;
+            },
+            refetch: function (variables) {
+                var promise = observable.refetch(variables);
+                suspenseCache.add(query, watchQueryOptions.variables, {
+                    promise: promise,
+                    observable: observable,
+                });
+                return promise;
+            },
+        };
+    }, [result, observable, errorPolicy]);
+}
+function validateOptions(options) {
+    var query = options.query, _a = options.fetchPolicy, fetchPolicy = _a === void 0 ? DEFAULT_FETCH_POLICY : _a, returnPartialData = options.returnPartialData;
+    verifyDocumentType(query, exports.DocumentType.Query);
+    validateFetchPolicy(fetchPolicy);
+    validatePartialDataReturn(fetchPolicy, returnPartialData);
+}
+function validateFetchPolicy(fetchPolicy) {
+    __DEV__ ? tsInvariant.invariant(SUPPORTED_FETCH_POLICIES.includes(fetchPolicy), "The fetch policy `".concat(fetchPolicy, "` is not supported with suspense.")) : tsInvariant.invariant(SUPPORTED_FETCH_POLICIES.includes(fetchPolicy), 33);
+}
+function validatePartialDataReturn(fetchPolicy, returnPartialData) {
+    if (fetchPolicy === 'no-cache' && returnPartialData) {
+        __DEV__ && tsInvariant.invariant.warn('Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy.');
+    }
+}
+function toApolloError(result) {
+    return isNonEmptyArray(result.errors)
+        ? new ApolloError({ graphQLErrors: result.errors })
+        : result.error;
+}
+function useWatchQueryOptions(_a) {
+    var query = _a.query, options = _a.options, client = _a.client;
+    var defaultOptions = client.defaultOptions.watchQuery;
+    var watchQueryOptions = useDeepMemo(function () {
+        var errorPolicy = options.errorPolicy, fetchPolicy = options.fetchPolicy, _a = options.suspensePolicy, suspensePolicy = _a === void 0 ? DEFAULT_SUSPENSE_POLICY : _a, variables = options.variables, watchQueryOptions = tslib.__rest(options, ["errorPolicy", "fetchPolicy", "suspensePolicy", "variables"]);
+        return tslib.__assign(tslib.__assign({}, watchQueryOptions), { query: query, errorPolicy: errorPolicy || (defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.errorPolicy) || DEFAULT_ERROR_POLICY, fetchPolicy: fetchPolicy || (defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.fetchPolicy) || DEFAULT_FETCH_POLICY, notifyOnNetworkStatusChange: suspensePolicy === 'always', fetchOnFirstSubscribe: false, variables: compact(tslib.__assign(tslib.__assign({}, defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.variables), variables)) });
+    }, [options, query, defaultOptions]);
+    if (__DEV__) {
+        validateOptions(watchQueryOptions);
+    }
+    return watchQueryOptions;
+}
+function useObservableQueryResult(observable) {
+    var resultRef = React.useRef();
+    var isMountedRef = React.useRef(false);
+    if (!resultRef.current) {
+        resultRef.current = observable.getCurrentResult();
+    }
+    React.useLayoutEffect(function () {
+        isMountedRef.current = true;
+        return function () {
+            isMountedRef.current = false;
+        };
+    }, []);
+    return useSyncExternalStore(React.useCallback(function (forceUpdate) {
+        function handleUpdate() {
+            var previousResult = resultRef.current;
+            var result = observable.getCurrentResult();
+            if (previousResult.loading === result.loading &&
+                previousResult.networkStatus === result.networkStatus &&
+                equality.equal(previousResult.data, result.data)) {
+                return;
+            }
+            resultRef.current = result;
+            if (isMountedRef.current) {
+                forceUpdate();
+            }
+        }
+        var subscription = observable.subscribe({
+            next: handleUpdate,
+            error: handleUpdate,
+        });
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [observable]), function () { return resultRef.current; }, function () { return resultRef.current; });
+}
+
+var SuspenseCache = (function () {
+    function SuspenseCache() {
+        this.queries = new Map();
+    }
+    SuspenseCache.prototype.add = function (query, variables, _a) {
+        var promise = _a.promise, observable = _a.observable;
+        var variablesKey = this.getVariablesKey(variables);
+        var map = this.queries.get(query) || new Map();
+        var entry = {
+            observable: observable,
+            fulfilled: false,
+            promise: promise
+                .catch(function () {
+            })
+                .finally(function () {
+                entry.fulfilled = true;
+            }),
+        };
+        map.set(variablesKey, entry);
+        this.queries.set(query, map);
+        return entry;
+    };
+    SuspenseCache.prototype.lookup = function (query, variables) {
+        var _a;
+        return (_a = this.queries
+            .get(query)) === null || _a === void 0 ? void 0 : _a.get(this.getVariablesKey(variables));
+    };
+    SuspenseCache.prototype.remove = function (query, variables) {
+        var map = this.queries.get(query);
+        if (!map) {
+            return;
+        }
+        var key = this.getVariablesKey(variables);
+        var entry = map.get(key);
+        if (entry && !entry.observable.hasObservers()) {
+            map.delete(key);
+        }
+        if (map.size === 0) {
+            this.queries.delete(query);
+        }
+    };
+    SuspenseCache.prototype.getVariablesKey = function (variables) {
+        return canonicalStringify(variables || Object.create(null));
+    };
+    return SuspenseCache;
+}());
+
 exports.setLogVerbosity = tsInvariant.setVerbosity;
 exports.Observable = zenObservableTs.Observable;
 exports.disableExperimentalFragmentVariables = graphqlTag.disableExperimentalFragmentVariables;
@@ -7148,6 +7366,7 @@ exports.HttpLink = HttpLink;
 exports.InMemoryCache = InMemoryCache;
 exports.MissingFieldError = MissingFieldError;
 exports.ObservableQuery = ObservableQuery;
+exports.SuspenseCache = SuspenseCache;
 exports.checkFetcher = checkFetcher;
 exports.concat = concat;
 exports.createHttpLink = createHttpLink;
@@ -7185,4 +7404,5 @@ exports.useMutation = useMutation;
 exports.useQuery = useQuery;
 exports.useReactiveVar = useReactiveVar;
 exports.useSubscription = useSubscription;
+exports.useSuspenseQuery_experimental = useSuspenseQuery_experimental;
 //# sourceMappingURL=apollo-client.cjs.map