@isograph/react 0.1.0 → 0.1.1

package/dist/EntrypointReader.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ExtractReadFromStore, IsographEntrypoint, type FragmentReference } from './index';
+export declare function EntrypointReader<TEntrypoint extends IsographEntrypoint<any, React.FC<any>>>(props: {
+    queryReference: FragmentReference<ExtractReadFromStore<TEntrypoint>, React.FC<any>>;
+    additionalProps?: any | void;
+}): ReturnType<React.FC<any>>;

package/dist/EntrypointReader.js

@@ -0,0 +1,33 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntrypointReader = void 0;
+const React = __importStar(require("react"));
+const index_1 = require("./index");
+function EntrypointReader(props) {
+    const Component = (0, index_1.useResult)(props.queryReference);
+    return React.createElement(Component, Object.assign({}, props.additionalProps));
+}
+exports.EntrypointReader = EntrypointReader;

package/dist/cache.d.ts

@@ -13,8 +13,8 @@ declare global {
  * results.
  */
 export declare function stableCopy<T>(value: T): T;
-type IsoResolver = IsographEntrypoint<any, any, any>;
-export declare function getOrCreateCacheForArtifact<T>(environment: IsographEnvironment, artifact: IsographEntrypoint<any, any, T>, variables: object): ParentCache<PromiseWrapper<T>>;
+type IsoResolver = IsographEntrypoint<any, any>;
+export declare function getOrCreateCacheForArtifact<T>(environment: IsographEnvironment, artifact: IsographEntrypoint<any, T>, variables: object): ParentCache<PromiseWrapper<T>>;
 export declare function makeNetworkRequest<T>(environment: IsographEnvironment, artifact: IsoResolver, variables: object): ItemCleanupPair<PromiseWrapper<T>>;
 export declare function subscribe(environment: IsographEnvironment, callback: () => void): () => void;
 export declare function onNextChange(environment: IsographEnvironment): Promise<void>;

package/dist/cache.js

@@ -53,7 +53,7 @@ function makeNetworkRequest(environment, artifact, variables) {
         .networkFunction(artifact.queryText, variables)
         .then((networkResponse) => {
         if (typeof window !== 'undefined' && window.__LOG) {
-            console.log('network response', artifact);
+            console.log('network response', artifact, artifact);
         }
         normalizeData(environment, artifact.normalizationAst, networkResponse.data, variables, artifact.nestedRefetchQueries);
         return networkResponse.data;

package/dist/componentCache.d.ts

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

package/dist/componentCache.js

@@ -21,7 +21,7 @@ function getOrCreateCachedComponent(environment, root, componentName, readerArti
                     variables,
                     nestedRefetchQueries: resolverRefetchQueries,
                 });
-                return readerArtifact.resolver(Object.assign({ data }, additionalRuntimeProps));
+                return readerArtifact.resolver(data, additionalRuntimeProps);
             }
             Component.displayName = `${componentName} (id: ${root}) @component`;
             return Component;

package/dist/index.d.ts

@@ -1,21 +1,25 @@
 import { DataId, IsographEnvironment, Link, StoreRecord } from './IsographEnvironment';
+export { type PromiseWrapper } from './PromiseWrapper';
 export { makeNetworkRequest, subscribe } from './cache';
 export { IsographEnvironmentContext, ROOT_ID, type DataId, type DataTypeValue, type IsographEnvironment, IsographEnvironmentProvider, type IsographEnvironmentProviderProps, type IsographNetworkFunction, type IsographStore, type Link, type StoreRecord, useIsographEnvironment, createIsographEnvironment, createIsographStore, } from './IsographEnvironment';
-export type IsographEntrypoint<TReadFromStore extends Object, TResolverProps, TResolverResult> = {
+export { useImperativeReference } from './useImperativeReference';
+export { EntrypointReader } from './EntrypointReader';
+export type IsographEntrypoint<TReadFromStore extends Object, TResolverResult> = {
     kind: 'Entrypoint';
     queryText: string;
     normalizationAst: NormalizationAst;
-    readerArtifact: ReaderArtifact<TReadFromStore, TResolverProps, TResolverResult>;
+    readerArtifact: ReaderArtifact<TReadFromStore, TResolverResult>;
     nestedRefetchQueries: RefetchQueryArtifactWrapper[];
 };
-export type ReaderArtifact<TReadFromStore extends Object, TResolverProps, TResolverResult> = {
+export type ReaderArtifact<TReadFromStore extends Object, TResolverResult> = {
     kind: 'ReaderArtifact';
     readerAst: ReaderAst<TReadFromStore>;
-    resolver: (data: TResolverProps) => TResolverResult;
+    resolver: (data: TReadFromStore, runtimeProps: any) => TResolverResult;
     variant: ReaderResolverVariant;
 };
 export type ReaderAstNode = ReaderScalarField | ReaderLinkedField | ReaderResolverField | ReaderRefetchField | ReaderMutationField;
 export type ReaderAst<TReadFromStore> = ReaderAstNode[];
+export type ExtractSecondParam<T extends (arg1: any, arg2: any) => any> = T extends (arg1: any, arg2: infer P) => any ? P : never;
 export type ReaderScalarField = {
     kind: 'Scalar';
     fieldName: string;
@@ -38,22 +42,21 @@ export type ReaderResolverVariant = {
 export type ReaderResolverField = {
     kind: 'Resolver';
     alias: string;
-    readerArtifact: ReaderArtifact<any, any, any>;
+    readerArtifact: ReaderArtifact<any, any>;
     arguments: Arguments | null;
     usedRefetchQueries: number[];
 };
 export type ReaderRefetchField = {
     kind: 'RefetchField';
     alias: string;
-    readerArtifact: ReaderArtifact<any, any, any>;
+    readerArtifact: ReaderArtifact<any, any>;
     refetchQuery: number;
 };
 export type ReaderMutationField = {
     kind: 'MutationField';
     alias: string;
-    readerArtifact: ReaderArtifact<any, any, any>;
+    readerArtifact: ReaderArtifact<any, any>;
     refetchQuery: number;
-    allowedVariables: string[];
 };
 export type NormalizationAstNode = NormalizationScalarField | NormalizationLinkedField;
 export type NormalizationAst = NormalizationAstNode[];
@@ -88,26 +91,25 @@ export type ArgumentValue = {
     value: any;
 };
 type Variable = any;
-export type FragmentReference<TReadFromStore extends Object, TResolverProps, TResolverResult> = {
+export type FragmentReference<TReadFromStore extends Object, TResolverResult> = {
     kind: 'FragmentReference';
-    readerArtifact: ReaderArtifact<TReadFromStore, TResolverProps, TResolverResult>;
+    readerArtifact: ReaderArtifact<TReadFromStore, TResolverResult>;
     root: DataId;
     variables: {
         [index: string]: Variable;
     } | null;
     nestedRefetchQueries: RefetchQueryArtifactWrapper[];
 };
-type ExtractReadFromStore<Type> = Type extends IsographEntrypoint<infer X, any, any> ? X : never;
-type ExtractResolverProps<Type> = Type extends IsographEntrypoint<any, infer X, any> ? X : never;
-type ExtractResolverResult<Type> = Type extends IsographEntrypoint<any, any, infer X> ? X : never;
+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 declare function useLazyReference<TEntrypoint>(entrypoint: TEntrypoint | ((_: any) => any), variables: {
     [key: string]: Variable;
 }): {
-    queryReference: FragmentReference<ExtractReadFromStore<TEntrypoint>, ExtractResolverProps<TEntrypoint>, ExtractResolverResult<TEntrypoint>>;
+    queryReference: FragmentReference<ExtractReadFromStore<TEntrypoint>, ExtractResolverResult<TEntrypoint>>;
 };
-export declare function useResult<TReadFromStore extends Object, TResolverProps, TResolverResult>(fragmentReference: FragmentReference<TReadFromStore, TResolverProps, TResolverResult>): TResolverResult;
-export declare function read<TReadFromStore extends Object, TResolverProps, TResolverResult>(environment: IsographEnvironment, fragmentReference: FragmentReference<TReadFromStore, TResolverProps, TResolverResult>): TResolverResult;
-export declare function readButDoNotEvaluate<TReadFromStore extends Object>(environment: IsographEnvironment, reference: FragmentReference<TReadFromStore, unknown, unknown>): TReadFromStore;
+export declare function useResult<TReadFromStore extends Object, TResolverResult>(fragmentReference: FragmentReference<TReadFromStore, TResolverResult>): TResolverResult;
+export declare function read<TReadFromStore extends Object, TResolverResult>(environment: IsographEnvironment, fragmentReference: FragmentReference<TReadFromStore, TResolverResult>): TResolverResult;
+export declare function readButDoNotEvaluate<TReadFromStore extends Object>(environment: IsographEnvironment, reference: FragmentReference<TReadFromStore, unknown>): TReadFromStore;
 export declare function defaultMissingFieldHandler(_storeRecord: StoreRecord, _root: DataId, fieldName: string, arguments_: {
     [index: string]: any;
 } | null, variables: {

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultMissingFieldHandler = exports.readButDoNotEvaluate = exports.read = exports.useResult = exports.useLazyReference = exports.createIsographStore = exports.createIsographEnvironment = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.ROOT_ID = exports.IsographEnvironmentContext = exports.subscribe = exports.makeNetworkRequest = void 0;
+exports.defaultMissingFieldHandler = exports.readButDoNotEvaluate = exports.read = exports.useResult = exports.useLazyReference = exports.EntrypointReader = exports.useImperativeReference = exports.createIsographStore = exports.createIsographEnvironment = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.ROOT_ID = exports.IsographEnvironmentContext = exports.subscribe = exports.makeNetworkRequest = void 0;
 const cache_1 = require("./cache");
 const react_disposable_state_1 = require("@isograph/react-disposable-state");
 const componentCache_1 = require("./componentCache");
@@ -16,6 +16,10 @@ Object.defineProperty(exports, "IsographEnvironmentProvider", { enumerable: true
 Object.defineProperty(exports, "useIsographEnvironment", { enumerable: true, get: function () { return IsographEnvironment_2.useIsographEnvironment; } });
 Object.defineProperty(exports, "createIsographEnvironment", { enumerable: true, get: function () { return IsographEnvironment_2.createIsographEnvironment; } });
 Object.defineProperty(exports, "createIsographStore", { enumerable: true, get: function () { return IsographEnvironment_2.createIsographStore; } });
+var useImperativeReference_1 = require("./useImperativeReference");
+Object.defineProperty(exports, "useImperativeReference", { enumerable: true, get: function () { return useImperativeReference_1.useImperativeReference; } });
+var EntrypointReader_1 = require("./EntrypointReader");
+Object.defineProperty(exports, "EntrypointReader", { enumerable: true, get: function () { return EntrypointReader_1.EntrypointReader; } });
 function assertIsEntrypoint(value) {
     if (typeof value === 'function')
         throw new Error('Not a string');
@@ -214,7 +218,6 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
                     const allowedVariables = refetchQuery.allowedVariables;
                     target[field.alias] = field.readerArtifact.resolver(environment, 
                     // resolvers for refetch fields take 3 args, and this is not reflected in types
-                    // @ts-expect-error
                     refetchQueryArtifact, Object.assign(Object.assign({}, data.data), filterVariables(variables, allowedVariables)));
                 }
                 break;
@@ -241,9 +244,9 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
                     const refetchQuery = nestedRefetchQueries[refetchQueryIndex];
                     const refetchQueryArtifact = refetchQuery.artifact;
                     const allowedVariables = refetchQuery.allowedVariables;
-                    target[field.alias] = field.readerArtifact.resolver(environment, 
+                    target[field.alias] = field.readerArtifact.resolver(environment, refetchQueryArtifact, 
                     // @ts-expect-error
-                    refetchQueryArtifact, data.data, filterVariables(variables, allowedVariables));
+                    data.data, filterVariables(variables, allowedVariables));
                 }
                 break;
             }
@@ -261,6 +264,7 @@ function readData(environment, ast, root, variables, nestedRefetchQueries) {
                         };
                     }
                     else {
+                        // @ts-expect-error
                         target[field.alias] = field.readerArtifact.resolver(data.data);
                     }
                 }

package/dist/useImperativeReference.d.ts

@@ -0,0 +1,8 @@
+import { UnassignedState } from '@isograph/react-disposable-state';
+import { type IsographEntrypoint, type FragmentReference, ExtractReadFromStore, ExtractResolverResult } from './index';
+export declare function useImperativeReference<TEntrypoint extends IsographEntrypoint<any, any>>(entrypoint: TEntrypoint): {
+    queryReference: FragmentReference<ExtractReadFromStore<TEntrypoint>, ExtractResolverResult<TEntrypoint>> | UnassignedState;
+    loadQueryReference: (variables: {
+        [index: string]: string;
+    }) => void;
+};

package/dist/useImperativeReference.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImperativeReference = void 0;
+const react_disposable_state_1 = require("@isograph/react-disposable-state");
+const index_1 = require("./index");
+function useImperativeReference(entrypoint) {
+    const { state, setState } = (0, react_disposable_state_1.useUpdatableDisposableState)();
+    const environment = (0, index_1.useIsographEnvironment)();
+    return {
+        queryReference: state,
+        loadQueryReference: (variables) => {
+            const [_networkRequest, disposeNetworkRequest] = (0, index_1.makeNetworkRequest)(environment, entrypoint, variables);
+            setState([
+                {
+                    kind: 'FragmentReference',
+                    readerArtifact: entrypoint.readerArtifact,
+                    root: index_1.ROOT_ID,
+                    variables,
+                    nestedRefetchQueries: entrypoint.nestedRefetchQueries,
+                },
+                () => {
+                    disposeNetworkRequest();
+                },
+            ]);
+        },
+    };
+}
+exports.useImperativeReference = useImperativeReference;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@isograph/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Use Isograph with React",
+  "homepage": "https://isograph.dev",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "author": "Isograph Labs",
@@ -15,7 +16,7 @@
     "prepack": "yarn run test && yarn run compile"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.1.0",
+    "@isograph/disposable-types": "0.1.1",
     "@isograph/react-disposable-state": "*",
     "react": "^18.2.0"
   },

package/src/EntrypointReader.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {
+  ExtractReadFromStore,
+  IsographEntrypoint,
+  type FragmentReference,
+  useResult,
+} from './index';
+
+export function EntrypointReader<
+  TEntrypoint extends IsographEntrypoint<any, React.FC<any>>,
+>(props: {
+  queryReference: FragmentReference<
+    ExtractReadFromStore<TEntrypoint>,
+    React.FC<any>
+  >;
+  additionalProps?: any | void;
+}): ReturnType<React.FC<any>> {
+  const Component = useResult(props.queryReference);
+  return <Component {...props.additionalProps} />;
+}

package/src/cache.tsx

@@ -70,11 +70,11 @@ export function stableCopy<T>(value: T): T {
   return stable as any;
 }
 
-type IsoResolver = IsographEntrypoint<any, any, any>;
+type IsoResolver = IsographEntrypoint<any, any>;
 
 export function getOrCreateCacheForArtifact<T>(
   environment: IsographEnvironment,
-  artifact: IsographEntrypoint<any, any, T>,
+  artifact: IsographEntrypoint<any, T>,
   variables: object,
 ): ParentCache<PromiseWrapper<T>> {
   const cacheKey = artifact.queryText + JSON.stringify(stableCopy(variables));
@@ -95,7 +95,7 @@ export function makeNetworkRequest<T>(
     .networkFunction(artifact.queryText, variables)
     .then((networkResponse) => {
       if (typeof window !== 'undefined' && window.__LOG) {
-        console.log('network response', artifact);
+        console.log('network response', artifact, artifact);
       }
       normalizeData(
         environment,

package/src/componentCache.ts

@@ -10,7 +10,7 @@ export function getOrCreateCachedComponent(
   environment: IsographEnvironment,
   root: DataId,
   componentName: string,
-  readerArtifact: ReaderArtifact<any, any, any>,
+  readerArtifact: ReaderArtifact<any, any>,
   variables: { [key: string]: string },
   resolverRefetchQueries: RefetchQueryArtifactWrapper[],
 ) {
@@ -32,10 +32,7 @@ export function getOrCreateCachedComponent(
           nestedRefetchQueries: resolverRefetchQueries,
         });
 
-        return readerArtifact.resolver({
-          data,
-          ...additionalRuntimeProps,
-        });
+        return readerArtifact.resolver(data, additionalRuntimeProps);
       }
       Component.displayName = `${componentName} (id: ${root}) @component`;
       return Component;

package/src/index.tsx

@@ -18,6 +18,7 @@ import {
 } from './IsographEnvironment';
 import { useEffect, useState } from 'react';
 
+export { type PromiseWrapper } from './PromiseWrapper';
 export { makeNetworkRequest, subscribe } from './cache';
 export {
   IsographEnvironmentContext,
@@ -35,32 +36,27 @@ export {
   createIsographEnvironment,
   createIsographStore,
 } from './IsographEnvironment';
+export { useImperativeReference } from './useImperativeReference';
+export { EntrypointReader } from './EntrypointReader';
 
 // This type should be treated as an opaque type.
 export type IsographEntrypoint<
   TReadFromStore extends Object,
-  TResolverProps,
   TResolverResult,
 > = {
   kind: 'Entrypoint';
   queryText: string;
   normalizationAst: NormalizationAst;
-  readerArtifact: ReaderArtifact<
-    TReadFromStore,
-    TResolverProps,
-    TResolverResult
-  >;
+  readerArtifact: ReaderArtifact<TReadFromStore, TResolverResult>;
   nestedRefetchQueries: RefetchQueryArtifactWrapper[];
 };
 
-export type ReaderArtifact<
-  TReadFromStore extends Object,
-  TResolverProps,
-  TResolverResult,
-> = {
+// TODO this should probably be at least three distinct types, for @component,
+// non-@component and refetch resolvers
+export type ReaderArtifact<TReadFromStore extends Object, TResolverResult> = {
   kind: 'ReaderArtifact';
   readerAst: ReaderAst<TReadFromStore>;
-  resolver: (data: TResolverProps) => TResolverResult;
+  resolver: (data: TReadFromStore, runtimeProps: any) => TResolverResult;
   variant: ReaderResolverVariant;
 };
 
@@ -74,6 +70,9 @@ export type ReaderAstNode =
 // @ts-ignore
 export type ReaderAst<TReadFromStore> = ReaderAstNode[];
 
+export type ExtractSecondParam<T extends (arg1: any, arg2: any) => any> =
+  T extends (arg1: any, arg2: infer P) => any ? P : never;
+
 export type ReaderScalarField = {
   kind: 'Scalar';
   fieldName: string;
@@ -97,7 +96,7 @@ export type ReaderResolverVariant =
 export type ReaderResolverField = {
   kind: 'Resolver';
   alias: string;
-  readerArtifact: ReaderArtifact<any, any, any>;
+  readerArtifact: ReaderArtifact<any, any>;
   arguments: Arguments | null;
   usedRefetchQueries: number[];
 };
@@ -106,7 +105,7 @@ export type ReaderRefetchField = {
   kind: 'RefetchField';
   alias: string;
   // TODO this bad modeling. A refetch field cannot have variant: "Component" (I think)
-  readerArtifact: ReaderArtifact<any, any, any>;
+  readerArtifact: ReaderArtifact<any, any>;
   refetchQuery: number;
 };
 
@@ -114,9 +113,8 @@ export type ReaderMutationField = {
   kind: 'MutationField';
   alias: string;
   // TODO this bad modeling. A mutation field cannot have variant: "Component" (I think)
-  readerArtifact: ReaderArtifact<any, any, any>;
+  readerArtifact: ReaderArtifact<any, any>;
   refetchQuery: number;
-  allowedVariables: string[];
 };
 
 export type NormalizationAstNode =
@@ -169,46 +167,31 @@ type Variable = any;
 
 export type FragmentReference<
   TReadFromStore extends Object,
-  TResolverProps,
   TResolverResult,
 > = {
   kind: 'FragmentReference';
-  readerArtifact: ReaderArtifact<
-    TReadFromStore,
-    TResolverProps,
-    TResolverResult
-  >;
+  readerArtifact: ReaderArtifact<TReadFromStore, TResolverResult>;
   root: DataId;
   variables: { [index: string]: Variable } | null;
   // TODO: We should instead have ReaderAst<TResolverProps>
   nestedRefetchQueries: RefetchQueryArtifactWrapper[];
 };
 
-function assertIsEntrypoint<
-  TReadFromStore extends Object,
-  TResolverProps,
-  TResolverResult,
->(
+function assertIsEntrypoint<TReadFromStore extends Object, TResolverResult>(
   value:
-    | IsographEntrypoint<TReadFromStore, TResolverProps, TResolverResult>
+    | IsographEntrypoint<TReadFromStore, TResolverResult>
     | ((_: 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,
-  TResolverProps,
-  TResolverResult
-> {
+): asserts value is IsographEntrypoint<TReadFromStore, TResolverResult> {
   if (typeof value === 'function') throw new Error('Not a string');
 }
 
-type ExtractReadFromStore<Type> =
-  Type extends IsographEntrypoint<infer X, any, any> ? X : never;
-type ExtractResolverProps<Type> =
-  Type extends IsographEntrypoint<any, infer X, any> ? X : never;
-type ExtractResolverResult<Type> =
-  Type extends IsographEntrypoint<any, any, infer X> ? X : never;
+export type ExtractReadFromStore<Type> =
+  Type extends IsographEntrypoint<infer X, any> ? X : never;
+export type ExtractResolverResult<Type> =
+  Type extends IsographEntrypoint<any, infer X> ? X : never;
 // Note: we cannot write TEntrypoint extends IsographEntrypoint<any, any, any>, or else
 // if we do not explicitly pass a type, the read out type will be any.
 // We cannot write TEntrypoint extends IsographEntrypoint<never, never, never>, or else
@@ -217,21 +200,19 @@ export function useLazyReference<TEntrypoint>(
   entrypoint:
     | TEntrypoint
     // Temporarily, we need to allow useLazyReference to take the result of calling
-    // iso`...`. At runtime, we confirm that the passed-in `iso` literal is actually
+    // iso(`...`). At runtime, we confirm that the passed-in `iso` literal is actually
     // an entrypoint.
     | ((_: any) => any),
   variables: { [key: string]: Variable },
 ): {
   queryReference: FragmentReference<
     ExtractReadFromStore<TEntrypoint>,
-    ExtractResolverProps<TEntrypoint>,
     ExtractResolverResult<TEntrypoint>
   >;
 } {
   const environment = useIsographEnvironment();
   assertIsEntrypoint<
     ExtractReadFromStore<TEntrypoint>,
-    ExtractResolverProps<TEntrypoint>,
     ExtractResolverResult<TEntrypoint>
   >(entrypoint);
   const cache = getOrCreateCacheForArtifact<ExtractResolverResult<TEntrypoint>>(
@@ -258,16 +239,8 @@ export function useLazyReference<TEntrypoint>(
   };
 }
 
-export function useResult<
-  TReadFromStore extends Object,
-  TResolverProps,
-  TResolverResult,
->(
-  fragmentReference: FragmentReference<
-    TReadFromStore,
-    TResolverProps,
-    TResolverResult
-  >,
+export function useResult<TReadFromStore extends Object, TResolverResult>(
+  fragmentReference: FragmentReference<TReadFromStore, TResolverResult>,
 ): TResolverResult {
   const environment = useIsographEnvironment();
 
@@ -281,17 +254,9 @@ export function useResult<
   return read(environment, fragmentReference);
 }
 
-export function read<
-  TReadFromStore extends Object,
-  TResolverProps,
-  TResolverResult,
->(
+export function read<TReadFromStore extends Object, TResolverResult>(
   environment: IsographEnvironment,
-  fragmentReference: FragmentReference<
-    TReadFromStore,
-    TResolverProps,
-    TResolverResult
-  >,
+  fragmentReference: FragmentReference<TReadFromStore, TResolverResult>,
 ): TResolverResult {
   const variant = fragmentReference.readerArtifact.variant;
   if (variant.kind === 'Eager') {
@@ -325,7 +290,7 @@ export function read<
 
 export function readButDoNotEvaluate<TReadFromStore extends Object>(
   environment: IsographEnvironment,
-  reference: FragmentReference<TReadFromStore, unknown, unknown>,
+  reference: FragmentReference<TReadFromStore, unknown>,
 ): TReadFromStore {
   const response = readData(
     environment,
@@ -514,8 +479,8 @@ function readData<TReadFromStore>(
           target[field.alias] = field.readerArtifact.resolver(
             environment,
             // resolvers for refetch fields take 3 args, and this is not reflected in types
-            // @ts-expect-error
             refetchQueryArtifact,
+            // @ts-expect-error
             {
               ...data.data,
               // TODO continue from here
@@ -555,8 +520,8 @@ function readData<TReadFromStore>(
 
           target[field.alias] = field.readerArtifact.resolver(
             environment,
-            // @ts-expect-error
             refetchQueryArtifact,
+            // @ts-expect-error
             data.data,
             filterVariables(variables, allowedVariables),
           );
@@ -585,6 +550,7 @@ function readData<TReadFromStore>(
               nestedReason: data,
             };
           } else {
+            // @ts-expect-error
             target[field.alias] = field.readerArtifact.resolver(data.data);
           }
         } else if (variant.kind === 'Component') {

package/src/useImperativeReference.ts

@@ -0,0 +1,58 @@
+import {
+  UnassignedState,
+  useUpdatableDisposableState,
+} from '@isograph/react-disposable-state';
+import {
+  type IsographEntrypoint,
+  type FragmentReference,
+  ExtractReadFromStore,
+  ExtractResolverResult,
+  ROOT_ID,
+  useIsographEnvironment,
+  makeNetworkRequest,
+} from './index';
+
+export function useImperativeReference<
+  TEntrypoint extends IsographEntrypoint<any, any>,
+>(
+  entrypoint: TEntrypoint,
+): {
+  queryReference:
+    | FragmentReference<
+        ExtractReadFromStore<TEntrypoint>,
+        ExtractResolverResult<TEntrypoint>
+      >
+    | UnassignedState;
+  loadQueryReference: (variables: { [index: string]: string }) => void;
+} {
+  const { state, setState } =
+    useUpdatableDisposableState<
+      FragmentReference<
+        ExtractReadFromStore<TEntrypoint>,
+        ExtractResolverResult<TEntrypoint>
+      >
+    >();
+  const environment = useIsographEnvironment();
+  return {
+    queryReference: state,
+    loadQueryReference: (variables: { [index: string]: string }) => {
+      const [_networkRequest, disposeNetworkRequest] = makeNetworkRequest(
+        environment,
+        entrypoint,
+        variables,
+      );
+      setState([
+        {
+          kind: 'FragmentReference',
+          readerArtifact: entrypoint.readerArtifact,
+          root: ROOT_ID,
+          variables,
+          nestedRefetchQueries: entrypoint.nestedRefetchQueries,
+        },
+        () => {
+          disposeNetworkRequest();
+        },
+      ]);
+    },
+  };
+}