Handle different cache ids in useSuspenseFragment

Author: jerelmiller

src/react/hooks/useSuspenseFragment.ts

@@ -8,9 +8,8 @@ import { canonicalStringify } from "../../cache/index.js";
 import type { Cache } from "../../cache/index.js";
 import { useApolloClient } from "./useApolloClient.js";
 import { getSuspenseCache } from "../internal/index.js";
-import type { CacheKey } from "../internal/index.js";
-import React from "rehackt";
-import type { FragmentKey } from "../internal/cache/types.js";
+import React, { useMemo } from "rehackt";
+import type { FragmentCacheKey, FragmentKey } from "../internal/cache/types.js";
 import { __use } from "./internal/__use.js";
 import { wrapHook } from "./internal/index.js";
 
@@ -59,8 +58,16 @@ function _useSuspenseFragment<
   options: UseSuspenseFragmentOptions<TData, TVariables>
 ): UseSuspenseFragmentResult<TData> {
   const client = useApolloClient(options.client);
+  const { from } = options;
+  const { cache } = client;
 
-  const cacheKey: CacheKey = [
+  const id = useMemo(
+    () => (typeof from === "string" ? from : cache.identify(from)),
+    [cache, from]
+  )!;
+
+  const cacheKey: FragmentCacheKey = [
+    id,
     options.fragment,
     canonicalStringify(options.variables),
   ];

src/react/internal/cache/SuspenseCache.ts

@@ -6,7 +6,7 @@ import type {
 import type { Observable } from "../../../utilities/index.js";
 import { canUseWeakMap } from "../../../utilities/index.js";
 import { InternalQueryReference } from "./QueryReference.js";
-import type { CacheKey } from "./types.js";
+import type { CacheKey, FragmentCacheKey } from "./types.js";
 import { FragmentReference } from "./FragmentReference.js";
 
 export interface SuspenseCacheOptions {
@@ -58,7 +58,7 @@ export class SuspenseCache {
   }
 
   getFragmentRef<TData>(
-    cacheKey: CacheKey,
+    cacheKey: FragmentCacheKey,
     createObservable: () => Observable<WatchFragmentResult<TData>>
   ) {
     const ref = this.fragmentRefs.lookupArray(cacheKey) as {

src/react/internal/cache/types.ts

@@ -6,6 +6,12 @@ export type CacheKey = [
   ...queryKey: any[],
 ];
 
+export type FragmentCacheKey = [
+  cacheId: string,
+  fragment: DocumentNode,
+  stringifiedVariables: string,
+];
+
 export interface QueryKey {
   __queryKey?: string;
 }