@isograph/react 0.0.0-main-945e49cc → 0.0.0-main-1bfd646b

package/src/IsographEnvironment.tsx

@@ -1,9 +1,5 @@
-import { ReactNode, createContext, useContext } from 'react';
-import * as React from 'react';
 import { ParentCache } from '@isograph/isograph-react-disposable-state';
-
-export const IsographEnvironmentContext =
-  createContext<IsographEnvironment | null>(null);
+import { RetainedQuery } from './garbageCollection';
 
 type ComponentName = string;
 type StringifiedArgs = string;
@@ -23,6 +19,9 @@ export type IsographEnvironment = {
   componentCache: ComponentCache;
   subscriptions: Subscriptions;
   suspenseCache: SuspenseCache;
+  retainedQueries: Set<RetainedQuery>;
+  gcBuffer: Array<RetainedQuery>;
+  gcBufferSize: number;
 };
 
 export type MissingFieldHandler = (
@@ -41,6 +40,7 @@ export type IsographNetworkFunction = (
 export type Link = {
   __link: DataId;
 };
+
 export type DataTypeValue =
   // N.B. undefined is here to support optional id's, but
   // undefined should not *actually* be present in the store.
@@ -71,33 +71,7 @@ export type IsographStore = {
   __ROOT: StoreRecord;
 };
 
-export type IsographEnvironmentProviderProps = {
-  environment: IsographEnvironment;
-  children: ReactNode;
-};
-
-export function IsographEnvironmentProvider({
-  environment,
-  children,
-}: IsographEnvironmentProviderProps) {
-  return (
-    <IsographEnvironmentContext.Provider value={environment}>
-      {children}
-    </IsographEnvironmentContext.Provider>
-  );
-}
-
-export function useIsographEnvironment(): IsographEnvironment {
-  const context = useContext(IsographEnvironmentContext);
-  if (context == null) {
-    throw new Error(
-      'Unexpected null environment context. Make sure to render ' +
-        'this component within an IsographEnvironmentProvider component',
-    );
-  }
-  return context;
-}
-
+const DEFAULT_GC_BUFFER_SIZE = 10;
 export function createIsographEnvironment(
   store: IsographStore,
   networkFunction: IsographNetworkFunction,
@@ -110,6 +84,9 @@ export function createIsographEnvironment(
     componentCache: {},
     subscriptions: new Set(),
     suspenseCache: {},
+    retainedQueries: new Set(),
+    gcBuffer: [],
+    gcBufferSize: DEFAULT_GC_BUFFER_SIZE,
   };
 }
 

package/src/IsographEnvironmentProvider.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ReactNode, createContext, useContext } from 'react';
+import { type IsographEnvironment } from './IsographEnvironment';
+
+export const IsographEnvironmentContext =
+  createContext<IsographEnvironment | null>(null);
+
+export type IsographEnvironmentProviderProps = {
+  environment: IsographEnvironment;
+  children: ReactNode;
+};
+
+export function IsographEnvironmentProvider({
+  environment,
+  children,
+}: IsographEnvironmentProviderProps) {
+  return (
+    <IsographEnvironmentContext.Provider value={environment}>
+      {children}
+    </IsographEnvironmentContext.Provider>
+  );
+}
+
+export function useIsographEnvironment(): IsographEnvironment {
+  const context = useContext(IsographEnvironmentContext);
+  if (context == null) {
+    throw new Error(
+      'Unexpected null environment context. Make sure to render ' +
+        'this component within an IsographEnvironmentProvider component',
+    );
+  }
+  return context;
+}

package/src/cache.tsx

@@ -22,6 +22,12 @@ import {
   Link,
   type IsographEnvironment,
 } from './IsographEnvironment';
+import {
+  RetainedQuery,
+  garbageCollectEnvironment,
+  retainQuery,
+  unretainQuery,
+} from './garbageCollection';
 
 declare global {
   interface Window {
@@ -83,6 +89,18 @@ export function getOrCreateCacheForArtifact<T>(
   return getOrCreateCache<PromiseWrapper<T>>(environment, cacheKey, factory);
 }
 
+type NetworkRequestStatus =
+  | {
+      kind: 'UndisposedIncomplete';
+    }
+  | {
+      kind: 'Disposed';
+    }
+  | {
+      kind: 'UndisposedComplete';
+      retainedQuery: RetainedQuery;
+    };
+
 export function makeNetworkRequest<T>(
   environment: IsographEnvironment,
   artifact: IsoResolver,
@@ -91,20 +109,37 @@ export function makeNetworkRequest<T>(
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log('make network request', artifact, variables);
   }
+  let status: NetworkRequestStatus = {
+    kind: 'UndisposedIncomplete',
+  };
+  // This should be an observable, not a promise
   const promise = environment
     .networkFunction(artifact.queryText, variables)
     .then((networkResponse) => {
       if (typeof window !== 'undefined' && window.__LOG) {
         console.log('network response', artifact, artifact);
       }
-      normalizeData(
-        environment,
-        artifact.normalizationAst,
-        networkResponse.data,
-        variables,
-        artifact.nestedRefetchQueries,
-      );
-      return networkResponse.data;
+
+      if (status.kind === 'UndisposedIncomplete') {
+        normalizeData(
+          environment,
+          artifact.normalizationAst,
+          networkResponse.data,
+          variables,
+          artifact.nestedRefetchQueries,
+        );
+        const retainedQuery = {
+          normalizationAst: artifact.normalizationAst,
+          variables,
+        };
+        status = {
+          kind: 'UndisposedComplete',
+          retainedQuery,
+        };
+        retainQuery(environment, retainedQuery);
+      }
+      // TODO return null
+      return networkResponse;
     });
 
   const wrapper = wrapPromise(promise);
@@ -112,7 +147,18 @@ export function makeNetworkRequest<T>(
   const response: ItemCleanupPair<PromiseWrapper<T>> = [
     wrapper,
     () => {
-      // delete from cache
+      if (status.kind === 'UndisposedComplete') {
+        const didUnretainSomeQuery = unretainQuery(
+          environment,
+          status.retainedQuery,
+        );
+        if (didUnretainSomeQuery) {
+          garbageCollectEnvironment(environment);
+        }
+      }
+      status = {
+        kind: 'Disposed',
+      };
     },
   ];
   return response;
@@ -138,7 +184,9 @@ function normalizeData(
   networkResponse: NetworkResponseObject,
   variables: Object,
   nestedRefetchQueries: RefetchQueryArtifactWrapper[],
-) {
+): Set<DataId> {
+  const encounteredIds = new Set<DataId>();
+
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log(
       'about to normalize',
@@ -155,11 +203,13 @@ function normalizeData(
     ROOT_ID,
     variables as any,
     nestedRefetchQueries,
+    encounteredIds,
   );
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log('after normalization', { store: environment.store });
   }
   callSubscriptions(environment);
+  return encounteredIds;
 }
 
 export function subscribe(
@@ -194,7 +244,9 @@ function normalizeDataIntoRecord(
   targetParentRecordId: DataId,
   variables: { [index: string]: string },
   nestedRefetchQueries: RefetchQueryArtifactWrapper[],
+  mutableEncounteredIds: Set<DataId>,
 ) {
+  mutableEncounteredIds.add(targetParentRecordId);
   for (const normalizationNode of normalizationAst) {
     switch (normalizationNode.kind) {
       case 'Scalar': {
@@ -215,6 +267,7 @@ function normalizeDataIntoRecord(
           targetParentRecordId,
           variables,
           nestedRefetchQueries,
+          mutableEncounteredIds,
         );
         break;
       }
@@ -253,6 +306,7 @@ function normalizeLinkedField(
   targetParentRecordId: DataId,
   variables: { [index: string]: string },
   nestedRefetchQueries: RefetchQueryArtifactWrapper[],
+  mutableEncounteredIds: Set<DataId>,
 ) {
   const networkResponseKey = getNetworkResponseKey(astNode);
   const networkResponseData = networkResponseParentRecord[networkResponseKey];
@@ -282,7 +336,9 @@ function normalizeLinkedField(
         variables,
         i,
         nestedRefetchQueries,
+        mutableEncounteredIds,
       );
+
       dataIds.push({ __link: newStoreRecordId });
     }
     targetParentRecord[parentRecordKey] = dataIds;
@@ -295,6 +351,7 @@ function normalizeLinkedField(
       variables,
       null,
       nestedRefetchQueries,
+      mutableEncounteredIds,
     );
     targetParentRecord[parentRecordKey] = {
       __link: newStoreRecordId,
@@ -310,6 +367,7 @@ function normalizeNetworkResponseObject(
   variables: { [index: string]: string },
   index: number | null,
   nestedRefetchQueries: RefetchQueryArtifactWrapper[],
+  mutableEncounteredIds: Set<DataId>,
 ): DataId /* The id of the modified or newly created item */ {
   const newStoreRecordId = getDataIdOfNetworkResponse(
     targetParentRecordId,
@@ -330,6 +388,7 @@ function normalizeNetworkResponseObject(
     newStoreRecordId,
     variables,
     nestedRefetchQueries,
+    mutableEncounteredIds,
   );
 
   return newStoreRecordId;

package/src/entrypoint.ts

@@ -0,0 +1,59 @@
+import { Arguments } from './index';
+import { ReaderArtifact } from './reader';
+
+// This type should be treated as an opaque type.
+export type IsographEntrypoint<
+  TReadFromStore extends Object,
+  TResolverResult,
+> = {
+  kind: 'Entrypoint';
+  queryText: string;
+  normalizationAst: NormalizationAst;
+  readerArtifact: ReaderArtifact<TReadFromStore, TResolverResult>;
+  nestedRefetchQueries: RefetchQueryArtifactWrapper[];
+};
+
+export type NormalizationAstNode =
+  | NormalizationScalarField
+  | NormalizationLinkedField;
+export type NormalizationAst = NormalizationAstNode[];
+
+export type NormalizationScalarField = {
+  kind: 'Scalar';
+  fieldName: string;
+  arguments: Arguments | null;
+};
+
+export type NormalizationLinkedField = {
+  kind: 'Linked';
+  fieldName: string;
+  arguments: Arguments | null;
+  selections: NormalizationAst;
+};
+
+// This is more like an entrypoint, but one specifically for a refetch query/mutation
+export type RefetchQueryArtifact = {
+  kind: 'RefetchQuery';
+  queryText: string;
+  normalizationAst: NormalizationAst;
+};
+
+// TODO rename
+export type RefetchQueryArtifactWrapper = {
+  artifact: RefetchQueryArtifact;
+  allowedVariables: string[];
+};
+
+export function assertIsEntrypoint<
+  TReadFromStore extends Object,
+  TResolverResult,
+>(
+  value:
+    | IsographEntrypoint<TReadFromStore, TResolverResult>
+    | ((_: any) => any)
+    // Temporarily, allow any here. Once we automatically provide
+    // types to entrypoints, we probably don't need this.
+    | any,
+): asserts value is IsographEntrypoint<TReadFromStore, TResolverResult> {
+  if (typeof value === 'function') throw new Error('Not a string');
+}

package/src/garbageCollection.ts

@@ -0,0 +1,131 @@
+import {
+  DataId,
+  DataTypeValue,
+  IsographEnvironment,
+  IsographStore,
+  ROOT_ID,
+  StoreRecord,
+} from './IsographEnvironment';
+import { NormalizationAst } from './index';
+import { getParentRecordKey } from './cache';
+
+export type RetainedQuery = {
+  normalizationAst: NormalizationAst;
+  variables: {};
+};
+
+type DidUnretainSomeQuery = boolean;
+export function unretainQuery(
+  environment: IsographEnvironment,
+  retainedQuery: RetainedQuery,
+): DidUnretainSomeQuery {
+  environment.retainedQueries.delete(retainedQuery);
+  environment.gcBuffer.push(retainedQuery);
+
+  if (environment.gcBuffer.length > environment.gcBufferSize) {
+    environment.gcBuffer.shift();
+    return true;
+  }
+
+  return false;
+}
+
+export function retainQuery(
+  environment: IsographEnvironment,
+  queryToRetain: RetainedQuery,
+) {
+  environment.retainedQueries.add(queryToRetain);
+  // TODO can we remove this query from the buffer somehow?
+  // We are relying on === equality, but we really should be comparing
+  // id + variables
+}
+
+export function garbageCollectEnvironment(environment: IsographEnvironment) {
+  const retainedIds = new Set<DataId>([ROOT_ID]);
+
+  for (const query of environment.retainedQueries) {
+    recordReachableIds(environment.store, query, retainedIds);
+  }
+  for (const query of environment.gcBuffer) {
+    recordReachableIds(environment.store, query, retainedIds);
+  }
+
+  for (const dataId in environment.store) {
+    if (!retainedIds.has(dataId)) {
+      delete environment.store[dataId];
+    }
+  }
+}
+
+function recordReachableIds(
+  store: IsographStore,
+  retainedQuery: RetainedQuery,
+  mutableRetainedIds: Set<DataId>,
+) {
+  recordReachableIdsFromRecord(
+    store,
+    store[ROOT_ID],
+    mutableRetainedIds,
+    retainedQuery.normalizationAst,
+    retainedQuery.variables,
+  );
+}
+
+function getLinkedId(data: Exclude<DataTypeValue, null | void>): string {
+  // @ts-expect-error
+  if (data.__link != null) {
+    // @ts-expect-error
+    return data.__link;
+  } else {
+    throw new Error('Record in an invalid state');
+  }
+}
+
+function recordReachableIdsFromRecord(
+  store: IsographStore,
+  currentRecord: StoreRecord,
+  mutableRetainedIds: Set<DataId>,
+  selections: NormalizationAst,
+  variables: { [index: string]: string } | null,
+) {
+  for (const selection of selections) {
+    switch (selection.kind) {
+      case 'Linked':
+        const linkKey = getParentRecordKey(selection, variables ?? {});
+        const linkedFieldOrFields = currentRecord[linkKey];
+
+        const ids = [];
+        if (Array.isArray(linkedFieldOrFields)) {
+          for (const link of linkedFieldOrFields) {
+            if (link != null) {
+              const id = getLinkedId(link);
+              ids.push(id);
+            }
+          }
+        } else {
+          if (linkedFieldOrFields != null) {
+            const id = getLinkedId(linkedFieldOrFields);
+            ids.push(id);
+          }
+        }
+
+        for (const nextRecordId of ids) {
+          const nextRecord = store[nextRecordId];
+          if (nextRecord != null) {
+            mutableRetainedIds.add(nextRecordId);
+            recordReachableIdsFromRecord(
+              store,
+              nextRecord,
+              mutableRetainedIds,
+              selection.selections,
+              variables,
+            );
+          }
+        }
+
+        continue;
+      case 'Scalar':
+        continue;
+    }
+  }
+}

package/src/index.tsx

@@ -14,141 +14,68 @@ import {
   Link,
   ROOT_ID,
   StoreRecord,
-  useIsographEnvironment,
 } from './IsographEnvironment';
 import { useEffect, useState } from 'react';
+import { useIsographEnvironment } from './IsographEnvironmentProvider';
+import { ReaderArtifact, ReaderAst } from './reader';
+import {
+  IsographEntrypoint,
+  RefetchQueryArtifactWrapper,
+  assertIsEntrypoint,
+} from './entrypoint';
 
+export {
+  retainQuery,
+  unretainQuery,
+  type RetainedQuery,
+  garbageCollectEnvironment,
+} from './garbageCollection';
 export { type PromiseWrapper } from './PromiseWrapper';
 export { makeNetworkRequest, subscribe } from './cache';
 export {
-  IsographEnvironmentContext,
   ROOT_ID,
   type DataId,
   type DataTypeValue,
   type IsographEnvironment,
-  IsographEnvironmentProvider,
-  type IsographEnvironmentProviderProps,
   type IsographNetworkFunction,
   type IsographStore,
   type Link,
   type StoreRecord,
-  useIsographEnvironment,
   createIsographEnvironment,
   createIsographStore,
 } from './IsographEnvironment';
+export {
+  IsographEnvironmentProvider,
+  useIsographEnvironment,
+  type IsographEnvironmentProviderProps,
+} from './IsographEnvironmentProvider';
 export { useImperativeReference } from './useImperativeReference';
 export { EntrypointReader } from './EntrypointReader';
-
-// This type should be treated as an opaque type.
-export type IsographEntrypoint<
-  TReadFromStore extends Object,
-  TResolverResult,
-> = {
-  kind: 'Entrypoint';
-  queryText: string;
-  normalizationAst: NormalizationAst;
-  readerArtifact: ReaderArtifact<TReadFromStore, TResolverResult>;
-  nestedRefetchQueries: RefetchQueryArtifactWrapper[];
-};
-
-// TODO this should probably be at least three distinct types, for @component,
-// non-@component and refetch resolvers
-export type ReaderArtifact<TReadFromStore extends Object, TResolverResult> = {
-  kind: 'ReaderArtifact';
-  readerAst: ReaderAst<TReadFromStore>;
-  resolver: (data: TReadFromStore, runtimeProps: any) => TResolverResult;
-  variant: ReaderResolverVariant;
-};
-
-export type ReaderAstNode =
-  | ReaderScalarField
-  | ReaderLinkedField
-  | ReaderResolverField
-  | ReaderRefetchField
-  | ReaderMutationField;
-
-// @ts-ignore
-export type ReaderAst<TReadFromStore> = ReaderAstNode[];
+export {
+  type ReaderArtifact,
+  ReaderAst,
+  ReaderAstNode,
+  ReaderLinkedField,
+  ReaderMutationField,
+  ReaderRefetchField,
+  ReaderResolverField,
+  ReaderResolverVariant,
+  ReaderScalarField,
+} from './reader';
+export {
+  NormalizationAst,
+  NormalizationAstNode,
+  NormalizationLinkedField,
+  NormalizationScalarField,
+  IsographEntrypoint,
+  assertIsEntrypoint,
+  RefetchQueryArtifact,
+  RefetchQueryArtifactWrapper,
+} from './entrypoint';
 
 export type ExtractSecondParam<T extends (arg1: any, arg2: any) => any> =
   T extends (arg1: any, arg2: infer P) => any ? P : never;
 
-export type ReaderScalarField = {
-  kind: 'Scalar';
-  fieldName: string;
-  alias: string | null;
-  arguments: Arguments | null;
-};
-export type ReaderLinkedField = {
-  kind: 'Linked';
-  fieldName: string;
-  alias: string | null;
-  selections: ReaderAst<unknown>;
-  arguments: Arguments | null;
-};
-
-export type ReaderResolverVariant =
-  | { kind: 'Eager' }
-  // componentName is the component's cacheKey for getRefReaderByName
-  // and is the type + field concatenated
-  | { kind: 'Component'; componentName: string };
-
-export type ReaderResolverField = {
-  kind: 'Resolver';
-  alias: string;
-  readerArtifact: ReaderArtifact<any, any>;
-  arguments: Arguments | null;
-  usedRefetchQueries: number[];
-};
-
-export type ReaderRefetchField = {
-  kind: 'RefetchField';
-  alias: string;
-  // TODO this bad modeling. A refetch field cannot have variant: "Component" (I think)
-  readerArtifact: ReaderArtifact<any, any>;
-  refetchQuery: number;
-};
-
-export type ReaderMutationField = {
-  kind: 'MutationField';
-  alias: string;
-  // TODO this bad modeling. A mutation field cannot have variant: "Component" (I think)
-  readerArtifact: ReaderArtifact<any, any>;
-  refetchQuery: number;
-};
-
-export type NormalizationAstNode =
-  | NormalizationScalarField
-  | NormalizationLinkedField;
-// @ts-ignore
-export type NormalizationAst = NormalizationAstNode[];
-
-export type NormalizationScalarField = {
-  kind: 'Scalar';
-  fieldName: string;
-  arguments: Arguments | null;
-};
-
-export type NormalizationLinkedField = {
-  kind: 'Linked';
-  fieldName: string;
-  arguments: Arguments | null;
-  selections: NormalizationAst;
-};
-
-// This is more like an entrypoint, but one specifically for a refetch query/mutation
-export type RefetchQueryArtifact = {
-  kind: 'RefetchQuery';
-  queryText: string;
-  normalizationAst: NormalizationAst;
-};
-
-// TODO rename
-export type RefetchQueryArtifactWrapper = {
-  artifact: RefetchQueryArtifact;
-  allowedVariables: string[];
-};
-
 export type Arguments = Argument[];
 export type Argument = [ArgumentName, ArgumentValue];
 export type ArgumentName = string;
@@ -177,17 +104,6 @@ export type FragmentReference<
   nestedRefetchQueries: RefetchQueryArtifactWrapper[];
 };
 
-function assertIsEntrypoint<TReadFromStore extends Object, TResolverResult>(
-  value:
-    | IsographEntrypoint<TReadFromStore, TResolverResult>
-    | ((_: any) => any)
-    // Temporarily, allow any here. Once we automatically provide
-    // types to entrypoints, we probably don't need this.
-    | any,
-): asserts value is IsographEntrypoint<TReadFromStore, TResolverResult> {
-  if (typeof value === 'function') throw new Error('Not a string');
-}
-
 export type ExtractReadFromStore<Type> =
   Type extends IsographEntrypoint<infer X, any> ? X : never;
 export type ExtractResolverResult<Type> =