@isograph/react 0.0.0-main-1200105f → 0.0.0-main-ffab3426

package/dist/cache.d.ts

@@ -1,8 +1,13 @@
 import { ItemCleanupPair, ParentCache } from "@isograph/react-disposable-state";
 import { PromiseWrapper } from "./PromiseWrapper";
 import { IsographEntrypoint, NormalizationLinkedField, NormalizationScalarField, ReaderLinkedField, ReaderScalarField } from "./index";
+declare global {
+    interface Window {
+        __LOG: boolean;
+    }
+}
 type IsoResolver = IsographEntrypoint<any, any, any>;
-export declare function getOrCreateCacheForArtifact<T>(artifact: IsoResolver, variables: object): ParentCache<PromiseWrapper<T>>;
+export declare function getOrCreateCacheForArtifact<T>(artifact: IsographEntrypoint<any, any, T>, variables: object): ParentCache<PromiseWrapper<T>>;
 declare let network: ((queryText: string, variables: object) => Promise<any>) | null;
 export declare function setNetwork(newNetwork: typeof network): void;
 export declare function makeNetworkRequest<T>(artifact: IsoResolver, variables: object): ItemCleanupPair<PromiseWrapper<T>>;
@@ -16,10 +21,11 @@ export type StoreRecord = {
 };
 export type DataId = string;
 export declare const ROOT_ID: DataId & "__ROOT";
-export declare const store: {
-    [index: DataId]: StoreRecord | null;
+export declare function getStore(): {
+    [index: string]: StoreRecord | null;
     __ROOT: StoreRecord;
 };
+export declare function clearStore(): void;
 export declare function subscribe(callback: () => void): () => void;
 export declare function onNextChange(): Promise<void>;
 export declare function getParentRecordKey(astNode: NormalizationLinkedField | NormalizationScalarField | ReaderLinkedField | ReaderScalarField, variables: {

package/dist/cache.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SECOND_SPLIT_KEY = exports.FIRST_SPLIT_KEY = exports.getParentRecordKey = exports.onNextChange = exports.subscribe = exports.store = exports.ROOT_ID = exports.makeNetworkRequest = exports.setNetwork = exports.getOrCreateCacheForArtifact = void 0;
+exports.SECOND_SPLIT_KEY = exports.FIRST_SPLIT_KEY = exports.getParentRecordKey = exports.onNextChange = exports.subscribe = exports.clearStore = exports.getStore = exports.ROOT_ID = exports.makeNetworkRequest = exports.setNetwork = exports.getOrCreateCacheForArtifact = void 0;
 const react_disposable_state_1 = require("@isograph/react-disposable-state");
 const PromiseWrapper_1 = require("./PromiseWrapper");
 const cache = {};
 function getOrCreateCache(index, factory) {
-    console.log("getting cache for", {
-        index,
-        cache: Object.keys(cache),
-        found: !!cache[index],
-    });
+    if (typeof window !== "undefined" && window.__LOG) {
+        console.log("getting cache for", {
+            index,
+            cache: Object.keys(cache),
+            found: !!cache[index],
+        });
+    }
     if (cache[index] == null) {
         cache[index] = new react_disposable_state_1.ParentCache(factory);
     }
@@ -49,12 +51,16 @@ function setNetwork(newNetwork) {
 }
 exports.setNetwork = setNetwork;
 function makeNetworkRequest(artifact, variables) {
-    console.log("make network request", artifact, variables);
+    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) => {
-        console.log("network response", artifact);
+        if (typeof window !== "undefined" && window.__LOG) {
+            console.log("network response", artifact);
+        }
         normalizeData(artifact.normalizationAst, networkResponse.data, variables, artifact.nestedRefetchQueries);
         return networkResponse.data;
     });
@@ -69,13 +75,27 @@ function makeNetworkRequest(artifact, variables) {
 }
 exports.makeNetworkRequest = makeNetworkRequest;
 exports.ROOT_ID = "__ROOT";
-exports.store = {
+let store = {
     __ROOT: {},
 };
+function getStore() {
+    return store;
+}
+exports.getStore = getStore;
+function clearStore() {
+    store = {
+        __ROOT: {},
+    };
+}
+exports.clearStore = clearStore;
 function normalizeData(normalizationAst, networkResponse, variables, nestedRefetchQueries) {
-    console.log("about to normalize", normalizationAst, networkResponse, variables);
-    normalizeDataIntoRecord(normalizationAst, networkResponse, exports.store.__ROOT, exports.ROOT_ID, variables, nestedRefetchQueries);
-    console.log("after normalization", { store: exports.store });
+    if (typeof window !== "undefined" && window.__LOG) {
+        console.log("about to normalize", normalizationAst, networkResponse, variables);
+    }
+    normalizeDataIntoRecord(normalizationAst, networkResponse, store.__ROOT, exports.ROOT_ID, variables, nestedRefetchQueries);
+    if (typeof window !== "undefined" && window.__LOG) {
+        console.log("after normalization", { store });
+    }
     callSubscriptions();
 }
 function subscribe(callback) {
@@ -159,8 +179,8 @@ function normalizeLinkedField(astNode, networkResponseParentRecord, targetParent
 function normalizeNetworkResponseObject(astNode, networkResponseData, targetParentRecordId, variables, index, nestedRefetchQueries) {
     var _a;
     const newStoreRecordId = getDataIdOfNetworkResponse(targetParentRecordId, networkResponseData, astNode, variables, index);
-    const newStoreRecord = (_a = exports.store[newStoreRecordId]) !== null && _a !== void 0 ? _a : {};
-    exports.store[newStoreRecordId] = newStoreRecord;
+    const newStoreRecord = (_a = store[newStoreRecordId]) !== null && _a !== void 0 ? _a : {};
+    store[newStoreRecordId] = newStoreRecord;
     normalizeDataIntoRecord(astNode.selections, networkResponseData, newStoreRecord, newStoreRecordId, variables, nestedRefetchQueries);
     return newStoreRecordId;
 }

package/dist/componentCache.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ReaderArtifact, RefetchQueryArtifactWrapper } from "./index";
+import { DataId } from "./cache";
+export declare function getOrCreateCachedComponent(root: DataId, componentName: string, stringifiedArgs: string, readerArtifact: ReaderArtifact<any, any, any>, variables: {
+    [key: string]: string;
+}, resolverRefetchQueries: RefetchQueryArtifactWrapper[]): import("react").FC<any>;

package/dist/componentCache.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOrCreateCachedComponent = void 0;
+const index_1 = require("./index");
+const cachedComponentsById = {};
+function getOrCreateCachedComponent(root, componentName, stringifiedArgs, readerArtifact, variables, resolverRefetchQueries) {
+    var _a, _b, _c;
+    cachedComponentsById[root] = (_a = cachedComponentsById[root]) !== null && _a !== void 0 ? _a : {};
+    const componentsByName = cachedComponentsById[root];
+    componentsByName[componentName] = (_b = componentsByName[componentName]) !== null && _b !== void 0 ? _b : {};
+    const byArgs = componentsByName[componentName];
+    byArgs[stringifiedArgs] =
+        (_c = byArgs[stringifiedArgs]) !== null && _c !== void 0 ? _c : (() => {
+            function Component(additionalRuntimeProps) {
+                const data = (0, index_1.readButDoNotEvaluate)({
+                    kind: "FragmentReference",
+                    readerArtifact: readerArtifact,
+                    root,
+                    variables,
+                    nestedRefetchQueries: resolverRefetchQueries,
+                });
+                return readerArtifact.resolver(Object.assign({ data }, additionalRuntimeProps));
+            }
+            Component.displayName = `${componentName} (id: ${root}) @component`;
+            return Component;
+        })();
+    return byArgs[stringifiedArgs];
+}
+exports.getOrCreateCachedComponent = getOrCreateCachedComponent;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { DataId, StoreRecord, Link } from "./cache";
-export { setNetwork, makeNetworkRequest, subscribe, DataId, Link, StoreRecord, } from "./cache";
+export { setNetwork, makeNetworkRequest, subscribe, DataId, Link, StoreRecord, clearStore, } from "./cache";
 export type IsographEntrypoint<TReadFromStore extends Object, TResolverProps, TResolverResult> = {
     kind: "Entrypoint";
     queryText: string;
@@ -103,7 +103,6 @@ export declare function defaultMissingFieldHandler(storeRecord: StoreRecord, roo
     [index: string]: any;
 } | null): Link | undefined;
 export declare function setMissingFieldHandler(handler: typeof defaultMissingFieldHandler): void;
-export declare function getRefReaderForName(name: string): any;
 export type IsographComponentProps<TDataType, TOtherProps = Object> = {
     data: TDataType;
 } & TOtherProps;

package/dist/index.js

@@ -1,16 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRefReaderForName = exports.setMissingFieldHandler = exports.defaultMissingFieldHandler = exports.readButDoNotEvaluate = exports.read = exports.useLazyReference = exports.iso = exports.isoFetch = exports.subscribe = exports.makeNetworkRequest = exports.setNetwork = void 0;
+exports.setMissingFieldHandler = exports.defaultMissingFieldHandler = exports.readButDoNotEvaluate = exports.read = exports.useLazyReference = exports.iso = exports.isoFetch = exports.clearStore = exports.subscribe = exports.makeNetworkRequest = exports.setNetwork = void 0;
 const cache_1 = require("./cache");
 const react_disposable_state_1 = require("@isograph/react-disposable-state");
-const react_1 = __importDefault(require("react"));
+const componentCache_1 = require("./componentCache");
 var cache_2 = require("./cache");
 Object.defineProperty(exports, "setNetwork", { enumerable: true, get: function () { return cache_2.setNetwork; } });
 Object.defineProperty(exports, "makeNetworkRequest", { enumerable: true, get: function () { return cache_2.makeNetworkRequest; } });
 Object.defineProperty(exports, "subscribe", { enumerable: true, get: function () { return cache_2.subscribe; } });
+Object.defineProperty(exports, "clearStore", { enumerable: true, get: function () { return cache_2.clearStore; } });
 function isoFetch(_text) {
     return void 0;
 }
@@ -33,9 +31,7 @@ function useLazyReference(entrypoint, variables) {
     const cache = (0, cache_1.getOrCreateCacheForArtifact)(entrypoint, variables);
     // TODO add comment explaining why we never use this value
     // @ts-ignore
-    const data = 
-    // @ts-ignore
-    (0, react_disposable_state_1.useLazyDisposableState)(cache).state;
+    const data = (0, react_disposable_state_1.useLazyDisposableState)(cache).state;
     return {
         queryReference: {
             kind: "FragmentReference",
@@ -48,7 +44,7 @@ function useLazyReference(entrypoint, variables) {
 }
 exports.useLazyReference = useLazyReference;
 function read(fragmentReference) {
-    var _a;
+    var _a, _b;
     const variant = fragmentReference.readerArtifact.variant;
     if (variant.kind === "Eager") {
         const data = readData(fragmentReference.readerArtifact.readerAst, fragmentReference.root, (_a = fragmentReference.variables) !== null && _a !== void 0 ? _a : {}, fragmentReference.nestedRefetchQueries);
@@ -60,18 +56,8 @@ function read(fragmentReference) {
         }
     }
     else if (variant.kind === "Component") {
-        return (additionalRuntimeProps) => {
-            // TODO also incorporate the typename
-            const RefReaderForName = getRefReaderForName(variant.componentName);
-            // TODO do not create a new reference on every render?
-            return (react_1.default.createElement(RefReaderForName, { reference: {
-                    kind: "FragmentReference",
-                    readerArtifact: fragmentReference.readerArtifact,
-                    root: fragmentReference.root,
-                    variables: fragmentReference.variables,
-                    nestedRefetchQueries: fragmentReference.nestedRefetchQueries,
-                }, additionalRuntimeProps: additionalRuntimeProps }));
-        };
+        // @ts-ignore
+        return (0, componentCache_1.getOrCreateCachedComponent)(fragmentReference.root, variant.componentName, "TODO", fragmentReference.readerArtifact, (_b = fragmentReference.variables) !== null && _b !== void 0 ? _b : {}, fragmentReference.nestedRefetchQueries);
     }
     // Why can't Typescript realize that this is unreachable??
     throw new Error("This is unreachable");
@@ -80,7 +66,9 @@ exports.read = read;
 function readButDoNotEvaluate(reference) {
     var _a;
     const response = readData(reference.readerArtifact.readerAst, reference.root, (_a = reference.variables) !== null && _a !== void 0 ? _a : {}, reference.nestedRefetchQueries);
-    console.log("done reading but not evaluating", { response });
+    if (typeof window !== "undefined" && window.__LOG) {
+        console.log("done reading", { response });
+    }
     if (response.kind === "MissingData") {
         throw (0, cache_1.onNextChange)();
     }
@@ -91,7 +79,7 @@ function readButDoNotEvaluate(reference) {
 exports.readButDoNotEvaluate = readButDoNotEvaluate;
 function readData(ast, root, variables, nestedRefetchQueries) {
     var _a, _b, _c, _d;
-    let storeRecord = cache_1.store[root];
+    let storeRecord = (0, cache_1.getStore)()[root];
     if (storeRecord === undefined) {
         return { kind: "MissingData", reason: "No record for root " + root };
     }
@@ -194,7 +182,9 @@ function readData(ast, root, variables, nestedRefetchQueries) {
                 const data = readData(field.readerArtifact.readerAst, root, variables, 
                 // Refetch fields just read the id, and don't need refetch query artifacts
                 []);
-                console.log("refetch field data", data, field);
+                if (typeof window !== "undefined" && window.__LOG) {
+                    console.log("refetch field data", data, field);
+                }
                 if (data.kind === "MissingData") {
                     return {
                         kind: "MissingData",
@@ -218,7 +208,9 @@ function readData(ast, root, variables, nestedRefetchQueries) {
                 const data = readData(field.readerArtifact.readerAst, root, variables, 
                 // Refetch fields just read the id, and don't need refetch query artifacts
                 []);
-                console.log("refetch field data", data, field);
+                if (typeof window !== "undefined" && window.__LOG) {
+                    console.log("refetch field data", data, field);
+                }
                 if (data.kind === "MissingData") {
                     return {
                         kind: "MissingData",
@@ -256,18 +248,7 @@ function readData(ast, root, variables, nestedRefetchQueries) {
                     }
                 }
                 else if (variant.kind === "Component") {
-                    target[field.alias] = (additionalRuntimeProps) => {
-                        // TODO also incorporate the typename
-                        const RefReaderForName = getRefReaderForName(variant.componentName);
-                        // TODO do not create a new reference on every render?
-                        return (react_1.default.createElement(RefReaderForName, { reference: {
-                                kind: "FragmentReference",
-                                readerArtifact: field.readerArtifact,
-                                root,
-                                variables,
-                                nestedRefetchQueries: resolverRefetchQueries,
-                            }, additionalRuntimeProps: additionalRuntimeProps }));
-                    };
+                    target[field.alias] = (0, componentCache_1.getOrCreateCachedComponent)(root, variant.componentName, "TODO", field.readerArtifact, variables, resolverRefetchQueries);
                 }
                 break;
             }
@@ -311,19 +292,6 @@ function assertLink(link) {
     }
     throw new Error("Invalid link");
 }
-const refReaders = {};
-function getRefReaderForName(name) {
-    if (refReaders[name] == null) {
-        function Component({ reference, additionalRuntimeProps, }) {
-            const data = readButDoNotEvaluate(reference);
-            return reference.readerArtifact.resolver(Object.assign({ data }, additionalRuntimeProps));
-        }
-        Component.displayName = `${name} @component`;
-        refReaders[name] = Component;
-    }
-    return refReaders[name];
-}
-exports.getRefReaderForName = getRefReaderForName;
 function filterVariables(variables, allowedVariables) {
     const result = {};
     for (const key of allowedVariables) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-1200105f",
+  "version": "0.0.0-main-ffab3426",
   "description": "Use Isograph with React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,8 +15,8 @@
     "prepack": "yarn run test && yarn run compile"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.0.0-main-1200105f",
-    "@isograph/react-disposable-state": "0.0.0-main-1200105f",
+    "@isograph/disposable-types": "0.0.0-main-ffab3426",
+    "@isograph/react-disposable-state": "0.0.0-main-ffab3426",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/src/cache.ts

@@ -14,17 +14,25 @@ import {
   RefetchQueryArtifactWrapper,
 } from "./index";
 
+declare global {
+  interface Window {
+    __LOG: boolean;
+  }
+}
+
 const cache: { [index: string]: ParentCache<any> } = {};
 
 function getOrCreateCache<T>(
   index: string,
   factory: Factory<T>
 ): ParentCache<T> {
-  console.log("getting cache for", {
-    index,
-    cache: Object.keys(cache),
-    found: !!cache[index],
-  });
+  if (typeof window !== "undefined" && window.__LOG) {
+    console.log("getting cache for", {
+      index,
+      cache: Object.keys(cache),
+      found: !!cache[index],
+    });
+  }
   if (cache[index] == null) {
     cache[index] = new ParentCache(factory);
   }
@@ -57,7 +65,7 @@ function stableCopy<T>(value: T): T {
 type IsoResolver = IsographEntrypoint<any, any, any>;
 
 export function getOrCreateCacheForArtifact<T>(
-  artifact: IsoResolver,
+  artifact: IsographEntrypoint<any, any, T>,
   variables: object
 ): ParentCache<PromiseWrapper<T>> {
   const cacheKey = artifact.queryText + JSON.stringify(stableCopy(variables));
@@ -77,14 +85,18 @@ export function makeNetworkRequest<T>(
   artifact: IsoResolver,
   variables: object
 ): ItemCleanupPair<PromiseWrapper<T>> {
-  console.log("make network request", artifact, variables);
+  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) => {
-      console.log("network response", artifact);
+      if (typeof window !== "undefined" && window.__LOG) {
+        console.log("network response", artifact);
+      }
       normalizeData(
         artifact.normalizationAst,
         networkResponse.data,
@@ -133,12 +145,20 @@ export type StoreRecord = {
 export type DataId = string;
 
 export const ROOT_ID: DataId & "__ROOT" = "__ROOT";
-export const store: {
+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 =
@@ -160,12 +180,14 @@ function normalizeData(
   variables: Object,
   nestedRefetchQueries: RefetchQueryArtifactWrapper[]
 ) {
-  console.log(
-    "about to normalize",
-    normalizationAst,
-    networkResponse,
-    variables
-  );
+  if (typeof window !== "undefined" && window.__LOG) {
+    console.log(
+      "about to normalize",
+      normalizationAst,
+      networkResponse,
+      variables
+    );
+  }
   normalizeDataIntoRecord(
     normalizationAst,
     networkResponse,
@@ -174,7 +196,9 @@ function normalizeData(
     variables as any,
     nestedRefetchQueries
   );
-  console.log("after normalization", { store });
+  if (typeof window !== "undefined" && window.__LOG) {
+    console.log("after normalization", { store });
+  }
   callSubscriptions();
 }
 

package/src/componentCache.ts

@@ -0,0 +1,48 @@
+import {
+  ReaderArtifact,
+  RefetchQueryArtifactWrapper,
+  readButDoNotEvaluate,
+} from "./index";
+import { DataId } from "./cache";
+
+type ComponentName = string;
+type StringifiedArgs = string;
+const cachedComponentsById: {
+  [key: DataId]: {
+    [key: ComponentName]: { [key: StringifiedArgs]: React.FC<any> };
+  };
+} = {};
+export function getOrCreateCachedComponent(
+  root: DataId,
+  componentName: string,
+  stringifiedArgs: string,
+  readerArtifact: ReaderArtifact<any, any, any>,
+  variables: { [key: string]: string },
+  resolverRefetchQueries: RefetchQueryArtifactWrapper[]
+) {
+  cachedComponentsById[root] = cachedComponentsById[root] ?? {};
+  const componentsByName = cachedComponentsById[root];
+  componentsByName[componentName] = componentsByName[componentName] ?? {};
+  const byArgs = componentsByName[componentName];
+  byArgs[stringifiedArgs] =
+    byArgs[stringifiedArgs] ??
+    (() => {
+      function Component(additionalRuntimeProps) {
+        const data = readButDoNotEvaluate({
+          kind: "FragmentReference",
+          readerArtifact: readerArtifact,
+          root,
+          variables,
+          nestedRefetchQueries: resolverRefetchQueries,
+        });
+
+        return readerArtifact.resolver({
+          data,
+          ...additionalRuntimeProps,
+        });
+      }
+      Component.displayName = `${componentName} (id: ${root}) @component`;
+      return Component;
+    })();
+  return byArgs[stringifiedArgs];
+}

package/src/index.tsx

@@ -6,12 +6,12 @@ import {
   ROOT_ID,
   getOrCreateCacheForArtifact,
   onNextChange,
-  store,
+  getStore,
   getParentRecordKey,
 } from "./cache";
 import { useLazyDisposableState } from "@isograph/react-disposable-state";
 import { type PromiseWrapper } from "./PromiseWrapper";
-import React from "react";
+import { getOrCreateCachedComponent } from "./componentCache";
 
 export {
   setNetwork,
@@ -20,6 +20,7 @@ export {
   DataId,
   Link,
   StoreRecord,
+  clearStore,
 } from "./cache";
 
 // This type should be treated as an opaque type.
@@ -205,12 +206,14 @@ export function useLazyReference<
   >;
 } {
   // Typechecking fails here... TODO investigate
-  const cache = getOrCreateCacheForArtifact(entrypoint, variables);
+  const cache = getOrCreateCacheForArtifact<TResolverResult>(
+    entrypoint,
+    variables
+  );
 
   // TODO add comment explaining why we never use this value
   // @ts-ignore
   const data =
-    // @ts-ignore
     useLazyDisposableState<PromiseWrapper<TResolverResult>>(cache).state;
 
   return {
@@ -249,23 +252,15 @@ export function read<
       return fragmentReference.readerArtifact.resolver(data.data);
     }
   } else if (variant.kind === "Component") {
-    return (additionalRuntimeProps: any) => {
-      // TODO also incorporate the typename
-      const RefReaderForName = getRefReaderForName(variant.componentName);
-      // TODO do not create a new reference on every render?
-      return (
-        <RefReaderForName
-          reference={{
-            kind: "FragmentReference",
-            readerArtifact: fragmentReference.readerArtifact,
-            root: fragmentReference.root,
-            variables: fragmentReference.variables,
-            nestedRefetchQueries: fragmentReference.nestedRefetchQueries,
-          }}
-          additionalRuntimeProps={additionalRuntimeProps}
-        />
-      );
-    };
+    // @ts-ignore
+    return getOrCreateCachedComponent(
+      fragmentReference.root,
+      variant.componentName,
+      "TODO",
+      fragmentReference.readerArtifact,
+      fragmentReference.variables ?? {},
+      fragmentReference.nestedRefetchQueries
+    );
   }
   // Why can't Typescript realize that this is unreachable??
   throw new Error("This is unreachable");
@@ -280,7 +275,9 @@ export function readButDoNotEvaluate<TReadFromStore extends Object>(
     reference.variables ?? {},
     reference.nestedRefetchQueries
   );
-  console.log("done reading but not evaluating", { response });
+  if (typeof window !== "undefined" && window.__LOG) {
+    console.log("done reading", { response });
+  }
   if (response.kind === "MissingData") {
     throw onNextChange();
   } else {
@@ -305,7 +302,7 @@ function readData<TReadFromStore>(
   variables: { [index: string]: string },
   nestedRefetchQueries: RefetchQueryArtifactWrapper[]
 ): ReadDataResult<TReadFromStore> {
-  let storeRecord = store[root];
+  let storeRecord = getStore()[root];
   if (storeRecord === undefined) {
     return { kind: "MissingData", reason: "No record for root " + root };
   }
@@ -431,7 +428,9 @@ function readData<TReadFromStore>(
           // Refetch fields just read the id, and don't need refetch query artifacts
           []
         );
-        console.log("refetch field data", data, field);
+        if (typeof window !== "undefined" && window.__LOG) {
+          console.log("refetch field data", data, field);
+        }
         if (data.kind === "MissingData") {
           return {
             kind: "MissingData",
@@ -467,7 +466,9 @@ function readData<TReadFromStore>(
           // Refetch fields just read the id, and don't need refetch query artifacts
           []
         );
-        console.log("refetch field data", data, field);
+        if (typeof window !== "undefined" && window.__LOG) {
+          console.log("refetch field data", data, field);
+        }
         if (data.kind === "MissingData") {
           return {
             kind: "MissingData",
@@ -515,23 +516,14 @@ function readData<TReadFromStore>(
             target[field.alias] = field.readerArtifact.resolver(data.data);
           }
         } else if (variant.kind === "Component") {
-          target[field.alias] = (additionalRuntimeProps: any) => {
-            // TODO also incorporate the typename
-            const RefReaderForName = getRefReaderForName(variant.componentName);
-            // TODO do not create a new reference on every render?
-            return (
-              <RefReaderForName
-                reference={{
-                  kind: "FragmentReference",
-                  readerArtifact: field.readerArtifact,
-                  root,
-                  variables,
-                  nestedRefetchQueries: resolverRefetchQueries,
-                }}
-                additionalRuntimeProps={additionalRuntimeProps}
-              />
-            );
-          };
+          target[field.alias] = getOrCreateCachedComponent(
+            root,
+            variant.componentName,
+            "TODO",
+            field.readerArtifact,
+            variables,
+            resolverRefetchQueries
+          );
         }
         break;
       }
@@ -605,29 +597,6 @@ function assertLink(link: DataTypeValue): Link | undefined | null {
   throw new Error("Invalid link");
 }
 
-const refReaders: { [index: string]: any } = {};
-export function getRefReaderForName(name: string) {
-  if (refReaders[name] == null) {
-    function Component({
-      reference,
-      additionalRuntimeProps,
-    }: {
-      reference: FragmentReference<any, any, any>;
-      additionalRuntimeProps: any;
-    }) {
-      const data = readButDoNotEvaluate(reference);
-
-      return reference.readerArtifact.resolver({
-        data,
-        ...additionalRuntimeProps,
-      });
-    }
-    Component.displayName = `${name} @component`;
-    refReaders[name] = Component;
-  }
-  return refReaders[name];
-}
-
 export type IsographComponentProps<TDataType, TOtherProps = Object> = {
   data: TDataType;
 } & TOtherProps;