@isograph/react 0.0.0-main-c88a0561 → 0.0.0-main-f49c67bb

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

@@ -1,4 +1,8 @@
-import { Factory, ItemCleanupPair, ParentCache } from '@isograph/react-disposable-state';
+import {
+  Factory,
+  ItemCleanupPair,
+  ParentCache,
+} from '@isograph/react-disposable-state';
 import { PromiseWrapper, wrapPromise } from './PromiseWrapper';
 import {
   Argument,
@@ -11,6 +15,13 @@ import {
   ReaderScalarField,
   RefetchQueryArtifactWrapper,
 } from './index';
+import {
+  DataId,
+  ROOT_ID,
+  StoreRecord,
+  Link,
+  type IsographEnvironment,
+} from './context';
 
 declare global {
   interface Window {
@@ -20,7 +31,10 @@ declare global {
 
 const cache: { [index: string]: ParentCache<any> } = {};
 
-function getOrCreateCache<T>(index: string, factory: Factory<T>): ParentCache<T> {
+function getOrCreateCache<T>(
+  index: string,
+  factory: Factory<T>,
+): ParentCache<T> {
   if (typeof window !== 'undefined' && window.__LOG) {
     console.log('getting cache for', {
       index,
@@ -60,44 +74,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);
+  const factory: Factory<PromiseWrapper<T>> = () =>
+    makeNetworkRequest<T>(environment, 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;
-}
-
 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) => {
-    if (typeof window !== 'undefined' && window.__LOG) {
-      console.log('network response', artifact);
-    }
-    normalizeData(
-      artifact.normalizationAst,
-      networkResponse.data,
-      variables,
-      artifact.nestedRefetchQueries,
-    );
-    return networkResponse.data;
-  });
+  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);
 
@@ -110,48 +119,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
@@ -167,24 +134,31 @@ type NetworkResponseObject = {
 };
 
 function normalizeData(
+  environment: IsographEnvironment,
   normalizationAst: NormalizationAst,
   networkResponse: NetworkResponseObject,
   variables: Object,
   nestedRefetchQueries: RefetchQueryArtifactWrapper[],
 ) {
   if (typeof window !== 'undefined' && window.__LOG) {
-    console.log('about to normalize', normalizationAst, networkResponse, variables);
+    console.log(
+      'about to normalize',
+      normalizationAst,
+      networkResponse,
+      variables,
+    );
   }
   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();
 }
@@ -213,6 +187,7 @@ function callSubscriptions() {
  * Mutate targetParentRecord according to the normalizationAst and networkResponseParentRecord.
  */
 function normalizeDataIntoRecord(
+  environment: IsographEnvironment,
   normalizationAst: NormalizationAst,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
@@ -233,6 +208,7 @@ function normalizeDataIntoRecord(
       }
       case 'Linked': {
         normalizeLinkedField(
+          environment,
           normalizationNode,
           networkResponseParentRecord,
           targetParentRecord,
@@ -256,7 +232,10 @@ function normalizeScalarField(
   const networkResponseData = networkResponseParentRecord[networkResponseKey];
   const parentRecordKey = getParentRecordKey(astNode, variables);
 
-  if (networkResponseData == null || isScalarOrEmptyArray(networkResponseData)) {
+  if (
+    networkResponseData == null ||
+    isScalarOrEmptyArray(networkResponseData)
+  ) {
     targetStoreRecord[parentRecordKey] = networkResponseData;
   } else {
     throw new Error('Unexpected object array when normalizing scalar');
@@ -267,6 +246,7 @@ function normalizeScalarField(
  * Mutate targetParentRecord with a given linked field ast node.
  */
 function normalizeLinkedField(
+  environment: IsographEnvironment,
   astNode: NormalizationLinkedField,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
@@ -284,15 +264,18 @@ function normalizeLinkedField(
   }
 
   if (isScalarButNotEmptyArray(networkResponseData)) {
-    throw new Error('Unexpected scalar network response when normalizing a linked field');
+    throw new Error(
+      'Unexpected scalar network response when normalizing a linked field',
+    );
   }
 
   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,
@@ -305,6 +288,7 @@ function normalizeLinkedField(
     targetParentRecord[parentRecordKey] = dataIds;
   } else {
     const newStoreRecordId = normalizeNetworkResponseObject(
+      environment,
       astNode,
       networkResponseData,
       targetParentRecordId,
@@ -319,6 +303,7 @@ function normalizeLinkedField(
 }
 
 function normalizeNetworkResponseObject(
+  environment: IsographEnvironment,
   astNode: NormalizationLinkedField,
   networkResponseData: NetworkResponseObject,
   targetParentRecordId: string,
@@ -334,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,
@@ -358,7 +344,9 @@ function isScalarOrEmptyArray(
     return (data as any).every((x: any) => isScalarOrEmptyArray(x));
   }
   const isScalarValue =
-    typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean';
+    typeof data === 'string' ||
+    typeof data === 'number' ||
+    typeof data === 'boolean';
   return isScalarValue;
 }
 
@@ -374,7 +362,9 @@ function isScalarButNotEmptyArray(
     return (data as any).every((x: any) => isScalarOrEmptyArray(x));
   }
   const isScalarValue =
-    typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean';
+    typeof data === 'string' ||
+    typeof data === 'number' ||
+    typeof data === 'boolean';
   return isScalarValue;
 }
 
@@ -418,7 +408,10 @@ function getStoreKeyChunkForArgumentValue(
   }
 }
 
-function getStoreKeyChunkForArgument(argument: Argument, variables: { [index: string]: string }) {
+function getStoreKeyChunkForArgument(
+  argument: Argument,
+  variables: { [index: string]: string },
+) {
   const chunk = getStoreKeyChunkForArgumentValue(argument[1], variables);
   return `${FIRST_SPLIT_KEY}${argument[0]}${SECOND_SPLIT_KEY}${chunk}`;
 }

package/src/componentCache.ts

@@ -1,5 +1,11 @@
-import { ReaderArtifact, RefetchQueryArtifactWrapper, readButDoNotEvaluate } from './index';
-import { DataId, stableCopy } from './cache';
+import {
+  DataId,
+  ReaderArtifact,
+  RefetchQueryArtifactWrapper,
+  readButDoNotEvaluate,
+} from './index';
+import { stableCopy } from './cache';
+import { IsographEnvironment } from '../dist';
 
 type ComponentName = string;
 type StringifiedArgs = string;
@@ -9,6 +15,7 @@ const cachedComponentsById: {
   };
 } = {};
 export function getOrCreateCachedComponent(
+  environment: IsographEnvironment,
   root: DataId,
   componentName: string,
   readerArtifact: ReaderArtifact<any, any, any>,
@@ -24,7 +31,7 @@ export function getOrCreateCachedComponent(
     byArgs[stringifiedArgs] ??
     (() => {
       function Component(additionalRuntimeProps) {
-        const data = readButDoNotEvaluate({
+        const data = readButDoNotEvaluate(environment, {
           kind: 'FragmentReference',
           readerArtifact: readerArtifact,
           root,

package/src/context.tsx

@@ -0,0 +1,90 @@
+import { ReactNode, createContext, useContext } from 'react';
+import * as React from 'react';
+import { subscribe } from './cache';
+
+export const IsographEnvironmentContext =
+  createContext<IsographEnvironment | null>(null);
+
+export type IsographEnvironment = {
+  store: IsographStore;
+  networkFunction: IsographNetworkFunction;
+  missingFieldHandler: MissingFieldHandler | null;
+};
+
+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(() => 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;
+}