@isograph/react 0.0.0-main-b5f89834 → 0.0.0-main-cee47c78

package/dist/cache.d.ts

@@ -1,4 +1,4 @@
-import { ItemCleanupPair, ParentCache } from '@isograph/react-disposable-state';
+import { Factory, ItemCleanupPair, ParentCache } from '@isograph/react-disposable-state';
 import { PromiseWrapper } from './PromiseWrapper';
 import { DataId, type IsographEnvironment } from './IsographEnvironment';
 import { IsographEntrypoint, NormalizationAst, NormalizationLinkedField, NormalizationScalarField, RefetchQueryNormalizationArtifact, RefetchQueryNormalizationArtifactWrapper } from './entrypoint';
@@ -10,6 +10,7 @@ declare global {
         __LOG: boolean;
     }
 }
+export declare function getOrCreateCache<T>(environment: IsographEnvironment, index: string, factory: Factory<T>): ParentCache<T>;
 /**
  * Creates a copy of the provided value, ensuring any nested objects have their
  * keys sorted such that equivalent values would have identical JSON.stringify

package/dist/cache.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SECOND_SPLIT_KEY = exports.FIRST_SPLIT_KEY = exports.getParentRecordKey = exports.onNextChange = exports.subscribe = exports.subscribeToAnyChange = exports.normalizeData = exports.makeNetworkRequest = exports.getOrCreateCacheForArtifact = exports.stableCopy = void 0;
+exports.SECOND_SPLIT_KEY = exports.FIRST_SPLIT_KEY = exports.getParentRecordKey = exports.onNextChange = exports.subscribe = exports.subscribeToAnyChange = exports.normalizeData = exports.makeNetworkRequest = exports.getOrCreateCacheForArtifact = exports.stableCopy = exports.getOrCreateCache = void 0;
 const react_disposable_state_1 = require("@isograph/react-disposable-state");
 const PromiseWrapper_1 = require("./PromiseWrapper");
 const IsographEnvironment_1 = require("./IsographEnvironment");
@@ -21,6 +21,7 @@ function getOrCreateCache(environment, index, factory) {
     }
     return environment.suspenseCache[index];
 }
+exports.getOrCreateCache = getOrCreateCache;
 /**
  * Creates a copy of the provided value, ensuring any nested objects have their
  * keys sorted such that equivalent values would have identical JSON.stringify

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { ROOT_ID, type DataId, type DataTypeValue, type IsographEnvironment, typ
 export { IsographEnvironmentProvider, useIsographEnvironment, type IsographEnvironmentProviderProps, } from './IsographEnvironmentProvider';
 export { useImperativeReference } from './useImperativeReference';
 export { EntrypointReader } from './EntrypointReader';
-export { EagerReaderArtifact, ComponentReaderArtifact, MutationReaderArtifact, RefetchReaderArtifact, ReaderAst, ReaderAstNode, ReaderLinkedField, ReaderResolverField, ReaderResolverVariant, ReaderScalarField, } from './reader';
+export { EagerReaderArtifact, ComponentReaderArtifact, MutationReaderArtifact, RefetchReaderArtifact, ReaderAst, ReaderAstNode, ReaderLinkedField, ReaderResolverField, ReaderScalarField, TopLevelReaderArtifact, LoadableField, } from './reader';
 export { NormalizationAst, NormalizationAstNode, NormalizationLinkedField, NormalizationScalarField, IsographEntrypoint, assertIsEntrypoint, RefetchQueryNormalizationArtifact, RefetchQueryNormalizationArtifactWrapper, } from './entrypoint';
 export { readButDoNotEvaluate } from './read';
 export { useResult } from './useResult';
@@ -13,3 +13,4 @@ export { type FragmentReference } from './FragmentReference';
 export { useLazyReference } from './useLazyReference';
 export { ExtractSecondParam, Argument, ArgumentName, ArgumentValue, Arguments, } from './util';
 export { useRerenderOnChange } from './useRerenderOnChange';
+export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRerenderOnChange = exports.useLazyReference = exports.useResult = exports.readButDoNotEvaluate = exports.assertIsEntrypoint = exports.EntrypointReader = exports.useImperativeReference = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = exports.normalizeData = exports.subscribe = exports.makeNetworkRequest = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
+exports.useClientSideDefer = exports.useRerenderOnChange = exports.useLazyReference = exports.useResult = exports.readButDoNotEvaluate = exports.assertIsEntrypoint = exports.EntrypointReader = exports.useImperativeReference = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = exports.normalizeData = exports.subscribe = exports.makeNetworkRequest = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
 var garbageCollection_1 = require("./garbageCollection");
 Object.defineProperty(exports, "retainQuery", { enumerable: true, get: function () { return garbageCollection_1.retainQuery; } });
 Object.defineProperty(exports, "unretainQuery", { enumerable: true, get: function () { return garbageCollection_1.unretainQuery; } });
@@ -31,3 +31,5 @@ var useLazyReference_1 = require("./useLazyReference");
 Object.defineProperty(exports, "useLazyReference", { enumerable: true, get: function () { return useLazyReference_1.useLazyReference; } });
 var useRerenderOnChange_1 = require("./useRerenderOnChange");
 Object.defineProperty(exports, "useRerenderOnChange", { enumerable: true, get: function () { return useRerenderOnChange_1.useRerenderOnChange; } });
+var useClientSideDefer_1 = require("./loadable-hooks/useClientSideDefer");
+Object.defineProperty(exports, "useClientSideDefer", { enumerable: true, get: function () { return useClientSideDefer_1.useClientSideDefer; } });

package/dist/loadable-hooks/useClientSideDefer.d.ts

@@ -0,0 +1,7 @@
+import { ItemCleanupPair } from '@isograph/isograph-disposable-types';
+import { FragmentReference } from '../FragmentReference';
+import { DataId } from '../IsographEnvironment';
+export declare function useClientSideDefer<TValue>([id, loader]: [
+    DataId,
+    () => ItemCleanupPair<FragmentReference<any, TValue>>
+]): FragmentReference<any, TValue>;

package/dist/loadable-hooks/useClientSideDefer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClientSideDefer = void 0;
+const IsographEnvironmentProvider_1 = require("../IsographEnvironmentProvider");
+const cache_1 = require("../cache");
+const react_disposable_state_1 = require("@isograph/react-disposable-state");
+// TODO allow the user to pass props somehow
+function useClientSideDefer([id, loader]) {
+    const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
+    const cache = (0, cache_1.getOrCreateCache)(environment, id, loader);
+    const fragmentReference = (0, react_disposable_state_1.useLazyDisposableState)(cache).state;
+    return fragmentReference;
+}
+exports.useClientSideDefer = useClientSideDefer;

package/dist/read.js

@@ -133,7 +133,7 @@ function readData(environment, ast, root, variables, nestedRefetchQueries, mutab
                 break;
             }
             case 'ImperativelyLoadedField': {
-                const data = readData(environment, field.readerArtifact.readerAst, root, variables, 
+                const data = readData(environment, field.refetchReaderArtifact.readerAst, root, variables, 
                 // Refetch fields just read the id, and don't need refetch query artifacts
                 [], mutableEncounteredRecords);
                 if (data.kind === 'MissingData') {
@@ -151,7 +151,12 @@ function readData(environment, ast, root, variables, nestedRefetchQueries, mutab
                     const refetchQuery = nestedRefetchQueries[refetchQueryIndex];
                     const refetchQueryArtifact = refetchQuery.artifact;
                     const allowedVariables = refetchQuery.allowedVariables;
-                    target[field.alias] = field.readerArtifact.resolver(environment, refetchQueryArtifact, data.data, filterVariables(variables, allowedVariables));
+                    target[field.alias] = [
+                        // DataId
+                        root + '__' + field.name,
+                        // Fetcher
+                        field.refetchReaderArtifact.resolver(environment, refetchQueryArtifact, data.data, filterVariables(variables, allowedVariables), root, field.resolverReaderArtifact),
+                    ];
                 }
                 break;
             }

package/dist/reader.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { ComponentOrFieldName, IsographEnvironment } from './IsographEnvironment';
+import { FragmentReference } from './FragmentReference';
+import { ComponentOrFieldName, DataId, IsographEnvironment } from './IsographEnvironment';
 import { RefetchQueryNormalizationArtifact } from './entrypoint';
 import { Arguments } from './util';
 export type TopLevelReaderArtifact<TReadFromStore extends Object, TClientFieldValue, TComponentProps extends Record<string, never>> = EagerReaderArtifact<TReadFromStore, TClientFieldValue> | ComponentReaderArtifact<TReadFromStore, TComponentProps>;
@@ -17,12 +18,12 @@ export type ComponentReaderArtifact<TReadFromStore extends Object, TComponentPro
 export type RefetchReaderArtifact = {
     readonly kind: 'RefetchReaderArtifact';
     readonly readerAst: ReaderAst<unknown>;
-    readonly resolver: (environment: IsographEnvironment, artifact: RefetchQueryNormalizationArtifact, variables: any) => () => void;
+    readonly resolver: (environment: IsographEnvironment, artifact: RefetchQueryNormalizationArtifact, variables: any, filteredVariables: any, rootId: DataId, readerArtifact: TopLevelReaderArtifact<any, any, any> | null) => () => void;
 };
 export type MutationReaderArtifact<TReadFromStore extends Object> = {
     readonly kind: 'MutationReaderArtifact';
     readonly readerAst: ReaderAst<unknown>;
-    readonly resolver: (environment: IsographEnvironment, entrypoint: RefetchQueryNormalizationArtifact, readOutData: TReadFromStore, filteredVariables: any) => (mutationParams: any) => void;
+    readonly resolver: (environment: IsographEnvironment, entrypoint: RefetchQueryNormalizationArtifact, readOutData: TReadFromStore, filteredVariables: any, rootId: DataId, readerArtifact: TopLevelReaderArtifact<any, any, any> | null) => (mutationParams: any) => void;
 };
 export type ReaderAstNode = ReaderScalarField | ReaderLinkedField | ReaderResolverField | ReaderImperativelyLoadedField;
 export type ReaderAst<TReadFromStore> = ReadonlyArray<ReaderAstNode>;
@@ -39,12 +40,6 @@ export type ReaderLinkedField = {
     readonly selections: ReaderAst<unknown>;
     readonly arguments: Arguments | null;
 };
-export type ReaderResolverVariant = {
-    readonly kind: 'Eager';
-} | {
-    readonly kind: 'Component';
-    readonly componentName: string;
-};
 export type ReaderResolverField = {
     readonly kind: 'Resolver';
     readonly alias: string;
@@ -55,6 +50,9 @@ export type ReaderResolverField = {
 export type ReaderImperativelyLoadedField = {
     readonly kind: 'ImperativelyLoadedField';
     readonly alias: string;
-    readonly readerArtifact: MutationReaderArtifact<any> | RefetchReaderArtifact;
+    readonly refetchReaderArtifact: MutationReaderArtifact<any> | RefetchReaderArtifact;
+    readonly resolverReaderArtifact: TopLevelReaderArtifact<any, any, any> | null;
     readonly refetchQuery: number;
+    readonly name: string;
 };
+export type LoadableField<T> = [string, () => FragmentReference<any, T>];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-b5f89834",
+  "version": "0.0.0-main-cee47c78",
   "description": "Use Isograph with React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -16,8 +16,8 @@
     "prepack": "yarn run test && yarn run compile"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.0.0-main-b5f89834",
-    "@isograph/react-disposable-state": "0.0.0-main-b5f89834",
+    "@isograph/disposable-types": "0.0.0-main-cee47c78",
+    "@isograph/react-disposable-state": "0.0.0-main-cee47c78",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/src/cache.ts

@@ -42,7 +42,7 @@ declare global {
   }
 }
 
-function getOrCreateCache<T>(
+export function getOrCreateCache<T>(
   environment: IsographEnvironment,
   index: string,
   factory: Factory<T>,

package/src/index.ts

@@ -35,8 +35,9 @@ export {
   ReaderAstNode,
   ReaderLinkedField,
   ReaderResolverField,
-  ReaderResolverVariant,
   ReaderScalarField,
+  TopLevelReaderArtifact,
+  LoadableField,
 } from './reader';
 export {
   NormalizationAst,
@@ -60,3 +61,4 @@ export {
   Arguments,
 } from './util';
 export { useRerenderOnChange } from './useRerenderOnChange';
+export { useClientSideDefer } from './loadable-hooks/useClientSideDefer';

package/src/loadable-hooks/useClientSideDefer.ts

@@ -0,0 +1,19 @@
+import { ItemCleanupPair } from '@isograph/isograph-disposable-types';
+import { FragmentReference } from '../FragmentReference';
+import { useIsographEnvironment } from '../IsographEnvironmentProvider';
+import { getOrCreateCache } from '../cache';
+import { useLazyDisposableState } from '@isograph/react-disposable-state';
+import { DataId } from '../IsographEnvironment';
+
+// TODO allow the user to pass props somehow
+export function useClientSideDefer<TValue>([id, loader]: [
+  DataId,
+  () => ItemCleanupPair<FragmentReference<any, TValue>>,
+]) {
+  const environment = useIsographEnvironment();
+  const cache = getOrCreateCache(environment, id, loader);
+
+  const fragmentReference = useLazyDisposableState(cache).state;
+
+  return fragmentReference;
+}

package/src/read.ts

@@ -196,7 +196,7 @@ function readData<TReadFromStore>(
       case 'ImperativelyLoadedField': {
         const data = readData(
           environment,
-          field.readerArtifact.readerAst,
+          field.refetchReaderArtifact.readerAst,
           root,
           variables,
           // Refetch fields just read the id, and don't need refetch query artifacts
@@ -218,12 +218,19 @@ function readData<TReadFromStore>(
           const refetchQueryArtifact = refetchQuery.artifact;
           const allowedVariables = refetchQuery.allowedVariables;
 
-          target[field.alias] = field.readerArtifact.resolver(
-            environment,
-            refetchQueryArtifact,
-            data.data,
-            filterVariables(variables, allowedVariables),
-          );
+          target[field.alias] = [
+            // DataId
+            root + '__' + field.name,
+            // Fetcher
+            field.refetchReaderArtifact.resolver(
+              environment,
+              refetchQueryArtifact,
+              data.data,
+              filterVariables(variables, allowedVariables),
+              root,
+              field.resolverReaderArtifact,
+            ),
+          ];
         }
         break;
       }

package/src/reader.ts

@@ -1,5 +1,7 @@
+import { FragmentReference } from './FragmentReference';
 import {
   ComponentOrFieldName,
+  DataId,
   IsographEnvironment,
 } from './IsographEnvironment';
 import { RefetchQueryNormalizationArtifact } from './entrypoint';
@@ -43,6 +45,11 @@ export type RefetchReaderArtifact = {
     artifact: RefetchQueryNormalizationArtifact,
     // TODO type this better
     variables: any,
+    // TODO type this better
+    filteredVariables: any,
+    rootId: DataId,
+    readerArtifact: TopLevelReaderArtifact<any, any, any> | null,
+    // TODO type this better
   ) => () => void;
 };
 
@@ -56,6 +63,8 @@ export type MutationReaderArtifact<TReadFromStore extends Object> = {
     readOutData: TReadFromStore,
     // TODO type this better
     filteredVariables: any,
+    rootId: DataId,
+    readerArtifact: TopLevelReaderArtifact<any, any, any> | null,
     // TODO type this better
   ) => (mutationParams: any) => void;
 };
@@ -83,11 +92,6 @@ export type ReaderLinkedField = {
   readonly arguments: Arguments | null;
 };
 
-export type ReaderResolverVariant =
-  | { readonly kind: 'Eager' }
-  // componentName is type + field concatenated
-  | { readonly kind: 'Component'; readonly componentName: string };
-
 export type ReaderResolverField = {
   readonly kind: 'Resolver';
   readonly alias: string;
@@ -100,6 +104,12 @@ export type ReaderResolverField = {
 export type ReaderImperativelyLoadedField = {
   readonly kind: 'ImperativelyLoadedField';
   readonly alias: string;
-  readonly readerArtifact: MutationReaderArtifact<any> | RefetchReaderArtifact;
+  readonly refetchReaderArtifact:
+    | MutationReaderArtifact<any>
+    | RefetchReaderArtifact;
+  readonly resolverReaderArtifact: TopLevelReaderArtifact<any, any, any> | null;
   readonly refetchQuery: number;
+  readonly name: string;
 };
+
+export type LoadableField<T> = [string, () => FragmentReference<any, T>];

package/src/tests/__isograph/Query/meName/resolver_reader.ts

@@ -1,4 +1,4 @@
-import type {EagerReaderArtifact, ReaderAst, RefetchQueryNormalizationArtifact} from '@isograph/react';
+import type { EagerReaderArtifact, ReaderAst } from '@isograph/react';
 import { Query__meName__param } from './param_type';
 import { Query__meName__output_type } from './output_type';
 import { meNameField as resolver } from '../../../garbageCollection.test';

package/src/tests/__isograph/Query/meNameSuccessor/resolver_reader.ts

@@ -1,4 +1,4 @@
-import type {EagerReaderArtifact, ReaderAst, RefetchQueryNormalizationArtifact} from '@isograph/react';
+import type { EagerReaderArtifact, ReaderAst } from '@isograph/react';
 import { Query__meNameSuccessor__param } from './param_type';
 import { Query__meNameSuccessor__output_type } from './output_type';
 import { meNameField as resolver } from '../../../meNameSuccessor';

package/src/tests/__isograph/Query/nodeField/resolver_reader.ts

@@ -1,4 +1,4 @@
-import type {EagerReaderArtifact, ReaderAst, RefetchQueryNormalizationArtifact} from '@isograph/react';
+import type { EagerReaderArtifact, ReaderAst } from '@isograph/react';
 import { Query__nodeField__param } from './param_type';
 import { Query__nodeField__output_type } from './output_type';
 import { nodeField as resolver } from '../../../nodeQuery';