Fix obscure warning in useFragment when cache.identify returns `u…

…ndefined` (#12052)

.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')`.

.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
 }

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,
     };

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`", () => {