@isograph/react 0.0.0-main-f524690b → 0.0.0-main-38d73d29

package/src/IsographEnvironment.tsx

@@ -0,0 +1,126 @@
+import { ReactNode, createContext, useContext } from 'react';
+import * as React from 'react';
+import { subscribe } from './cache';
+import { ParentCache } from '@isograph/isograph-react-disposable-state';
+
+export const IsographEnvironmentContext =
+  createContext<IsographEnvironment | null>(null);
+
+type ComponentName = string;
+type StringifiedArgs = string;
+type ComponentCache = {
+  [key: DataId]: {
+    [key: ComponentName]: { [key: StringifiedArgs]: React.FC<any> };
+  };
+};
+
+export type Subscriptions = Set<() => void>;
+type SuspenseCache = { [index: string]: ParentCache<any> };
+
+export type IsographEnvironment = {
+  store: IsographStore;
+  networkFunction: IsographNetworkFunction;
+  missingFieldHandler: MissingFieldHandler | null;
+  componentCache: ComponentCache;
+  subscriptions: Subscriptions;
+  suspenseCache: SuspenseCache;
+};
+
+export type MissingFieldHandler = (
+  storeRecord: StoreRecord,
+  root: DataId,
+  fieldName: string,
+  arguments_: { [index: string]: any } | null,
+  variables: { [index: string]: any } | null,
+) => Link | undefined;
+
+export type IsographNetworkFunction = (
+  queryText: string,
+  variables: object,
+) => Promise<any>;
+
+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.
+  | undefined
+  // Singular scalar fields:
+  | number
+  | boolean
+  | string
+  | null
+  // Singular linked fields:
+  | Link
+  // Plural scalar and linked fields:
+  | DataTypeValue[];
+
+export type StoreRecord = {
+  [index: DataId | string]: DataTypeValue;
+  // TODO __typename?: T, which is restricted to being a concrete string
+  // TODO this shouldn't always be named id
+  id?: DataId;
+};
+
+export type DataId = string;
+
+export const ROOT_ID: DataId & '__ROOT' = '__ROOT';
+
+export type IsographStore = {
+  [index: DataId]: StoreRecord | null;
+  __ROOT: StoreRecord;
+};
+
+export type IsographEnvironmentProviderProps = {
+  environment: IsographEnvironment;
+  children: ReactNode;
+};
+
+export function IsographEnvironmentProvider({
+  environment,
+  children,
+}: IsographEnvironmentProviderProps) {
+  const [, setState] = React.useState<object | void>();
+  React.useEffect(() => {
+    return subscribe(environment, () => setState({}));
+  }, []);
+
+  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;
+}
+
+export function createIsographEnvironment(
+  store: IsographStore,
+  networkFunction: IsographNetworkFunction,
+  missingFieldHandler?: MissingFieldHandler,
+): IsographEnvironment {
+  return {
+    store,
+    networkFunction,
+    missingFieldHandler: missingFieldHandler ?? null,
+    componentCache: {},
+    subscriptions: new Set(),
+    suspenseCache: {},
+  };
+}
+
+export function createIsographStore() {
+  return {
+    [ROOT_ID]: {},
+  };
+}

package/src/{cache.ts → cache.tsx}

@@ -15,6 +15,13 @@ import {
   ReaderScalarField,
   RefetchQueryArtifactWrapper,
 } from './index';
+import {
+  DataId,
+  ROOT_ID,
+  StoreRecord,
+  Link,
+  type IsographEnvironment,
+} from './IsographEnvironment';
 
 declare global {
   interface Window {
@@ -22,24 +29,23 @@ declare global {
   }
 }
 
-const cache: { [index: string]: ParentCache<any> } = {};
-
 function getOrCreateCache<T>(
+  environment: IsographEnvironment,
   index: string,
   factory: Factory<T>,
 ): ParentCache<T> {
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log('getting cache for', {
       index,
-      cache: Object.keys(cache),
-      found: !!cache[index],
+      cache: Object.keys(environment.suspenseCache),
+      found: !!environment.suspenseCache[index],
     });
   }
-  if (cache[index] == null) {
-    cache[index] = new ParentCache(factory);
+  if (environment.suspenseCache[index] == null) {
+    environment.suspenseCache[index] = new ParentCache(factory);
   }
 
-  return cache[index];
+  return environment.suspenseCache[index];
 }
 
 /**
@@ -67,47 +73,39 @@ export function stableCopy<T>(value: T): T {
 type IsoResolver = IsographEntrypoint<any, any, any>;
 
 export function getOrCreateCacheForArtifact<T>(
+  environment: IsographEnvironment,
   artifact: IsographEntrypoint<any, any, T>,
   variables: object,
 ): ParentCache<PromiseWrapper<T>> {
   const cacheKey = artifact.queryText + JSON.stringify(stableCopy(variables));
   const factory: Factory<PromiseWrapper<T>> = () =>
-    makeNetworkRequest<T>(artifact, variables);
-  return getOrCreateCache<PromiseWrapper<T>>(cacheKey, factory);
-}
-
-let network: ((queryText: string, variables: object) => Promise<any>) | null;
-
-// This is a hack until we store this in context somehow
-export function setNetwork(newNetwork: typeof network) {
-  network = newNetwork;
+    makeNetworkRequest<T>(environment, artifact, variables);
+  return getOrCreateCache<PromiseWrapper<T>>(environment, cacheKey, factory);
 }
 
 export function makeNetworkRequest<T>(
+  environment: IsographEnvironment,
   artifact: IsoResolver,
   variables: object,
 ): ItemCleanupPair<PromiseWrapper<T>> {
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log('make network request', artifact, variables);
   }
-  if (network == null) {
-    throw new Error('Network must be set before makeNetworkRequest is called');
-  }
-
-  const promise = network(artifact.queryText, variables).then(
-    (networkResponse) => {
+  const promise = environment
+    .networkFunction(artifact.queryText, variables)
+    .then((networkResponse) => {
       if (typeof window !== 'undefined' && window.__LOG) {
         console.log('network response', artifact);
       }
       normalizeData(
+        environment,
         artifact.normalizationAst,
         networkResponse.data,
         variables,
         artifact.nestedRefetchQueries,
       );
       return networkResponse.data;
-    },
-  );
+    });
 
   const wrapper = wrapPromise(promise);
 
@@ -120,48 +118,6 @@ export function makeNetworkRequest<T>(
   return response;
 }
 
-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.
-  | undefined
-  // Singular scalar fields:
-  | number
-  | boolean
-  | string
-  | null
-  // Singular linked fields:
-  | Link
-  // Plural scalar and linked fields:
-  | DataTypeValue[];
-
-export type StoreRecord = {
-  [index: DataId | string]: DataTypeValue;
-  // TODO __typename?: T, which is restricted to being a concrete string
-  // TODO this shouldn't always be named id
-  id?: DataId;
-};
-
-export type DataId = string;
-
-export const ROOT_ID: DataId & '__ROOT' = '__ROOT';
-let store: {
-  [index: DataId]: StoreRecord | null;
-  __ROOT: StoreRecord;
-} = {
-  __ROOT: {},
-};
-export function getStore() {
-  return store;
-}
-export function clearStore() {
-  store = {
-    __ROOT: {},
-  };
-}
-
 type NetworkResponseScalarValue = string | number | boolean;
 type NetworkResponseValue =
   | NetworkResponseScalarValue
@@ -177,6 +133,7 @@ type NetworkResponseObject = {
 };
 
 function normalizeData(
+  environment: IsographEnvironment,
   normalizationAst: NormalizationAst,
   networkResponse: NetworkResponseObject,
   variables: Object,
@@ -191,43 +148,46 @@ function normalizeData(
     );
   }
   normalizeDataIntoRecord(
+    environment,
     normalizationAst,
     networkResponse,
-    store.__ROOT,
+    environment.store.__ROOT,
     ROOT_ID,
     variables as any,
     nestedRefetchQueries,
   );
   if (typeof window !== 'undefined' && window.__LOG) {
-    console.log('after normalization', { store });
+    console.log('after normalization', { store: environment.store });
   }
-  callSubscriptions();
+  callSubscriptions(environment);
 }
 
-export function subscribe(callback: () => void): () => void {
-  subscriptions.add(callback);
-  return () => subscriptions.delete(callback);
+export function subscribe(
+  environment: IsographEnvironment,
+  callback: () => void,
+): () => void {
+  environment.subscriptions.add(callback);
+  return () => environment.subscriptions.delete(callback);
 }
 
-export function onNextChange(): Promise<void> {
+export function onNextChange(environment: IsographEnvironment): Promise<void> {
   return new Promise((resolve) => {
-    const unsubscribe = subscribe(() => {
+    const unsubscribe = subscribe(environment, () => {
       unsubscribe();
       resolve();
     });
   });
 }
 
-const subscriptions: Set<() => void> = new Set();
-
-function callSubscriptions() {
-  subscriptions.forEach((callback) => callback());
+function callSubscriptions(environment: IsographEnvironment) {
+  environment.subscriptions.forEach((callback) => callback());
 }
 
 /**
  * Mutate targetParentRecord according to the normalizationAst and networkResponseParentRecord.
  */
 function normalizeDataIntoRecord(
+  environment: IsographEnvironment,
   normalizationAst: NormalizationAst,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
@@ -248,6 +208,7 @@ function normalizeDataIntoRecord(
       }
       case 'Linked': {
         normalizeLinkedField(
+          environment,
           normalizationNode,
           networkResponseParentRecord,
           targetParentRecord,
@@ -285,6 +246,7 @@ function normalizeScalarField(
  * Mutate targetParentRecord with a given linked field ast node.
  */
 function normalizeLinkedField(
+  environment: IsographEnvironment,
   astNode: NormalizationLinkedField,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
@@ -309,10 +271,11 @@ function normalizeLinkedField(
 
   if (Array.isArray(networkResponseData)) {
     // TODO check astNode.plural or the like
-    const dataIds = [];
+    const dataIds: Link[] = [];
     for (let i = 0; i < networkResponseData.length; i++) {
       const networkResponseObject = networkResponseData[i];
       const newStoreRecordId = normalizeNetworkResponseObject(
+        environment,
         astNode,
         networkResponseObject,
         targetParentRecordId,
@@ -325,6 +288,7 @@ function normalizeLinkedField(
     targetParentRecord[parentRecordKey] = dataIds;
   } else {
     const newStoreRecordId = normalizeNetworkResponseObject(
+      environment,
       astNode,
       networkResponseData,
       targetParentRecordId,
@@ -339,6 +303,7 @@ function normalizeLinkedField(
 }
 
 function normalizeNetworkResponseObject(
+  environment: IsographEnvironment,
   astNode: NormalizationLinkedField,
   networkResponseData: NetworkResponseObject,
   targetParentRecordId: string,
@@ -354,10 +319,11 @@ function normalizeNetworkResponseObject(
     index,
   );
 
-  const newStoreRecord = store[newStoreRecordId] ?? {};
-  store[newStoreRecordId] = newStoreRecord;
+  const newStoreRecord = environment.store[newStoreRecordId] ?? {};
+  environment.store[newStoreRecordId] = newStoreRecord;
 
   normalizeDataIntoRecord(
+    environment,
     astNode.selections,
     networkResponseData,
     newStoreRecord,

package/src/componentCache.ts

@@ -3,22 +3,18 @@ import {
   RefetchQueryArtifactWrapper,
   readButDoNotEvaluate,
 } from './index';
-import { DataId, stableCopy } from './cache';
+import { stableCopy } from './cache';
+import { IsographEnvironment, DataId } from './IsographEnvironment';
 
-type ComponentName = string;
-type StringifiedArgs = string;
-const cachedComponentsById: {
-  [key: DataId]: {
-    [key: ComponentName]: { [key: StringifiedArgs]: React.FC<any> };
-  };
-} = {};
 export function getOrCreateCachedComponent(
+  environment: IsographEnvironment,
   root: DataId,
   componentName: string,
   readerArtifact: ReaderArtifact<any, any, any>,
   variables: { [key: string]: string },
   resolverRefetchQueries: RefetchQueryArtifactWrapper[],
 ) {
+  const cachedComponentsById = environment.componentCache;
   const stringifiedArgs = JSON.stringify(stableCopy(variables));
   cachedComponentsById[root] = cachedComponentsById[root] ?? {};
   const componentsByName = cachedComponentsById[root];
@@ -28,7 +24,7 @@ export function getOrCreateCachedComponent(
     byArgs[stringifiedArgs] ??
     (() => {
       function Component(additionalRuntimeProps) {
-        const data = readButDoNotEvaluate({
+        const data = readButDoNotEvaluate(environment, {
           kind: 'FragmentReference',
           readerArtifact: readerArtifact,
           root,