@apollo/client 3.7.2 → 3.8.0-alpha.0

package/react/context/context.cjs.native.js

@@ -47,13 +47,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__ ? globals.invariant(context.client, 'ApolloProvider was not passed a client instance. Make ' +
             'sure you pass in your client via the "client" prop.') : globals.invariant(context.client, 28);
         return (React__namespace.createElement(ApolloContext.Provider, { value: context }, children));

package/react/hooks/compareResults.d.ts

@@ -0,0 +1,3 @@
+import { DocumentNode } from "graphql";
+export declare function compareResultsUsingQuery(query: DocumentNode, aResult: any, bResult: any, variables?: Record<string, any> | undefined): boolean;
+//# sourceMappingURL=compareResults.d.ts.map

package/react/hooks/compareResults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compareResults.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/compareResults.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,YAAY,EAOb,MAAM,SAAS,CAAC;AAejB,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,GAAG,EACZ,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,GAC1C,OAAO,CAWT"}

package/react/hooks/compareResults.js

@@ -0,0 +1,63 @@
+import equal from "@wry/equality";
+import { createFragmentMap, getFragmentDefinitions, getFragmentFromSelection, getMainDefinition, isField, resultKeyNameFromField, shouldInclude, } from "../../utilities/index.js";
+export function compareResultsUsingQuery(query, aResult, bResult, variables) {
+    if (aResult === bResult)
+        return true;
+    return compareResultsUsingSelectionSet(getMainDefinition(query).selectionSet, aResult, bResult, {
+        fragmentMap: createFragmentMap(getFragmentDefinitions(query)),
+        variables: variables,
+    });
+}
+function compareResultsUsingSelectionSet(selectionSet, aResult, bResult, context) {
+    var seenSelections = new Set();
+    return selectionSet.selections.every(function (selection) {
+        if (seenSelections.has(selection))
+            return true;
+        seenSelections.add(selection);
+        if (!shouldInclude(selection, context.variables))
+            return true;
+        if (selectionHasNonreactiveDirective(selection))
+            return true;
+        if (isField(selection)) {
+            var resultKey = resultKeyNameFromField(selection);
+            var aResultChild = aResult && aResult[resultKey];
+            var bResultChild = bResult && bResult[resultKey];
+            var childSelectionSet = selection.selectionSet;
+            if (!childSelectionSet) {
+                return equal(aResultChild, bResultChild);
+            }
+            var aChildIsArray = Array.isArray(aResultChild);
+            var bChildIsArray = Array.isArray(bResultChild);
+            if (aChildIsArray !== bChildIsArray)
+                return false;
+            if (aChildIsArray && bChildIsArray) {
+                var length_1 = aResultChild.length;
+                if (bResultChild.length !== length_1) {
+                    return false;
+                }
+                for (var i = 0; i < length_1; ++i) {
+                    if (!compareResultsUsingSelectionSet(childSelectionSet, aResultChild[i], bResultChild[i], context)) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            return compareResultsUsingSelectionSet(childSelectionSet, aResultChild, bResultChild, context);
+        }
+        else {
+            var fragment = getFragmentFromSelection(selection, context.fragmentMap);
+            if (fragment) {
+                if (selectionHasNonreactiveDirective(fragment))
+                    return true;
+                return compareResultsUsingSelectionSet(fragment.selectionSet, aResult, bResult, context);
+            }
+        }
+    });
+}
+function selectionHasNonreactiveDirective(selection) {
+    return !!selection.directives && selection.directives.some(directiveIsNonreactive);
+}
+function directiveIsNonreactive(dir) {
+    return dir.name.value === "nonreactive";
+}
+//# sourceMappingURL=compareResults.js.map

package/react/hooks/compareResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compareResults.js","sourceRoot":"","sources":["../../../src/react/hooks/compareResults.ts"],"names":[],"mappings":"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","sourcesContent":["import equal from \"@wry/equality\";\n\nimport {\n  DirectiveNode,\n  DocumentNode,\n  FieldNode,\n  FragmentDefinitionNode,\n  FragmentSpreadNode,\n  InlineFragmentNode,\n  SelectionNode,\n  SelectionSetNode,\n} from \"graphql\";\n\nimport {\n  createFragmentMap,\n  FragmentMap,\n  getFragmentDefinitions,\n  getFragmentFromSelection,\n  getMainDefinition,\n  isField,\n  resultKeyNameFromField,\n  shouldInclude,\n} from \"../../utilities\";\n\n// Returns true if aResult and bResult are deeply equal according to the fields\n// selected by the given query, ignoring any fields marked as @nonreactive.\nexport function compareResultsUsingQuery(\n  query: DocumentNode,\n  aResult: any,\n  bResult: any,\n  variables?: Record<string, any> | undefined,\n): boolean {\n  if (aResult === bResult) return true;\n  return compareResultsUsingSelectionSet(\n    getMainDefinition(query).selectionSet,\n    aResult,\n    bResult,\n    {\n      fragmentMap: createFragmentMap(getFragmentDefinitions(query)),\n      variables,\n    },\n  );\n}\n\n// Encapsulates the information used by compareResultsUsingSelectionSet that\n// does not change during the recursion.\ninterface CompareContext {\n  fragmentMap: FragmentMap;\n  variables: Record<string, any> | undefined;\n}\n\nfunction compareResultsUsingSelectionSet(\n  selectionSet: SelectionSetNode,\n  aResult: any,\n  bResult: any,\n  context: CompareContext,\n): boolean {\n  const seenSelections = new Set<SelectionNode>();\n\n  // Returning true from this Array.prototype.every callback function skips the\n  // current field/subtree. Returning false aborts the entire traversal\n  // immediately, causing compareResultsUsingSelectionSet to return false.\n  return selectionSet.selections.every(selection => {\n    // Avoid re-processing the same selection at the same level of recursion, in\n    // case the same field gets included via multiple indirect fragment spreads.\n    if (seenSelections.has(selection)) return true;\n    seenSelections.add(selection);\n\n    // Ignore @skip(if: true) and @include(if: false) fields.\n    if (!shouldInclude(selection, context.variables)) return true;\n\n    // If the field or (named) fragment spread has a @nonreactive directive on\n    // it, we don't care if it's different, so we pretend it's the same.\n    if (selectionHasNonreactiveDirective(selection)) return true;\n\n    if (isField(selection)) {\n      const resultKey = resultKeyNameFromField(selection);\n      const aResultChild = aResult && aResult[resultKey];\n      const bResultChild = bResult && bResult[resultKey];\n      const childSelectionSet = selection.selectionSet;\n\n      if (!childSelectionSet) {\n        // These are scalar values, so we can compare them with deep equal\n        // without redoing the main recursive work.\n        return equal(aResultChild, bResultChild);\n      }\n\n      const aChildIsArray = Array.isArray(aResultChild);\n      const bChildIsArray = Array.isArray(bResultChild);\n      if (aChildIsArray !== bChildIsArray) return false;\n      if (aChildIsArray && bChildIsArray) {\n        const length = aResultChild.length;\n        if (bResultChild.length !== length) {\n          return false;\n        }\n        for (let i = 0; i < length; ++i) {\n          if (!compareResultsUsingSelectionSet(\n            childSelectionSet,\n            aResultChild[i],\n            bResultChild[i],\n            context,\n          )) {\n            return false;\n          }\n        }\n        return true;\n      }\n\n      return compareResultsUsingSelectionSet(\n        childSelectionSet,\n        aResultChild,\n        bResultChild,\n        context,\n      );\n\n    } else {\n      const fragment = getFragmentFromSelection(selection, context.fragmentMap);\n      if (fragment) {\n        // The fragment might === selection if it's an inline fragment, but\n        // could be !== if it's a named fragment ...spread.\n        if (selectionHasNonreactiveDirective(fragment)) return true;\n\n        return compareResultsUsingSelectionSet(\n          fragment.selectionSet,\n          // Notice that we reuse the same aResult and bResult values here,\n          // since the fragment ...spread does not specify a field name, but\n          // consists of multiple fields (within the fragment's selection set)\n          // that should be applied to the current result value(s).\n          aResult,\n          bResult,\n          context,\n        );\n      }\n    }\n  });\n}\n\nfunction selectionHasNonreactiveDirective(selection:\n  | FieldNode\n  | InlineFragmentNode\n  | FragmentSpreadNode\n  | FragmentDefinitionNode,\n): boolean {\n  return !!selection.directives && selection.directives.some(directiveIsNonreactive);\n}\n\nfunction directiveIsNonreactive(dir: DirectiveNode): boolean {\n  return dir.name.value === \"nonreactive\";\n}\n"]}

package/react/hooks/hooks.cjs

@@ -304,16 +304,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 === core.NetworkStatus.ready) {
                     _this.onCompleted(result.data);
                 }
             }).catch(function (error) {
@@ -682,6 +684,167 @@ 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(context.getApolloContext()).suspenseCache;
+    __DEV__ ? globals.invariant(suspenseCache, 'Could not find a "suspenseCache" in the context. Wrap the root component ' +
+        'in an <ApolloProvider> and provide a suspenseCache.') : globals.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;
+    parser.verifyDocumentType(query, parser.DocumentType.Query);
+    validateFetchPolicy(fetchPolicy);
+    validatePartialDataReturn(fetchPolicy, returnPartialData);
+}
+function validateFetchPolicy(fetchPolicy) {
+    __DEV__ ? globals.invariant(SUPPORTED_FETCH_POLICIES.includes(fetchPolicy), "The fetch policy `".concat(fetchPolicy, "` is not supported with suspense.")) : globals.invariant(SUPPORTED_FETCH_POLICIES.includes(fetchPolicy), 33);
+}
+function validatePartialDataReturn(fetchPolicy, returnPartialData) {
+    if (fetchPolicy === 'no-cache' && returnPartialData) {
+        __DEV__ && globals.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 utilities.isNonEmptyArray(result.errors)
+        ? new core.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: utilities.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; });
+}
+
 exports.useApolloClient = useApolloClient;
 exports.useFragment_experimental = useFragment_experimental;
 exports.useLazyQuery = useLazyQuery;
@@ -689,4 +852,5 @@ exports.useMutation = useMutation;
 exports.useQuery = useQuery;
 exports.useReactiveVar = useReactiveVar;
 exports.useSubscription = useSubscription;
+exports.useSuspenseQuery_experimental = useSuspenseQuery_experimental;
 //# sourceMappingURL=hooks.cjs.map