@isograph/react 0.1.0 → 0.2.0

package/src/core/componentCache.ts

@@ -0,0 +1,61 @@
+import { stableCopy } from './cache';
+import { IsographEnvironment } from './IsographEnvironment';
+import { FragmentReference } from './FragmentReference';
+import { useReadAndSubscribe } from '../react/useReadAndSubscribe';
+import { NetworkRequestReaderOptions } from './read';
+import { readPromise } from './PromiseWrapper';
+
+export function getOrCreateCachedComponent(
+  environment: IsographEnvironment,
+  componentName: string,
+  fragmentReference: FragmentReference<any, any>,
+  networkRequestOptions: NetworkRequestReaderOptions,
+): React.FC<any> {
+  // cachedComponentsById is a three layer cache: id, then component name, then
+  // stringified args. These three, together, uniquely identify a read at a given
+  // time.
+  const cachedComponentsById = environment.componentCache;
+
+  cachedComponentsById[fragmentReference.root] =
+    cachedComponentsById[fragmentReference.root] ?? {};
+  const componentsByName = cachedComponentsById[fragmentReference.root];
+
+  componentsByName[componentName] = componentsByName[componentName] ?? {};
+  const byArgs = componentsByName[componentName];
+
+  const stringifiedArgs = JSON.stringify(
+    stableCopy(fragmentReference.variables),
+  );
+  byArgs[stringifiedArgs] =
+    byArgs[stringifiedArgs] ??
+    (() => {
+      function Component(additionalRuntimeProps: { [key: string]: any }) {
+        const data = useReadAndSubscribe(
+          fragmentReference,
+          networkRequestOptions,
+        );
+
+        // @ts-expect-error
+        if (typeof window !== 'undefined' && window.__LOG) {
+          console.log(
+            'Component re-rendered: ' +
+              componentName +
+              ' ' +
+              fragmentReference.root,
+          );
+        }
+
+        const readerWithRefetchQueries = readPromise(
+          fragmentReference.readerWithRefetchQueries,
+        );
+
+        return readerWithRefetchQueries.readerArtifact.resolver(
+          data,
+          additionalRuntimeProps,
+        );
+      }
+      Component.displayName = `${componentName} (id: ${fragmentReference.root}) @component`;
+      return Component;
+    })();
+  return byArgs[stringifiedArgs];
+}

package/src/core/entrypoint.ts

@@ -0,0 +1,99 @@
+import { TopLevelReaderArtifact } from './reader';
+import { Arguments } from './util';
+
+export type ReaderWithRefetchQueries<
+  TReadFromStore extends Object,
+  TClientFieldValue,
+> = {
+  readonly kind: 'ReaderWithRefetchQueries';
+  readonly readerArtifact: TopLevelReaderArtifact<
+    TReadFromStore,
+    TClientFieldValue,
+    // TODO don't type this as any
+    any
+  >;
+  readonly nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[];
+};
+
+// This type should be treated as an opaque type.
+export type IsographEntrypoint<
+  TReadFromStore extends Object,
+  TClientFieldValue,
+> = {
+  readonly kind: 'Entrypoint';
+  readonly queryText: string;
+  readonly normalizationAst: NormalizationAst;
+  readonly readerWithRefetchQueries: ReaderWithRefetchQueries<
+    TReadFromStore,
+    TClientFieldValue
+  >;
+};
+
+export type IsographEntrypointLoader<
+  TReadFromStore extends Object,
+  TClientFieldValue,
+> = {
+  readonly kind: 'EntrypointLoader';
+  readonly typeAndField: string;
+  readonly loader: () => Promise<
+    IsographEntrypoint<TReadFromStore, TClientFieldValue>
+  >;
+};
+
+export type NormalizationAstNode =
+  | NormalizationScalarField
+  | NormalizationLinkedField
+  | NormalizationInlineFragment;
+export type NormalizationAst = ReadonlyArray<NormalizationAstNode>;
+
+export type NormalizationScalarField = {
+  readonly kind: 'Scalar';
+  readonly fieldName: string;
+  readonly arguments: Arguments | null;
+};
+
+export type NormalizationLinkedField = {
+  readonly kind: 'Linked';
+  readonly fieldName: string;
+  readonly arguments: Arguments | null;
+  readonly selections: NormalizationAst;
+};
+
+export type NormalizationInlineFragment = {
+  readonly kind: 'InlineFragment';
+  readonly type: string;
+  readonly selections: NormalizationAst;
+};
+
+// This is more like an entrypoint, but one specifically for a refetch query/mutation
+export type RefetchQueryNormalizationArtifact = {
+  readonly kind: 'RefetchQuery';
+  readonly queryText: string;
+  readonly normalizationAst: NormalizationAst;
+};
+
+// TODO rename
+export type RefetchQueryNormalizationArtifactWrapper = {
+  readonly artifact: RefetchQueryNormalizationArtifact;
+  readonly allowedVariables: string[];
+};
+
+export function assertIsEntrypoint<
+  TReadFromStore extends Object,
+  TClientFieldValue,
+>(
+  value:
+    | IsographEntrypoint<TReadFromStore, TClientFieldValue>
+    | ((_: 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, TClientFieldValue> {
+  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> =
+  Type extends IsographEntrypoint<any, infer X> ? X : never;
+export type ExtractProps<Type> = Type extends React.FC<infer X> ? X : never;

package/src/core/garbageCollection.ts

@@ -0,0 +1,122 @@
+import { Variables } from './FragmentReference';
+import {
+  DataId,
+  IsographEnvironment,
+  IsographStore,
+  ROOT_ID,
+  StoreRecord,
+  assertLink,
+} from './IsographEnvironment';
+import { getParentRecordKey } from './cache';
+import { NormalizationAst } from './entrypoint';
+
+export type RetainedQuery = {
+  readonly normalizationAst: NormalizationAst;
+  readonly 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 recordReachableIdsFromRecord(
+  store: IsographStore,
+  currentRecord: StoreRecord,
+  mutableRetainedIds: Set<DataId>,
+  selections: NormalizationAst,
+  variables: Variables | 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 maybeLink of linkedFieldOrFields) {
+            const link = assertLink(maybeLink);
+            if (link != null) {
+              ids.push(link.__link);
+            }
+          }
+        } else {
+          const link = assertLink(linkedFieldOrFields);
+          if (link != null) {
+            ids.push(link.__link);
+          }
+        }
+
+        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/core/makeNetworkRequest.ts

@@ -0,0 +1,99 @@
+import { ItemCleanupPair } from '@isograph/disposable-types';
+import {
+  IsographEntrypoint,
+  RefetchQueryNormalizationArtifact,
+} from './entrypoint';
+import { Variables } from './FragmentReference';
+import {
+  garbageCollectEnvironment,
+  RetainedQuery,
+  retainQuery,
+  unretainQuery,
+} from './garbageCollection';
+import { IsographEnvironment } from './IsographEnvironment';
+import { AnyError, PromiseWrapper, wrapPromise } from './PromiseWrapper';
+import { normalizeData } from './cache';
+
+export function makeNetworkRequest(
+  environment: IsographEnvironment,
+  artifact: RefetchQueryNormalizationArtifact | IsographEntrypoint<any, any>,
+  variables: Variables,
+): ItemCleanupPair<PromiseWrapper<void, AnyError>> {
+  // @ts-expect-error
+  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) => {
+      // @ts-expect-error
+      if (typeof window !== 'undefined' && window.__LOG) {
+        console.log('network response', artifact, networkResponse);
+      }
+
+      if (networkResponse.errors != null) {
+        // @ts-expect-error Why are we getting the wrong constructor here?
+        throw new Error('GraphQL network response had errors', {
+          cause: networkResponse,
+        });
+      }
+
+      if (status.kind === 'UndisposedIncomplete') {
+        normalizeData(
+          environment,
+          artifact.normalizationAst,
+          networkResponse.data ?? {},
+          variables,
+          artifact.kind === 'Entrypoint'
+            ? artifact.readerWithRefetchQueries.nestedRefetchQueries
+            : [],
+        );
+        const retainedQuery = {
+          normalizationAst: artifact.normalizationAst,
+          variables,
+        };
+        status = {
+          kind: 'UndisposedComplete',
+          retainedQuery,
+        };
+        retainQuery(environment, retainedQuery);
+      }
+    });
+
+  const wrapper = wrapPromise(promise);
+
+  const response: ItemCleanupPair<PromiseWrapper<void, AnyError>> = [
+    wrapper,
+    () => {
+      if (status.kind === 'UndisposedComplete') {
+        const didUnretainSomeQuery = unretainQuery(
+          environment,
+          status.retainedQuery,
+        );
+        if (didUnretainSomeQuery) {
+          garbageCollectEnvironment(environment);
+        }
+      }
+      status = {
+        kind: 'Disposed',
+      };
+    },
+  ];
+  return response;
+}
+
+type NetworkRequestStatus =
+  | {
+      readonly kind: 'UndisposedIncomplete';
+    }
+  | {
+      readonly kind: 'Disposed';
+    }
+  | {
+      readonly kind: 'UndisposedComplete';
+      readonly retainedQuery: RetainedQuery;
+    };