fix(graphcache): Replace selection iterator implementation for JSC memory reduction (#3693)

.changeset/tender-moons-watch.md

···
+---
+'@urql/exchange-graphcache': patch
+---
+
+Update selection iterator implementation for JSC memory reduction

exchanges/graphcache/src/operations/query.ts

···
 
 import type { Context } from './shared';
 import {
-  makeSelectionIterator,
+  SelectionIterator,
   ensureData,
   makeContext,
   updateContext,
···
     return input;
   }
 
-  const iterate = makeSelectionIterator(
+  const selection = new SelectionIterator(
     entityKey,
     entityKey,
     false,
···
   let node: FormattedNode<FieldNode> | void;
   let hasChanged = InMemoryData.currentForeignData;
   const output = InMemoryData.makeData(input);
-  while ((node = iterate())) {
+  while ((node = selection.next())) {
     const fieldAlias = getFieldAlias(node);
     const fieldValue = input[fieldAlias];
     // Add the current alias to the walked path before processing the field's value
···
     return;
   }
 
-  const iterate = makeSelectionIterator(
+  const selection = new SelectionIterator(
     typename,
     entityKey,
     false,
···
   let node: FormattedNode<FieldNode> | void;
   const hasPartials = ctx.partial;
   const output = InMemoryData.makeData(input);
-  while ((node = iterate()) !== undefined) {
+  while ((node = selection.next()) !== undefined) {
     // Derive the needed data from our node.
     const fieldName = getName(node);
     const fieldArgs = getFieldArguments(node, ctx.variables);

exchanges/graphcache/src/operations/shared.test.ts

···
 } from '@urql/core';
 import { FieldNode } from '@0no-co/graphql.web';
 
-import { makeSelectionIterator, deferRef } from './shared';
+import { SelectionIterator, deferRef } from './shared';
 import { SelectionSet } from '../ast';
 
 const selectionOfDocument = (
···
 
 const ctx = {} as any;
 
-describe('makeSelectionIterator', () => {
+describe('SelectionIterator', () => {
   it('emits all fields', () => {
     const selection = selectionOfDocument(gql`
       {
···
         c
       }
     `);
-    const iterate = makeSelectionIterator(
+    const iterate = new SelectionIterator(
       'Query',
       'Query',
       false,
···
     const result: FieldNode[] = [];
 
     let node: FieldNode | void;
-    while ((node = iterate())) result.push(node);
+    while ((node = iterate.next())) result.push(node);
 
     expect(result).toMatchInlineSnapshot(`
       [
···
       }
     `);
 
-    const iterate = makeSelectionIterator(
+    const iterate = new SelectionIterator(
       'Query',
       'Query',
       false,
···
     const result: FieldNode[] = [];
 
     let node: FieldNode | void;
-    while ((node = iterate())) result.push(node);
+    while ((node = iterate.next())) result.push(node);
 
     expect(result).toMatchInlineSnapshot('[]');
   });
···
       }
     `);
 
-    const iterate = makeSelectionIterator(
+    const iterate = new SelectionIterator(
       'Query',
       'Query',
       false,
···
     const result: FieldNode[] = [];
 
     let node: FieldNode | void;
-    while ((node = iterate())) result.push(node);
+    while ((node = iterate.next())) result.push(node);
 
     expect(result).toMatchInlineSnapshot(`
       [
···
       }
     `);
 
-    const iterate = makeSelectionIterator(
+    const iterate = new SelectionIterator(
       'Query',
       'Query',
       false,
···
     );
 
     const deferred: boolean[] = [];
-    while (iterate()) deferred.push(deferRef);
+    while (iterate.next()) deferred.push(deferRef);
     expect(deferred).toEqual([
       false, // a
       true, // b
···
       }
     `);
 
-    const iterate = makeSelectionIterator(
+    const iterate = new SelectionIterator(
       'Query',
       'Query',
       true,
···
     );
 
     const deferred: boolean[] = [];
-    while (iterate()) deferred.push(deferRef);
+    while (iterate.next()) deferred.push(deferRef);
     expect(deferred).toEqual([true, true, true]);
   });
 });

exchanges/graphcache/src/operations/shared.ts

···
 import type { CombinedError, ErrorLike, FormattedNode } from '@urql/core';
 
 import type {
-  FieldNode,
   InlineFragmentNode,
   FragmentDefinitionNode,
 } from '@0no-co/graphql.web';
···
   });
 };
 
-interface SelectionIterator {
-  (): FormattedNode<FieldNode> | undefined;
-}
+export class SelectionIterator {
+  typename: undefined | string;
+  entityKey: string;
+  ctx: Context;
+  stack: {
+    selectionSet: FormattedNode<SelectionSet>;
+    index: number;
+    defer: boolean;
+    optional: boolean | undefined;
+  }[];
 
-// 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;
+  // NOTE: Outside of this file, we expect `_defer` to always be reset to `false`
+  constructor(
+    typename: undefined | string,
+    entityKey: string,
+    _defer: false,
+    _optional: undefined,
+    selectionSet: FormattedNode<SelectionSet>,
+    ctx: Context
+  );
+  // NOTE: Inside this file we expect the state to be recursively passed on
+  constructor(
+    typename: undefined | string,
+    entityKey: string,
+    _defer: boolean,
+    _optional: undefined | boolean,
+    selectionSet: FormattedNode<SelectionSet>,
+    ctx: Context
+  );
 
-export function makeSelectionIterator(
-  typename: undefined | string,
-  entityKey: string,
-  _defer: boolean,
-  _optional: boolean | undefined,
-  selectionSet: FormattedNode<SelectionSet>,
-  ctx: Context
-): SelectionIterator {
-  let child: SelectionIterator | void;
-  let index = 0;
+  constructor(
+    typename: undefined | string,
+    entityKey: string,
+    _defer: boolean,
+    _optional: boolean | undefined,
+    selectionSet: FormattedNode<SelectionSet>,
+    ctx: Context
+  ) {
+    this.typename = typename;
+    this.entityKey = entityKey;
+    this.ctx = ctx;
+    this.stack = [
+      {
+        selectionSet,
+        index: 0,
+        defer: _defer,
+        optional: _optional,
+      },
+    ];
+  }
 
-  return function next() {
-    let node: FormattedNode<FieldNode> | undefined;
-    while (child || index < selectionSet.length) {
-      node = undefined;
-      deferRef = _defer;
-      optionalRef = _optional;
-      if (child) {
-        if ((node = child())) {
-          return node;
-        } else {
-          child = undefined;
-          if (process.env.NODE_ENV !== 'production') popDebugNode();
-        }
-      } else {
-        const select = selectionSet[index++];
-        if (!shouldInclude(select, ctx.variables)) {
+  next() {
+    while (this.stack.length > 0) {
+      let state = this.stack[this.stack.length - 1];
+      while (state.index < state.selectionSet.length) {
+        const select = state.selectionSet[state.index++];
+        if (!shouldInclude(select, this.ctx.variables)) {
           /*noop*/
         } else if (select.kind !== Kind.FIELD) {
           // A fragment is either referred to by FragmentSpread or inline
           const fragment =
             select.kind !== Kind.INLINE_FRAGMENT
-              ? ctx.fragments[getName(select)]
+              ? this.ctx.fragments[getName(select)]
               : select;
           if (fragment) {
             const isMatching =
               !fragment.typeCondition ||
-              (ctx.store.schema
-                ? isInterfaceOfType(ctx.store.schema, fragment, typename)
+              (this.ctx.store.schema
+                ? isInterfaceOfType(
+                    this.ctx.store.schema,
+                    fragment,
+                    this.typename
+                  )
                 : (currentOperation === 'read' &&
                     isFragmentMatching(
                       fragment.typeCondition.name.value,
-                      typename
+                      this.typename
                     )) ||
                   isFragmentHeuristicallyMatching(
                     fragment,
-                    typename,
-                    entityKey,
-                    ctx.variables,
-                    ctx.store.logger
+                    this.typename,
+                    this.entityKey,
+                    this.ctx.variables,
+                    this.ctx.store.logger
                   ));
-
             if (
               isMatching ||
-              (currentOperation === 'write' && !ctx.store.schema)
+              (currentOperation === 'write' && !this.ctx.store.schema)
             ) {
               if (process.env.NODE_ENV !== 'production')
-                pushDebugNode(typename, fragment);
+                pushDebugNode(this.typename, fragment);
               const isFragmentOptional = isOptional(select);
               if (
                 isMatching &&
                 fragment.typeCondition &&
-                typename !== fragment.typeCondition.name.value
+                this.typename !== fragment.typeCondition.name.value
               ) {
-                writeConcreteType(fragment.typeCondition.name.value, typename!);
+                writeConcreteType(
+                  fragment.typeCondition.name.value,
+                  this.typename!
+                );
               }
 
-              child = makeSelectionIterator(
-                typename,
-                entityKey,
-                _defer || isDeferred(select, ctx.variables),
-                isFragmentOptional !== undefined
-                  ? isFragmentOptional
-                  : _optional,
-                getSelectionSet(fragment),
-                ctx
+              this.stack.push(
+                (state = {
+                  selectionSet: getSelectionSet(fragment),
+                  index: 0,
+                  defer: state.defer || isDeferred(select, this.ctx.variables),
+                  optional:
+                    isFragmentOptional !== undefined
+                      ? isFragmentOptional
+                      : state.optional,
+                })
               );
             }
           }
         } else if (currentOperation === 'write' || !select._generated) {
+          deferRef = state.defer;
+          optionalRef = state.optional;
           return select;
         }
       }
+      this.stack.pop();
+      if (process.env.NODE_ENV !== 'production') popDebugNode();
     }
-  };
+    return undefined;
+  }
 }
 
 const isFragmentMatching = (typeCondition: string, typename: string | void) => {

exchanges/graphcache/src/operations/write.ts

···
 
 import type { Context } from './shared';
 import {
-  makeSelectionIterator,
+  SelectionIterator,
   ensureData,
   makeContext,
   updateContext,
···
   }
 
   const updates = ctx.store.updates[typename];
-  const iterate = makeSelectionIterator(
+  const selection = new SelectionIterator(
     typename,
     entityKey || typename,
     false,
···
   );
 
   let node: FormattedNode<FieldNode> | void;
-  while ((node = iterate())) {
+  while ((node = selection.next())) {
     const fieldName = getName(node);
     const fieldArgs = getFieldArguments(node, ctx.variables);
     const fieldKey = keyOfField(fieldName, fieldArgs);