From e471cef875eadef04f8ee18ef431ee70e7b9bcab Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 4 Sep 2024 10:31:39 -0600
Subject: [PATCH] Fix obscure warning in `useFragment` when `cache.identify`
 returns `undefined` (#12052)

---
 .changeset/forty-news-turn.md                 |  5 ++++
 .size-limits.json                             |  4 +--
 src/cache/core/cache.ts                       | 11 +++++++-
 .../hooks/__tests__/useFragment.test.tsx      | 28 +++++++++++++++++++
 4 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/forty-news-turn.md

diff --git a/.changeset/forty-news-turn.md b/.changeset/forty-news-turn.md
new file mode 100644
index 00000000000..0754e5621d9
--- /dev/null
+++ b/.changeset/forty-news-turn.md
@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fixes a regression from where passing an invalid identifier to `from` in `useFragment` would result in the warning `TypeError: Cannot read properties of undefined (reading '__typename')`.
diff --git a/.size-limits.json b/.size-limits.json
index 3cafe22147e..01bb281164e 100644
--- a/.size-limits.json
+++ b/.size-limits.json
@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 40249,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 33058
+  "dist/apollo-client.min.cjs": 40252,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 33066
 }
diff --git a/src/cache/core/cache.ts b/src/cache/core/cache.ts
index cb953152c45..1186605c0b5 100644
--- a/src/cache/core/cache.ts
+++ b/src/cache/core/cache.ts
@@ -229,7 +229,16 @@ export abstract class ApolloCache<TSerialized> implements DataProxy {
     const diffOptions: Cache.DiffOptions<TData, TVars> = {
       ...otherOptions,
       returnPartialData: true,
-      id: typeof from === "string" ? from : this.identify(from),
+      id:
+        // While our TypeScript types do not allow for `undefined` as a valid
+        // `from`, its possible `useFragment` gives us an `undefined` since it
+        // calls` cache.identify` and provides that value to `from`. We are
+        // adding this fix here however to ensure those using plain JavaScript
+        // and using `cache.identify` themselves will avoid seeing the obscure
+        // warning.
+        typeof from === "undefined" || typeof from === "string" ?
+          from
+        : this.identify(from),
       query,
       optimistic,
     };
diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx
index 046c1c538c9..378f48f9a4d 100644
--- a/src/react/hooks/__tests__/useFragment.test.tsx
+++ b/src/react/hooks/__tests__/useFragment.test.tsx
@@ -1725,6 +1725,34 @@ describe("useFragment", () => {
       });
     });
   });
+
+  // https://github.com/apollographql/apollo-client/issues/12051
+  it("does not warn when the cache identifier is invalid", async () => {
+    using _ = spyOnConsole("warn");
+    const cache = new InMemoryCache();
+
+    const ProfiledHook = profileHook(() =>
+      useFragment({
+        fragment: ItemFragment,
+        // Force a value that results in cache.identify === undefined
+        from: { __typename: "Item" },
+      })
+    );
+
+    render(<ProfiledHook />, {
+      wrapper: ({ children }) => (
+        <MockedProvider cache={cache}>{children}</MockedProvider>
+      ),
+    });
+
+    expect(console.warn).not.toHaveBeenCalled();
+
+    const { data, complete } = await ProfiledHook.takeSnapshot();
+
+    // TODO: Update when https://github.com/apollographql/apollo-client/issues/12003 is fixed
+    expect(complete).toBe(true);
+    expect(data).toEqual({});
+  });
 });
 
 describe("has the same timing as `useQuery`", () => {