feat(graphcache): add possibleTypes config for deterministic fragment matching (#3805)

Author: xuanduc987

.changeset/unlucky-apes-change.md

@@ -0,0 +1,5 @@
+---
+'@urql/exchange-graphcache': minor
+---
+
+Add possibleTypes config for deterministic fragment matching

exchanges/graphcache/src/operations/shared.ts

@@ -234,18 +234,24 @@ export class SelectionIterator {
                     fragment,
                     this.typename
                   )
-                : (currentOperation === 'read' &&
-                    isFragmentMatching(
+                : this.ctx.store.possibleTypeMap
+                  ? isSuperType(
+                      this.ctx.store.possibleTypeMap,
                       fragment.typeCondition.name.value,
                       this.typename
-                    )) ||
-                  isFragmentHeuristicallyMatching(
-                    fragment,
-                    this.typename,
-                    this.entityKey,
-                    this.ctx.variables,
-                    this.ctx.store.logger
-                  ));
+                    )
+                  : (currentOperation === 'read' &&
+                      isFragmentMatching(
+                        fragment.typeCondition.name.value,
+                        this.typename
+                      )) ||
+                    isFragmentHeuristicallyMatching(
+                      fragment,
+                      this.typename,
+                      this.entityKey,
+                      this.ctx.variables,
+                      this.ctx.store.logger
+                    ));
             if (
               isMatching ||
               (currentOperation === 'write' && !this.ctx.store.schema)
@@ -290,6 +296,19 @@ export class SelectionIterator {
   }
 }
 
+const isSuperType = (
+  possibleTypeMap: Map<string, Set<string>>,
+  typeCondition: string,
+  typename: string | void
+) => {
+  if (!typename) return false;
+  if (typeCondition === typename) return true;
+
+  const concreteTypes = possibleTypeMap.get(typeCondition);
+
+  return concreteTypes && concreteTypes.has(typename);
+};
+
 const isFragmentMatching = (typeCondition: string, typename: string | void) => {
   if (!typename) return false;
   if (typeCondition === typename) return true;

exchanges/graphcache/src/store/store.ts

@@ -57,6 +57,7 @@ export class Store<
   keys: KeyingConfig;
   globalIDs: Set<string> | boolean;
   schema?: SchemaIntrospector;
+  possibleTypeMap?: Map<string, Set<string>>;
 
   rootFields: { query: string; mutation: string; subscription: string };
   rootNames: { [name: string]: RootField | void };
@@ -86,6 +87,14 @@ export class Store<
       if (schema.types) this.schema = schema;
     }
 
+    if (!this.schema && opts.possibleTypes) {
+      this.possibleTypeMap = new Map();
+      for (const entry of Object.entries(opts.possibleTypes)) {
+        const [abstractType, concreteTypes] = entry;
+        this.possibleTypeMap.set(abstractType, new Set(concreteTypes));
+      }
+    }
+
     this.updates = opts.updates || {};
 
     this.rootFields = {

exchanges/graphcache/src/types.ts

@@ -618,6 +618,16 @@ export type CacheExchangeOpts = {
    * type names may be passed instead.
    */
   globalIDs?: string[] | boolean;
+  /** Configures abstract to concrete types mapping for GraphQL types.
+   *
+   * @remarks
+   * This will disable heuristic fragment matching, allowing Graphcache to match
+   * fragment deterministically.
+   *
+   * When both `possibleTypes` and `schema` is set, `possibleTypes` value will be
+   * ignored.
+   */
+  possibleTypes?: PossibleTypesConfig;
   /** Configures Graphcache with Schema Introspection data.
    *
    * @remarks
@@ -932,6 +942,10 @@ export type KeyingConfig = {
   [typename: string]: KeyGenerator;
 };
 
+export type PossibleTypesConfig = {
+  [abstractType: string]: string[];
+};
+
 /** Serialized normalized caching data. */
 export interface SerializedEntries {
   [key: string]: string | undefined;