diff --git a/src/cache/core/cache.ts b/src/cache/core/cache.ts
index 1186605c0b5..cb953152c45 100644
--- a/src/cache/core/cache.ts
+++ b/src/cache/core/cache.ts
@@ -229,16 +229,7 @@ export abstract class ApolloCache<TSerialized> implements DataProxy {
     const diffOptions: Cache.DiffOptions<TData, TVars> = {
       ...otherOptions,
       returnPartialData: true,
-      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),
+      id: typeof from === "string" ? from : this.identify(from),
       query,
       optimistic,
     };
diff --git a/src/react/hooks/useFragment.ts b/src/react/hooks/useFragment.ts
index 89ce1603a00..fe7aa6bde6c 100644
--- a/src/react/hooks/useFragment.ts
+++ b/src/react/hooks/useFragment.ts
@@ -75,7 +75,17 @@ function _useFragment<TData = any, TVars = OperationVariables>(
     [cache, from]
   );
 
-  const stableOptions = useDeepMemo(() => ({ ...rest, from: id! }), [rest, id]);
+  const stableOptions = useDeepMemo(
+    // We default the `id` to a falsey string value to ensure `undefined` does
+    // not get passed to cache.identify in cache.watchFragment. If that happens,
+    // an obscure warning is displayed to the user
+    // (https://github.com/apollographql/apollo-client/pull/12052).
+    //
+    // `ROOT_QUERY` will be used as the default `id` in `cache.diff` if `id`
+    // is a falsey value.
+    () => ({ ...rest, from: id || "" }),
+    [rest, id]
+  );
 
   // Since .next is async, we need to make sure that we
   // get the correct diff on the next render given new diffOptions