fix(graphcache): Cascade @defer, @_optional, and @_required sta…

…te only per nested fragment spread (#3517)
urql-graphql · Mar 2, 2024 · e9b476b · e9b476b
1 parent ceeb73b
commit e9b476b
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 18 deletions.
diff --git a/.changeset/sixty-needles-exercise.md b/.changeset/sixty-needles-exercise.md
@@ -0,0 +1,5 @@
+---
+'@urql/exchange-graphcache': patch
+---
+
+Prevent `@defer` from being applied in child field selections. Previously, a child field (i.e. a nested field) under a `@defer`-ed fragment would also become optional, which was based on a prior version of the DeferStream spec which didn't require deferred fields to be delivered as a group.
diff --git a/exchanges/graphcache/src/cacheExchange.test.ts b/exchanges/graphcache/src/cacheExchange.test.ts
@@ -909,8 +909,10 @@ describe('directives', () => {
         todos {
           id
           text
-          ... on Todo @_optional {
-            completed
+          ... @_optional {
+            ... on Todo {
+              completed
+            }
           }
         }
       }

diff --git a/exchanges/graphcache/src/operations/query.ts b/exchanges/graphcache/src/operations/query.ts
@@ -145,7 +145,7 @@ const readRoot = (
   const iterate = makeSelectionIterator(
     entityKey,
     entityKey,
-    deferRef,
+    false,
     undefined,
     select,
     ctx
@@ -390,7 +390,7 @@ const readSelection = (
   const iterate = makeSelectionIterator(
     typename,
     entityKey,
-    deferRef,
+    false,
     undefined,
     select,
     ctx

diff --git a/exchanges/graphcache/src/operations/shared.ts b/exchanges/graphcache/src/operations/shared.ts
@@ -71,8 +71,6 @@ export const makeContext = (
   entityKey: string,
   error: CombinedError | undefined
 ): Context => {
-  deferRef = false;
-
   const ctx: Context = {
     store,
     variables,
@@ -163,23 +161,42 @@ interface SelectionIterator {
   (): FormattedNode<FieldNode> | undefined;
 }
 
-export const makeSelectionIterator = (
-  typename: void | string,
+// NOTE: Outside of this file, we expect `_defer` to always be reset to `false`
+export function makeSelectionIterator(
+  typename: undefined | string,
+  entityKey: string,
+  _defer: false,
+  _optional: undefined,
+  selectionSet: FormattedNode<SelectionSet>,
+  ctx: Context
+): SelectionIterator;
+// NOTE: Inside this file we expect the state to be recursively passed on
+export function makeSelectionIterator(
+  typename: undefined | string,
+  entityKey: string,
+  _defer: boolean,
+  _optional: undefined | boolean,
+  selectionSet: FormattedNode<SelectionSet>,
+  ctx: Context
+): SelectionIterator;
+
+export function makeSelectionIterator(
+  typename: undefined | string,
   entityKey: string,
-  defer: boolean,
-  optional: boolean | undefined,
+  _defer: boolean,
+  _optional: boolean | undefined,
   selectionSet: FormattedNode<SelectionSet>,
   ctx: Context
-): SelectionIterator => {
+): SelectionIterator {
   let child: SelectionIterator | void;
   let index = 0;
 
   return function next() {
     let node: FormattedNode<FieldNode> | undefined;
     while (child || index < selectionSet.length) {
       node = undefined;
-      deferRef = defer;
-      optionalRef = optional;
+      deferRef = _defer;
+      optionalRef = _optional;
       if (child) {
         if ((node = child())) {
           return node;
@@ -212,13 +229,14 @@ export const makeSelectionIterator = (
             if (isMatching) {
               if (process.env.NODE_ENV !== 'production')
                 pushDebugNode(typename, fragment);
-
               const isFragmentOptional = isOptional(select);
               child = makeSelectionIterator(
                 typename,
                 entityKey,
-                defer || isDeferred(select, ctx.variables),
-                isFragmentOptional,
+                _defer || isDeferred(select, ctx.variables),
+                isFragmentOptional !== undefined
+                  ? isFragmentOptional
+                  : _optional,
                 getSelectionSet(fragment),
                 ctx
               );
@@ -230,7 +248,7 @@ export const makeSelectionIterator = (
       }
     }
   };
-};
+}
 
 export const ensureData = (x: DataField): Data | NullArray<Data> | null =>
   x == null ? null : (x as Data | NullArray<Data>);

diff --git a/exchanges/graphcache/src/operations/write.ts b/exchanges/graphcache/src/operations/write.ts
@@ -239,7 +239,7 @@ const writeSelection = (
   const iterate = makeSelectionIterator(
     typename,
     entityKey || typename,
-    deferRef,
+    false,
     undefined,
     select,
     ctx