@apollo/client 4.3.0-alpha.6 → 4.3.0-alpha.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @apollo/client
 
+## 4.3.0-alpha.7
+
+### Minor Changes
+
+- [#13406](https://github.com/apollographql/apollo-client/pull/13406) [`bd74ccb`](https://github.com/apollographql/apollo-client/commit/bd74ccb2f75bc434afc4f5172311b551266f8196) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Emit a development-only warning when a feud is detected between queries that overwrite each other's data. This should make it easier to detect when you need to select a key field or add a `merge` function to a field policy.
+
+- [#13406](https://github.com/apollographql/apollo-client/pull/13406) [`bd74ccb`](https://github.com/apollographql/apollo-client/commit/bd74ccb2f75bc434afc4f5172311b551266f8196) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Fixes an issue where cache feuds between queries selecting incompatible non-normalized data could return untransformed network values.
+
+  Apollo Client now always writes network results to the cache before delivering them, ensuring custom scalars and field `read` functions are applied. To prevent repeated refetches when competing queries repeatedly make each other's cache results incomplete, Apollo Client stops automatically refetching a query after it sees the same incomplete result again.
+
+  This may add one network request in these cache-feud scenarios.
+
 ## 4.3.0-alpha.6
 
 ### Minor Changes

package/__cjs/cache/core/cache.cjs

@@ -147,7 +147,7 @@ class ApolloCache {
             if (environment_1.__DEV__) {
                 const actualFragmentName = fragmentName || (0, internal_1.getFragmentDefinition)(fragment).name.value;
                 if (id === undefined) {
-                    __DEV__ && invariant_1.invariant.warn(121, actualFragmentName);
+                    __DEV__ && invariant_1.invariant.warn(122, actualFragmentName);
                 }
             }
             return id;

package/__cjs/cache/inmemory/entityStore.cjs

@@ -82,7 +82,7 @@ class EntityStore {
         // then there are no fields to be merged, so we're done.
         if (!incoming)
             return;
-        (0, invariant_1.invariant)(typeof dataId === "string", 105);
+        (0, invariant_1.invariant)(typeof dataId === "string", 106);
         // Parse all scalars before merging so that the storeObjectReconciler can
         // deep compare the parsed value with the existing value
         incoming = this.coerceStoreObject(incoming, (scalar, value) => scalar.coerceToParsed(value), incoming.__typename ||
@@ -189,7 +189,7 @@ class EntityStore {
                             if (environment_1.__DEV__) {
                                 const checkReference = (ref) => {
                                     if (this.lookup(ref.__ref) === undefined) {
-                                        __DEV__ && invariant_1.invariant.warn(106, ref);
+                                        __DEV__ && invariant_1.invariant.warn(107, ref);
                                         return true;
                                     }
                                 };
@@ -218,7 +218,7 @@ class EntityStore {
                                             }
                                         }
                                         if (seenReference && someNonReference !== undefined) {
-                                            __DEV__ && invariant_1.invariant.warn(107, someNonReference);
+                                            __DEV__ && invariant_1.invariant.warn(108, someNonReference);
                                             break;
                                         }
                                     }

package/__cjs/cache/inmemory/key-extractor.cjs

@@ -41,7 +41,7 @@ function keyFieldsFnFromSpecifier(specifier) {
                     // context.readField for this extraction.
                     extracted = extractKeyPath(object, schemaKeyPath, extractKey);
                 }
-                (0, invariant_1.invariant)(extracted !== void 0, 108, schemaKeyPath.join("."), object);
+                (0, invariant_1.invariant)(extracted !== void 0, 109, schemaKeyPath.join("."), object);
                 return extracted;
             }));
             return `${context.typename}:${JSON.stringify(keyObject)}`;

package/__cjs/cache/inmemory/policies.cjs

@@ -251,7 +251,7 @@ class Policies {
         const rootId = "ROOT_" + which.toUpperCase();
         const old = this.rootTypenamesById[rootId];
         if (typename !== old) {
-            (0, invariant_1.invariant)(!old || old === which, 109, which);
+            (0, invariant_1.invariant)(!old || old === which, 110, which);
             // First, delete any old __typename associated with this rootId from
             // rootIdsByTypename.
             if (old)
@@ -394,7 +394,7 @@ class Policies {
                 if (supertypeSet.has(supertype)) {
                     if (!typenameSupertypeSet.has(supertype)) {
                         if (checkingFuzzySubtypes) {
-                            __DEV__ && invariant_1.invariant.warn(110, typename, supertype);
+                            __DEV__ && invariant_1.invariant.warn(111, typename, supertype);
                         }
                         // Record positive results for faster future lookup.
                         // Unfortunately, we cannot safely cache negative results,
@@ -651,7 +651,7 @@ function normalizeReadFieldOptions(readFieldArgs, objectOrReference, variables)
         }
     }
     if (environment_1.__DEV__ && options.from === void 0) {
-        __DEV__ && invariant_1.invariant.warn(111, (0, internal_2.stringifyForDisplay)(Array.from(readFieldArgs)));
+        __DEV__ && invariant_1.invariant.warn(112, (0, internal_2.stringifyForDisplay)(Array.from(readFieldArgs)));
     }
     if (void 0 === options.variables) {
         options.variables = variables;
@@ -661,7 +661,7 @@ function normalizeReadFieldOptions(readFieldArgs, objectOrReference, variables)
 function makeMergeObjectsFunction(store) {
     return function mergeObjects(existing, incoming) {
         if ((0, internal_2.isArray)(existing) || (0, internal_2.isArray)(incoming)) {
-            throw (0, invariant_1.newInvariantError)(112);
+            throw (0, invariant_1.newInvariantError)(113);
         }
         // These dynamic checks are necessary because the parameters of a
         // custom merge function can easily have the any type, so the type
@@ -698,6 +698,6 @@ function makeMergeObjectsFunction(store) {
     };
 }
 function warnAboutScalarConfig(typename, fieldName, scalar, kind) {
-    __DEV__ && invariant_1.invariant.warn(113, `${typename}.${fieldName}`, scalar, kind);
+    __DEV__ && invariant_1.invariant.warn(114, `${typename}.${fieldName}`, scalar, kind);
 }
 //# sourceMappingURL=policies.cjs.map

package/__cjs/cache/inmemory/readFromStore.cjs

@@ -289,7 +289,7 @@ class StoreReader {
                         if (typename) {
                             const policy = policies["getFieldPolicy"](typename, fieldName);
                             if (policy?.scalar) {
-                                __DEV__ && invariant_1.invariant.warn(114, `${typename}.${fieldName}`, policy.scalar);
+                                __DEV__ && invariant_1.invariant.warn(115, `${typename}.${fieldName}`, policy.scalar);
                             }
                         }
                     }
@@ -326,7 +326,7 @@ class StoreReader {
             else {
                 const fragment = (0, internal_1.getFragmentFromSelection)(selection, context.lookupFragment);
                 if (!fragment && selection.kind === graphql_1.Kind.FRAGMENT_SPREAD) {
-                    throw (0, invariant_1.newInvariantError)(115, selection.name.value);
+                    throw (0, invariant_1.newInvariantError)(116, selection.name.value);
                 }
                 if (fragment && policies.fragmentMatches(fragment, typename)) {
                     const isDeferBoundary = (0, internal_1.isDeferredFragment)(selection, context.variables);
@@ -624,7 +624,7 @@ function assertSelectionSetForIdValue(store, field, fieldValue) {
             if ((0, internal_1.isNonNullObject)(value)) {
                 (0, invariant_1.invariant)(
                     !(0, utilities_1.isReference)(value),
-                    116,
+                    117,
                     (0, helpers_js_1.getTypenameFromStoreObject)(store, value),
                     field.name.value
                 );

package/__cjs/cache/inmemory/writeToStore.cjs

@@ -75,7 +75,7 @@ class StoreWriter {
             path: [],
         });
         if (!(0, utilities_1.isReference)(ref)) {
-            throw (0, invariant_1.newInvariantError)(117, result);
+            throw (0, invariant_1.newInvariantError)(118, result);
         }
         // So far, the store has not been modified, so now it's time to process
         // context.incomingById and merge those incoming fields into context.store.
@@ -237,7 +237,7 @@ class StoreWriter {
                 // provide a default value, so its absence from the written data should
                 // not be cause for alarm.
                 !policies.getReadFunction(typename, field.name.value)) {
-                invariant_1.invariant.error(118, (0, internal_1.resultKeyNameFromField)(field), result);
+                invariant_1.invariant.error(119, (0, internal_1.resultKeyNameFromField)(field), result);
             }
         });
         // Identify the result object, even if dataId was already provided,
@@ -385,7 +385,7 @@ class StoreWriter {
                 else {
                     const fragment = (0, internal_1.getFragmentFromSelection)(selection, context.lookupFragment);
                     if (!fragment && selection.kind === graphql_1.Kind.FRAGMENT_SPREAD) {
-                        throw (0, invariant_1.newInvariantError)(119, selection.name.value);
+                        throw (0, invariant_1.newInvariantError)(120, selection.name.value);
                     }
                     if (fragment &&
                         policies.fragmentMatches(fragment, typename, result, context.variables)) {
@@ -558,7 +558,7 @@ function warnAboutDataLoss(existingRef, incomingObj, storeFieldName, store) {
             }
         });
     }
-    __DEV__ && invariant_1.invariant.warn(120, fieldName, parentType, childTypenames.length ?
+    __DEV__ && invariant_1.invariant.warn(121, fieldName, parentType, childTypenames.length ?
         "either ensure all objects of type " +
             childTypenames.join(" and ") +
             " have an ID or a custom merge function, or "

package/__cjs/core/ObservableQuery.cjs

@@ -29,16 +29,29 @@ const empty = {
     dataState: "empty",
     partial: true,
 };
+const destructiveMethodCounts = new WeakMap();
+function wrapDestructiveCacheMethod(cache, methodName) {
+    const original = cache[methodName];
+    if (typeof original === "function") {
+        // @ts-expect-error this is just too generic to be typed correctly
+        cache[methodName] = function () {
+            destructiveMethodCounts.set(cache, 
+            // The %1e15 allows the count to wrap around to 0 safely every
+            // quadrillion evictions, so there's no risk of overflow. To be
+            // clear, this is more of a pedantic principle than something
+            // that matters in any conceivable practical scenario.
+            (destructiveMethodCounts.get(cache) + 1) % 1e15);
+            // @ts-expect-error this is just too generic to be typed correctly
+            return original.apply(this, arguments);
+        };
+    }
+}
 class ObservableQuery {
     options;
     queryName;
     variablesUnknown = false;
-    /**
-    * @internal will be read and written from `QueryInfo`
-    * 
-    * @deprecated This is an internal API and should not be used directly. This can be removed or changed at any time.
-    */
-    _lastWrite;
+    didWarnOnFeud = false;
+    lastMissing;
     // The `query` computed property will always reflect the document transformed
     // by the last run query. `this.options.query` will always reflect the raw
     // untransformed query to ensure document transforms with runtime conditionals
@@ -75,6 +88,18 @@ class ObservableQuery {
     }
     constructor({ queryManager, options, transformedQuery = queryManager.transform(options.query), }) {
         this.queryManager = queryManager;
+        // Track how often destructive cache methods are called, since we want
+        // eviction to override the feud-stopping logic in `shouldAutoRefetch`,
+        // by causing it to return true. Wrapping these cache methods is a bit of a
+        // hack, but it saves us from having to make eviction counting an official
+        // part of the ApolloCache API.
+        const { cache } = queryManager;
+        if (!destructiveMethodCounts.has(cache)) {
+            destructiveMethodCounts.set(cache, 0);
+            wrapDestructiveCacheMethod(cache, "evict");
+            wrapDestructiveCacheMethod(cache, "modify");
+            wrapDestructiveCacheMethod(cache, "reset");
+        }
         // active state
         this.waitForNetworkResult = options.fetchPolicy === "network-only";
         this.isTornDown = false;
@@ -402,7 +427,6 @@ class ObservableQuery {
             reobserveOptions.variables = this.options.variables =
                 this.getVariablesWithDefaults({ ...this.variables, ...variables });
         }
-        this._lastWrite = undefined;
         return this._reobserve(reobserveOptions, {
             newNetworkStatus: networkStatus_js_1.NetworkStatus.refetch,
         });
@@ -890,7 +914,6 @@ class ObservableQuery {
             if (this.pollingInfo) {
                 if (!(0, utilities_1.isNetworkRequestInFlight)(this.networkStatus) &&
                     !this.options.skipPollAttempt?.()) {
-                    this._lastWrite = undefined;
                     this._reobserve({
                         // Most fetchPolicy options don't make sense to use in a polling context, as
                         // users wouldn't want to be polling the cache directly. However, network-only and
@@ -936,7 +959,10 @@ class ObservableQuery {
     }
     _reobserve(newOptions, internalOptions) {
         this.isTornDown = false;
-        let { newNetworkStatus } = internalOptions || {};
+        let { newNetworkStatus, keepLastMissing } = internalOptions || {};
+        if (!keepLastMissing) {
+            this.lastMissing = undefined;
+        }
         this.queryManager.obsQueries.add(this);
         const useDisposableObservable = 
         // Refetching uses a disposable Observable to allow refetches using different
@@ -1077,7 +1103,7 @@ class ObservableQuery {
         this.queryManager.obsQueries.delete(this);
         this.isTornDown = true;
         this.abortActiveOperations();
-        this._lastWrite = undefined;
+        this.lastMissing = undefined;
     }
     transformDocument(document) {
         return this.queryManager.transform(document);
@@ -1135,51 +1161,126 @@ class ObservableQuery {
                 return;
             }
         }
-        const { dirty } = this;
+        const { dirty, lastMissing } = this;
+        const { fetchPolicy } = this.options;
         this.resetNotifications();
-        if (dirty &&
-            (this.options.fetchPolicy === "cache-only" ||
-                this.options.fetchPolicy === "cache-and-network" ||
-                !this.activeOperations.size)) {
-            const diff = this.getCacheDiff();
-            if (
-            // `fromOptimisticTransaction` is not available through the `cache.diff`
-            // code path, so we need to check it this way
-            (0, equality_1.equal)(diff.result, this.getCacheDiff({ optimistic: false }).result)) {
-                //If this diff did not come from an optimistic transaction
-                // make the ObservableQuery "reobserve" the latest data
-                // using a temporary fetch policy of "cache-first", so complete cache
-                // results have a chance to be delivered without triggering additional
-                // network requests, even when options.fetchPolicy is "network-only"
-                // or "cache-and-network". All other fetch policies are preserved by
-                // this method, and are handled by calling oq.reobserve(). If this
-                // reobservation is spurious, distinctUntilChanged still has a
-                // chance to catch it before delivery to ObservableQuery subscribers.
-                this.reobserveCacheFirst();
+        if (!dirty ||
+            (fetchPolicy !== "cache-only" &&
+                fetchPolicy !== "cache-and-network" &&
+                this.activeOperations.size)) {
+            return;
+        }
+        const diff = this.getCacheDiff();
+        const current = this.getCurrentResult();
+        // `fromOptimisticTransaction` is not available through the `cache.diff`
+        // code path, so we need to check whether the cache result is an optimistic
+        // result this way.
+        const isOptimistic = !(0, equality_1.equal)(diff.result, this.getCacheDiff({ optimistic: false }).result);
+        if (
+        // When this diff came from an optimistic transaction, deliver the
+        // current cache data to the ObservableQuery, but don't perform a
+        // reobservation, since oq.reobserveCacheFirst might make a network
+        // request, and we never want to trigger network requests in the
+        // middle of optimistic updates.
+        isOptimistic ||
+            // If we get a cache update in the middle of streaming (possible with
+            // cache-and-network fetch policy), just deliver the cache value without
+            // going through the full reobserve which would otherwise trigger another
+            // request (deduplication should kick in, but doing so replays any
+            // previous emits from the link chain, which get rewritten into the cache
+            // and might clobber this cache update)
+            (!diff.complete && current.networkStatus === networkStatus_js_1.NetworkStatus.streaming)) {
+            this.deliverCacheDiff(diff);
+            return;
+        }
+        if (diff.complete) {
+            this.lastMissing = undefined;
+        }
+        else if (!lastMissing ||
+            // If a destructive cache method has been called since the last recorded
+            // incomplete result, there's a chance fetching this data again will
+            // restore what was evicted, even though the cache result looks the same
+            // as before.
+            lastMissing.dmCount !== destructiveMethodCounts.get(this.cache) ||
+            !(0, equality_1.equal)(lastMissing.variables, this.variables) ||
+            !(0, equality_1.equal)(lastMissing.missing, diff.missing?.missing)) {
+            this.didWarnOnFeud = false;
+            this.lastMissing = {
+                variables: this.variables,
+                missing: diff.missing?.missing,
+                dmCount: destructiveMethodCounts.get(this.cache),
+            };
+        }
+        else if (
+        // reobserveCacheFirst with cache-only fetch policy only calls
+        // reobserve which never fetches from the network so we are ok
+        // allowing cache-only queries to fallthrough to reobserveCacheFirst.
+        // This also prevents the feud warning which would be confusing for a
+        // cache-only query anyways.
+        fetchPolicy !== "cache-only") {
+            // If we've fallen through to this case, a cache emit has returned the
+            // same missing fields which means at least one value on the fields we've
+            // already delivered have changed. We are ok delivering the updated
+            // partial result in this case to keep the result as fresh as possible. We
+            // NEVER want to downgrade this query from a complete query to a partial
+            // query though, so we also make sure we only deliver if the previous
+            // result was also partial.
+            if (current.dataState === "partial") {
+                this.deliverCacheDiff(diff);
             }
-            else {
-                // If this diff came from an optimistic transaction, deliver the
-                // current cache data to the ObservableQuery, but don't perform a
-                // reobservation, since oq.reobserveCacheFirst might make a network
-                // request, and we never want to trigger network requests in the
-                // middle of optimistic updates.
-                this.input.next({
-                    kind: "N",
-                    value: {
-                        data: diff.result,
-                        dataState: diff.dataState,
-                        networkStatus: networkStatus_js_1.NetworkStatus.ready,
-                        loading: false,
-                        error: undefined,
-                        partial: !diff.complete,
-                    },
-                    source: "cache",
-                    query: this.query,
-                    variables: this.variables,
-                    meta: {},
-                });
+            // If the (partial) result is the same as the last partial result
+            // we recorded from a previous broadcast (and the variables match
+            // too), avoid calling reobserveCacheFirst to refetch this query
+            // again. If we allow refetching anytime this result becomes partial,
+            // we risk feuds between queries competing to update the same data in
+            // incompatible ways, which can lead to an endless cycle of cache
+            // broadcasts and useless network requests. As with any
+            // feud, eventually one side must step back from the brink,
+            // letting the other side(s) have the last word(s). There may
+            // be other points where we could break this cycle, such as
+            // silencing the broadcast for cache.writeQuery (not a good
+            // idea, since it just delays the feud a bit) or somehow
+            // avoiding the network request that just happened (also bad,
+            // because the server could return useful new data). All
+            // options considered, returning early and stopping the
+            // reobserveCacheFirst cycle seems to be the least damaging place to
+            // break the cycle because it allows read functions/custom scalars to
+            // be applied to the feuding query while avoiding the endless cycle of
+            // requests.
+            if (environment_1.__DEV__ && !this.didWarnOnFeud) {
+                this.didWarnOnFeud = true;
+                warnOnFeud(this.query, diff);
             }
+            return;
         }
+        //If this diff did not come from an optimistic transaction
+        // make the ObservableQuery "reobserve" the latest data
+        // using a temporary fetch policy of "cache-first", so complete cache
+        // results have a chance to be delivered without triggering additional
+        // network requests, even when options.fetchPolicy is "network-only"
+        // or "cache-and-network". All other fetch policies are preserved by
+        // this method, and are handled by calling oq.reobserve(). If this
+        // reobservation is spurious, distinctUntilChanged still has a
+        // chance to catch it before delivery to ObservableQuery subscribers.
+        this.reobserveCacheFirst();
+    }
+    deliverCacheDiff(diff) {
+        const current = this.getCurrentResult();
+        this.input.next({
+            kind: "N",
+            value: {
+                data: diff.result,
+                dataState: diff.dataState,
+                networkStatus: current.networkStatus,
+                loading: current.loading,
+                error: undefined,
+                partial: !diff.complete,
+            },
+            source: "cache",
+            query: this.query,
+            variables: this.variables,
+            meta: {},
+        });
     }
     activeOperations = new Set();
     pushOperation(networkStatus) {
@@ -1242,6 +1343,7 @@ class ObservableQuery {
         // exception for cache-only queries - we reset them into a "ready" state
         // as we won't trigger a refetch for them
         const resetToEmpty = this.options.fetchPolicy === "cache-only";
+        this.lastMissing = undefined;
         this.setResult(resetToEmpty ? empty : uninitialized, {
             shouldEmit: resetToEmpty ? 1 /* EmitBehavior.force */ : 2 /* EmitBehavior.never */,
         });
@@ -1386,7 +1488,10 @@ class ObservableQuery {
     reobserveCacheFirst() {
         const { fetchPolicy, nextFetchPolicy } = this.options;
         if (fetchPolicy === "cache-and-network" || fetchPolicy === "network-only") {
-            this.reobserve({
+            // Preserve this.lastMissing so a cache update that triggers this
+            // reobserve doesn't reset feud detection. All user-initiated calls to
+            // reobserve (refetch/poll/reobserve, etc) should clear it.
+            this._reobserve({
                 fetchPolicy: "cache-first",
                 // Use a temporary nextFetchPolicy function that replaces itself with the
                 // previous nextFetchPolicy value and returns the original fetchPolicy.
@@ -1402,10 +1507,10 @@ class ObservableQuery {
                     // Otherwise go back to the original this.options.fetchPolicy.
                     return fetchPolicy;
                 },
-            });
+            }, { keepLastMissing: true });
         }
         else {
-            this.reobserve();
+            this._reobserve(undefined, { keepLastMissing: true });
         }
     }
     getVariablesWithDefaults(variables) {
@@ -1458,4 +1563,11 @@ function getTrackingOperatorPromise(defaultValue) {
     });
     return { promise, operator };
 }
+function warnOnFeud(query, diff) {
+    __DEV__ && invariant_1.invariant.warn(
+        89,
+        (0, internal_1.getOperationName)(query, "(anonymous)"),
+        diff.missing?.missing
+    );
+}
 //# sourceMappingURL=ObservableQuery.cjs.map