@isograph/react 0.0.0-main-3cb9ae33 → 0.0.0-main-3247c783

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

@@ -1,7 +1,4 @@
-import { ItemCleanupPair } from '@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>;
+import { LoadableField } from '../reader';
+export declare function useClientSideDefer<TResult>(loadableField: LoadableField<void, TResult>): FragmentReference<any, TResult>;
+export declare function useClientSideDefer<TArgs, TResult>(loadableField: LoadableField<TArgs, TResult>, args: TArgs): FragmentReference<any, TResult>;

package/dist/loadable-hooks/useClientSideDefer.js

@@ -5,7 +5,9 @@ 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]) {
+function useClientSideDefer(loadableField, args) {
+    // @ts-expect-error args is missing iff it has the type void
+    const [id, loader] = loadableField(args);
     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;

package/dist/read.js

@@ -155,8 +155,8 @@ function readData(environment, ast, root, variables, nestedRefetchQueries, mutab
                     const allowedVariables = refetchQuery.allowedVariables;
                     // Second, we allow the user to call the resolver, which will ultimately
                     // use the resolver reader AST to get the resolver parameters.
-                    target[field.alias] = [
-                        // DataId
+                    target[field.alias] = (_args) => [
+                        // Stable id
                         root + '__' + field.name,
                         // Fetcher
                         field.refetchReaderArtifact.resolver(environment, refetchQueryArtifact, data.data, filterVariables(variables, allowedVariables), root, field.resolverReaderArtifact, field.usedRefetchQueries.map((id) => nestedRefetchQueries[id])),

package/dist/reader.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import { Factory } from '@isograph/disposable-types';
 import { FragmentReference } from './FragmentReference';
 import { ComponentOrFieldName, DataId, IsographEnvironment } from './IsographEnvironment';
 import { RefetchQueryNormalizationArtifact, RefetchQueryNormalizationArtifactWrapper } from './entrypoint';
@@ -57,7 +57,6 @@ export type ReaderImperativelyLoadedField = {
     readonly name: string;
     readonly usedRefetchQueries: number[];
 };
-export type LoadableField<T> = [
-    string,
-    () => ItemCleanupPair<FragmentReference<any, T>>
-];
+type StableId = string;
+export type LoadableField<TArgs, TResult> = (args: TArgs) => [StableId, Factory<FragmentReference<any, TResult>>];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-3cb9ae33",
+  "version": "0.0.0-main-3247c783",
   "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-3cb9ae33",
-    "@isograph/react-disposable-state": "0.0.0-main-3cb9ae33",
+    "@isograph/disposable-types": "0.0.0-main-3247c783",
+    "@isograph/react-disposable-state": "0.0.0-main-3247c783",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/src/loadable-hooks/useClientSideDefer.ts

@@ -1,15 +1,25 @@
-import { ItemCleanupPair } from '@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';
+import { LoadableField } from '../reader';
+
+export function useClientSideDefer<TResult>(
+  loadableField: LoadableField<void, TResult>,
+): FragmentReference<any, TResult>;
+
+export function useClientSideDefer<TArgs, TResult>(
+  loadableField: LoadableField<TArgs, TResult>,
+  args: TArgs,
+): FragmentReference<any, TResult>;
 
 // TODO allow the user to pass props somehow
-export function useClientSideDefer<TValue>([id, loader]: [
-  DataId,
-  () => ItemCleanupPair<FragmentReference<any, TValue>>,
-]): FragmentReference<any, TValue> {
+export function useClientSideDefer<TArgs, TResult>(
+  loadableField: LoadableField<TArgs, TResult>,
+  args?: TArgs,
+): FragmentReference<any, TResult> {
+  // @ts-expect-error args is missing iff it has the type void
+  const [id, loader] = loadableField(args);
   const environment = useIsographEnvironment();
   const cache = getOrCreateCache(environment, id, loader);
 

package/src/read.ts

@@ -222,8 +222,8 @@ function readData<TReadFromStore>(
 
           // Second, we allow the user to call the resolver, which will ultimately
           // use the resolver reader AST to get the resolver parameters.
-          target[field.alias] = [
-            // DataId
+          target[field.alias] = (_args: void) => [
+            // Stable id
             root + '__' + field.name,
             // Fetcher
             field.refetchReaderArtifact.resolver(

package/src/reader.ts

@@ -1,4 +1,4 @@
-import { ItemCleanupPair } from '@isograph/disposable-types';
+import { Factory } from '@isograph/disposable-types';
 import { FragmentReference } from './FragmentReference';
 import {
   ComponentOrFieldName,
@@ -119,7 +119,16 @@ export type ReaderImperativelyLoadedField = {
   readonly usedRefetchQueries: number[];
 };
 
-export type LoadableField<T> = [
-  string,
-  () => ItemCleanupPair<FragmentReference<any, T>>,
-];
+type StableId = string;
+/// Why is LoadableField the way it is? Let's work backwards.
+///
+/// We ultimately need a stable id (for deduplication) and a way to produce a
+/// FragmentReference (i.e. a Factory). However, this stable id depends on the
+/// arguments that we pass in, hence we get the current form of LoadableField.
+///
+/// Passing TArgs to the LoadableField should be cheap and do no "actual" work,
+/// except to stringify the args or whatnot. Calling the factory can be
+/// expensive. For example, doing so will probably trigger a network request.
+export type LoadableField<TArgs, TResult> = (
+  args: TArgs,
+) => [StableId, Factory<FragmentReference<any, TResult>>];