Improve handling of arrays in @defer and @stream payloads (#12923)

Co-authored-by: Lenz Weber-Tronic <[email protected]>

Author: jerelmiller

.api-reports/api-report-utilities_internal.api.md

@@ -100,9 +100,20 @@ export type DecoratedPromise<TValue> = PendingPromise<TValue> | FulfilledPromise
 export function decoratePromise<TValue>(promise: Promise<TValue>): DecoratedPromise<TValue>;
 
 // @internal @deprecated (undocumented)
-export class DeepMerger<TContextArgs extends any[]> {
+export namespace DeepMerger {
+    // (undocumented)
+    export type ArrayMergeStrategy = "truncate" | "combine";
+    // (undocumented)
+    export interface Options {
+        // (undocumented)
+        arrayMerge?: DeepMerger.ArrayMergeStrategy;
+    }
+}
+
+// @internal @deprecated (undocumented)
+export class DeepMerger<TContextArgs extends any[] = any[]> {
     // Warning: (ae-forgotten-export) The symbol "ReconcilerFunction" needs to be exported by the entry point index.d.ts
-    constructor(reconciler?: ReconcilerFunction<TContextArgs>);
+    constructor(reconciler?: ReconcilerFunction<TContextArgs>, options?: DeepMerger.Options);
     // (undocumented)
     isObject: typeof isNonNullObject;
     // (undocumented)

.changeset/cold-kiwis-give.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": minor
+---
+
+Fix an issue where deferred payloads that returned arrays with fewer items than the original cached array would retain items from the cached array. This change includes `@stream` arrays where stream arrays replace the cached arrays.

.changeset/neat-lemons-shave.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Improve the cache data loss warning message when `existing` or `incoming` is an array.

.size-limits.json

@@ -1,6 +1,6 @@
 {
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 44194,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 39041,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 33526,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27519
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 44386,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 39203,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 33554,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27582
 }

src/cache/inmemory/writeToStore.ts

@@ -894,8 +894,8 @@ For more information about these options, please refer to the documentation:
         " have an ID or a custom merge function, or "
     : "",
     typeDotName,
-    { ...existing },
-    { ...incoming }
+    Array.isArray(existing) ? [...existing] : { ...existing },
+    Array.isArray(incoming) ? [...incoming] : { ...incoming }
   );
 }
 

src/core/__tests__/client.watchQuery/defer20220824.test.ts

@@ -6,6 +6,7 @@ import { InMemoryCache } from "@apollo/client/cache";
 import { Defer20220824Handler } from "@apollo/client/incremental";
 import { ApolloLink } from "@apollo/client/link";
 import {
+  markAsStreaming,
   mockDefer20220824,
   ObservableStream,
 } from "@apollo/client/testing/internal";
@@ -163,3 +164,186 @@ test("deduplicates queries as long as a query still has deferred chunks", async
   // expect(query5).not.toEmitAnything();
   expect(outgoingRequestSpy).toHaveBeenCalledTimes(2);
 });
+
+it.each([["cache-first"], ["no-cache"]] as const)(
+  "correctly merges deleted rows when receiving a deferred payload",
+  async (fetchPolicy) => {
+    const query = gql`
+      query Characters {
+        characters {
+          id
+          uppercase
+          ... @defer {
+            lowercase
+          }
+        }
+      }
+    `;
+
+    const { httpLink, enqueueInitialChunk, enqueueSubsequentChunk } =
+      mockDefer20220824();
+    const client = new ApolloClient({
+      cache: new InMemoryCache(),
+      link: httpLink,
+      incrementalHandler: new Defer20220824Handler(),
+    });
+
+    const observable = client.watchQuery({ query, fetchPolicy });
+    const stream = new ObservableStream(observable);
+
+    await expect(stream).toEmitTypedValue({
+      data: undefined,
+      dataState: "empty",
+      loading: true,
+      networkStatus: NetworkStatus.loading,
+      partial: true,
+    });
+
+    enqueueInitialChunk({
+      data: {
+        characters: [
+          { __typename: "Character", id: 1, uppercase: "A" },
+          { __typename: "Character", id: 2, uppercase: "B" },
+          { __typename: "Character", id: 3, uppercase: "C" },
+        ],
+      },
+      hasNext: true,
+    });
+
+    await expect(stream).toEmitTypedValue({
+      data: markAsStreaming({
+        characters: [
+          { __typename: "Character", id: 1, uppercase: "A" },
+          { __typename: "Character", id: 2, uppercase: "B" },
+          { __typename: "Character", id: 3, uppercase: "C" },
+        ],
+      }),
+      dataState: "streaming",
+      loading: true,
+      networkStatus: NetworkStatus.streaming,
+      partial: true,
+    });
+
+    enqueueSubsequentChunk({
+      incremental: [{ data: { lowercase: "a" }, path: ["characters", 0] }],
+      hasNext: true,
+    });
+
+    await expect(stream).toEmitTypedValue({
+      data: markAsStreaming({
+        characters: [
+          { __typename: "Character", id: 1, uppercase: "A", lowercase: "a" },
+          { __typename: "Character", id: 2, uppercase: "B" },
+          { __typename: "Character", id: 3, uppercase: "C" },
+        ],
+      }),
+      dataState: "streaming",
+      loading: true,
+      networkStatus: NetworkStatus.streaming,
+      partial: true,
+    });
+
+    enqueueSubsequentChunk({
+      incremental: [
+        { data: { lowercase: "b" }, path: ["characters", 1] },
+        { data: { lowercase: "c" }, path: ["characters", 2] },
+      ],
+      hasNext: false,
+    });
+
+    await expect(stream).toEmitTypedValue({
+      data: {
+        characters: [
+          { __typename: "Character", id: 1, uppercase: "A", lowercase: "a" },
+          { __typename: "Character", id: 2, uppercase: "B", lowercase: "b" },
+          { __typename: "Character", id: 3, uppercase: "C", lowercase: "c" },
+        ],
+      },
+      dataState: "complete",
+      loading: false,
+      networkStatus: NetworkStatus.ready,
+      partial: false,
+    });
+
+    void observable.refetch();
+
+    await expect(stream).toEmitTypedValue({
+      data: {
+        characters: [
+          { __typename: "Character", id: 1, uppercase: "A", lowercase: "a" },
+          { __typename: "Character", id: 2, uppercase: "B", lowercase: "b" },
+          { __typename: "Character", id: 3, uppercase: "C", lowercase: "c" },
+        ],
+      },
+      dataState: "complete",
+      loading: true,
+      networkStatus: NetworkStatus.refetch,
+      partial: false,
+    });
+
+    // on refetch, the list is shorter
+    enqueueInitialChunk({
+      data: {
+        characters: [
+          { __typename: "Character", id: 1, uppercase: "A" },
+          { __typename: "Character", id: 2, uppercase: "B" },
+        ],
+      },
+      hasNext: true,
+    });
+
+    await expect(stream).toEmitTypedValue({
+      data: markAsStreaming({
+        characters:
+          // no-cache fetch policy doesn't merge with existing cache data, so
+          // the lowercase field is not added to each item
+          fetchPolicy === "no-cache" ?
+            [
+              { __typename: "Character", id: 1, uppercase: "A" },
+              { __typename: "Character", id: 2, uppercase: "B" },
+            ]
+          : [
+              {
+                __typename: "Character",
+                id: 1,
+                uppercase: "A",
+                lowercase: "a",
+              },
+              {
+                __typename: "Character",
+                id: 2,
+                uppercase: "B",
+                lowercase: "b",
+              },
+            ],
+      }),
+      dataState: "streaming",
+      loading: true,
+      networkStatus: NetworkStatus.streaming,
+      partial: true,
+    });
+
+    enqueueSubsequentChunk({
+      incremental: [
+        { data: { lowercase: "a" }, path: ["characters", 0] },
+        { data: { lowercase: "b" }, path: ["characters", 1] },
+      ],
+      hasNext: false,
+    });
+
+    await expect(stream).toEmitTypedValue({
+      data: {
+        characters: [
+          { __typename: "Character", id: 1, uppercase: "A", lowercase: "a" },
+          { __typename: "Character", id: 2, uppercase: "B", lowercase: "b" },
+        ],
+      },
+      dataState: "complete",
+      loading: false,
+      networkStatus: NetworkStatus.ready,
+      partial: false,
+    });
+
+    await expect(stream).not.toEmitAnything();
+  }
+);