useFragment does not re-render as expected in v3.11.5

[maciesielka]

Issue Description

This appears to be a regression in v3.11.5 as I can't reproduce this issue on v3.11.4. I suspect the issue could be with #12020 since it's mentioned in the changelog and seems directly related to this hook, but I haven't done much investigation to confirm.

The gist of the issue is that useFragment isn't re-rendering as expected when data is written to the cache that (1) is a change from the currently cached data and (2) matches a value that was previously cached for that data. I've updated one of the existing unit tests in the suite to demonstrate the issue more clearly.

As a practical example, this means that using useFragment to monitor data that is updated by a mutation tied to a simple on/off toggle is dropping re-renders when returning to its initial state after updating to v3.11.5.

Link to Reproduction

Branch: https://github.com/maciesielka/apollo-client/tree/bug/maciesielka/use-fragment-does-not-rerender
Compare: main...maciesielka:apollo-client:bug/maciesielka/use-fragment-does-not-rerender

Reproduction Steps

See updated test in the branch linked above, or re-created below as a diff.

The test adds the following steps:

1. Write a fragment that updates item with id=2 back to its initial value "Item 2"
2. Make assertions that the component re-renders, reflects the correct value and the right value is in the cache.

These assertions fail in v3.11.5 (on which the provided branch is based), but the same test applied to v3.11.4 passes.

Git diff

diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx
index f58ef9aaa..046c1c538 100644
--- a/src/react/hooks/__tests__/useFragment.test.tsx
+++ b/src/react/hooks/__tests__/useFragment.test.tsx
@@ -260,6 +260,45 @@ describe("useFragment", () => {
       "item 4",
     ]);
 
+    // set Item #2 back to its original value
+    act(() => {
+      cache.writeFragment({
+        fragment: ItemFragment,
+        data: {
+          __typename: "Item",
+          id: 2,
+          text: "Item #2",
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(getItemTexts()).toEqual([
+        "Item #1",
+        "Item #2",
+        "Item #3 from cache.modify",
+        "Item #4 updated",
+        "Item #5",
+      ]);
+    });
+
+    expect(renders).toEqual([
+      "list",
+      "item 1",
+      "item 2",
+      "item 5",
+      "item 2",
+      "list",
+      "item 1",
+      "item 2",
+      "item 3",
+      "item 4",
+      "item 5",
+      "item 4",
+      // Only the second item should have re-rendered.
+      "item 2",
+    ]);
+
     expect(cache.extract()).toEqual({
       "Item:1": {
         __typename: "Item",
@@ -268,7 +307,7 @@ describe("useFragment", () => {
       "Item:2": {
         __typename: "Item",
         id: 2,
-        text: "Item #2 updated",
+        text: "Item #2",
       },
       "Item:3": {
         __typename: "Item",

@apollo/client version

3.11.5

[phryneas]

Thank you for the bug report and the test! There should be a PR release with a potential fix available in a few minutes over in #12049 in a few minutes - could you please give that a try and report back? :)

[maciesielka]

Thank you for the bug report and the test! There should be a PR release with a potential fix available in a few minutes over in #12049 in a few minutes - could you please give that a try and report back? :)

Fix looks great! Thanks for the quick turnaround @phryneas!

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[phryneas]

And shipped :)

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.