@isograph/react 0.0.0-main-fbe23de7 → 0.0.0-main-c6a74674

package/dist/core/FragmentReference.d.ts

@@ -14,3 +14,4 @@ export type FragmentReference<TReadFromStore extends Object, TClientFieldValue>
     readonly nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[];
     readonly networkRequest: PromiseWrapper<void, any>;
 };
+export declare function stableIdForFragmentReference(fragmentReference: FragmentReference<any, any>): string;

package/dist/core/FragmentReference.js

@@ -1,2 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.stableIdForFragmentReference = void 0;
+function stableIdForFragmentReference(fragmentReference) {
+    var _a;
+    return `${fragmentReference.root}/TODO_FRAGMENT_NAME/${serializeVariables((_a = fragmentReference.variables) !== null && _a !== void 0 ? _a : {})}`;
+}
+exports.stableIdForFragmentReference = stableIdForFragmentReference;
+function serializeVariables(variables) {
+    let s = '';
+    const keys = Object.keys(variables);
+    keys.sort();
+    for (const key of keys) {
+        s += `${key}:${variables[key]},`;
+    }
+    return s;
+}

package/dist/core/read.js

@@ -228,31 +228,37 @@ function readData(environment, ast, root, variables, nestedRefetchQueries, netwo
                     };
                 }
                 else {
-                    target[field.alias] = (args) => [
-                        // Stable id
-                        root + '__' + field.name,
-                        // Fetcher
-                        () => {
-                            // TODO we should use the reader AST for this
-                            const includeReadOutData = (variables, readOutData) => {
-                                variables.id = readOutData.id;
-                                return variables;
-                            };
-                            const localVariables = includeReadOutData(args !== null && args !== void 0 ? args : {}, refetchReaderParams.data);
-                            writeQueryArgsToVariables(localVariables, field.queryArguments, variables);
-                            const [networkRequest, disposeNetworkRequest] = (0, makeNetworkRequest_1.makeNetworkRequest)(environment, field.entrypoint, localVariables);
-                            const fragmentReference = {
-                                kind: 'FragmentReference',
-                                readerArtifact: field.entrypoint.readerArtifact,
-                                // TODO localVariables is not guaranteed to have an id field
-                                root: localVariables.id,
-                                variables: localVariables,
-                                nestedRefetchQueries: field.entrypoint.nestedRefetchQueries,
-                                networkRequest,
-                            };
-                            return [fragmentReference, disposeNetworkRequest];
-                        },
-                    ];
+                    target[field.alias] = (args) => {
+                        // TODO we should use the reader AST for this
+                        const includeReadOutData = (variables, readOutData) => {
+                            variables.id = readOutData.id;
+                            return variables;
+                        };
+                        const localVariables = includeReadOutData(args !== null && args !== void 0 ? args : {}, refetchReaderParams.data);
+                        writeQueryArgsToVariables(localVariables, field.queryArguments, variables);
+                        return [
+                            // Stable id
+                            root +
+                                '/' +
+                                field.name +
+                                '/' +
+                                stableStringifyArgs(localVariables),
+                            // Fetcher
+                            () => {
+                                const [networkRequest, disposeNetworkRequest] = (0, makeNetworkRequest_1.makeNetworkRequest)(environment, field.entrypoint, localVariables);
+                                const fragmentReference = {
+                                    kind: 'FragmentReference',
+                                    readerArtifact: field.entrypoint.readerArtifact,
+                                    // TODO localVariables is not guaranteed to have an id field
+                                    root: localVariables.id,
+                                    variables: localVariables,
+                                    nestedRefetchQueries: field.entrypoint.nestedRefetchQueries,
+                                    networkRequest,
+                                };
+                                return [fragmentReference, disposeNetworkRequest];
+                            },
+                        ];
+                    };
                 }
                 break;
             }
@@ -323,3 +329,17 @@ function writeQueryArgsToVariables(targetVariables, queryArgs, variables) {
         }
     }
 }
+// TODO use a description of the params for this?
+// TODO call stableStringifyArgs on the variable values, as well.
+// This doesn't matter for now, since we are just using primitive values
+// in the demo.
+function stableStringifyArgs(args) {
+    const keys = Object.keys(args);
+    keys.sort();
+    let s = '';
+    for (const key of keys) {
+        // @ts-expect-error
+        s += `${key}=${JSON.stringify(args[key])};`;
+    }
+    return s;
+}

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { type EagerReaderArtifact, type ComponentReaderArtifact, type RefetchRea
 export { type NormalizationAst, type NormalizationAstNode, type NormalizationLinkedField, type NormalizationScalarField, type IsographEntrypoint, assertIsEntrypoint, type RefetchQueryNormalizationArtifact, type RefetchQueryNormalizationArtifactWrapper, type ExtractProps, type ExtractReadFromStore, type ExtractResolverResult, } from './core/entrypoint';
 export { readButDoNotEvaluate } from './core/read';
 export { type ExtractSecondParam, type Argument, type ArgumentName, type ArgumentValue, type Arguments, } from './core/util';
-export { type FragmentReference, type Variables, } from './core/FragmentReference';
+export { type FragmentReference, type Variables, stableIdForFragmentReference, } from './core/FragmentReference';
 export { IsographEnvironmentProvider, useIsographEnvironment, type IsographEnvironmentProviderProps, } from './react/IsographEnvironmentProvider';
 export { useImperativeReference } from './react/useImperativeReference';
 export { FragmentReader } from './react/FragmentReader';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useClientSideDefer = exports.useRerenderOnChange = exports.useLazyReference = exports.useResult = exports.FragmentReader = exports.useImperativeReference = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.readButDoNotEvaluate = exports.assertIsEntrypoint = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = exports.makeNetworkRequest = exports.normalizeData = exports.subscribe = exports.getPromiseState = exports.readPromise = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
+exports.useClientSideDefer = exports.useRerenderOnChange = exports.useLazyReference = exports.useResult = exports.FragmentReader = exports.useImperativeReference = exports.useIsographEnvironment = exports.IsographEnvironmentProvider = exports.stableIdForFragmentReference = exports.readButDoNotEvaluate = exports.assertIsEntrypoint = exports.defaultMissingFieldHandler = exports.createIsographStore = exports.createIsographEnvironment = exports.ROOT_ID = exports.makeNetworkRequest = exports.normalizeData = exports.subscribe = exports.getPromiseState = exports.readPromise = exports.garbageCollectEnvironment = exports.unretainQuery = exports.retainQuery = void 0;
 var garbageCollection_1 = require("./core/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; } });
@@ -22,6 +22,8 @@ var entrypoint_1 = require("./core/entrypoint");
 Object.defineProperty(exports, "assertIsEntrypoint", { enumerable: true, get: function () { return entrypoint_1.assertIsEntrypoint; } });
 var read_1 = require("./core/read");
 Object.defineProperty(exports, "readButDoNotEvaluate", { enumerable: true, get: function () { return read_1.readButDoNotEvaluate; } });
+var FragmentReference_1 = require("./core/FragmentReference");
+Object.defineProperty(exports, "stableIdForFragmentReference", { enumerable: true, get: function () { return FragmentReference_1.stableIdForFragmentReference; } });
 var IsographEnvironmentProvider_1 = require("./react/IsographEnvironmentProvider");
 Object.defineProperty(exports, "IsographEnvironmentProvider", { enumerable: true, get: function () { return IsographEnvironmentProvider_1.IsographEnvironmentProvider; } });
 Object.defineProperty(exports, "useIsographEnvironment", { enumerable: true, get: function () { return IsographEnvironmentProvider_1.useIsographEnvironment; } });

package/dist/react/useReadAndSubscribe.d.ts

@@ -1,7 +1,11 @@
 import { FragmentReference } from '../core/FragmentReference';
-import { NetworkRequestReaderOptions } from '../core/read';
+import { NetworkRequestReaderOptions, WithEncounteredRecords } from '../core/read';
 /**
  * Read the data from a fragment reference and subscribe to updates.
- * Does not pass the data to the fragment reference's resolver function.
  */
 export declare function useReadAndSubscribe<TReadFromStore extends Object>(fragmentReference: FragmentReference<TReadFromStore, any>, networkRequestOptions: NetworkRequestReaderOptions): TReadFromStore;
+export declare function useSubscribeToMultiple<TReadFromStore extends Object>(items: ReadonlyArray<{
+    records: WithEncounteredRecords<TReadFromStore>;
+    callback: (updatedRecords: WithEncounteredRecords<TReadFromStore>) => void;
+    fragmentReference: FragmentReference<TReadFromStore, any>;
+}>): void;

package/dist/react/useReadAndSubscribe.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReadAndSubscribe = void 0;
+exports.useSubscribeToMultiple = exports.useReadAndSubscribe = void 0;
 const react_1 = require("react");
+const FragmentReference_1 = require("../core/FragmentReference");
 const read_1 = require("../core/read");
 const useRerenderOnChange_1 = require("./useRerenderOnChange");
 const IsographEnvironmentProvider_1 = require("./IsographEnvironmentProvider");
+const cache_1 = require("../core/cache");
 /**
  * Read the data from a fragment reference and subscribe to updates.
- * Does not pass the data to the fragment reference's resolver function.
  */
 function useReadAndSubscribe(fragmentReference, networkRequestOptions) {
     const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
@@ -16,3 +17,25 @@ function useReadAndSubscribe(fragmentReference, networkRequestOptions) {
     return readOutDataAndRecords.item;
 }
 exports.useReadAndSubscribe = useReadAndSubscribe;
+function useSubscribeToMultiple(items) {
+    const environment = (0, IsographEnvironmentProvider_1.useIsographEnvironment)();
+    (0, react_1.useEffect)(() => {
+        const cleanupFns = items.map(({ records, callback, fragmentReference }) => {
+            return (0, cache_1.subscribe)(environment, records, fragmentReference, callback);
+        });
+        return () => {
+            cleanupFns.forEach((loader) => {
+                loader();
+            });
+        };
+    }, 
+    // By analogy to useReadAndSubscribe, we can have an empty dependency array?
+    // Maybe callback has to be depended on. I don't know!
+    // TODO find out
+    [
+        items
+            .map(({ fragmentReference }) => (0, FragmentReference_1.stableIdForFragmentReference)(fragmentReference))
+            .join('.'),
+    ]);
+}
+exports.useSubscribeToMultiple = useSubscribeToMultiple;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isograph/react",
-  "version": "0.0.0-main-fbe23de7",
+  "version": "0.0.0-main-c6a74674",
   "description": "Use Isograph with React",
   "homepage": "https://isograph.dev",
   "main": "dist/index.js",
@@ -17,8 +17,8 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@isograph/disposable-types": "0.0.0-main-fbe23de7",
-    "@isograph/react-disposable-state": "0.0.0-main-fbe23de7",
+    "@isograph/disposable-types": "0.0.0-main-c6a74674",
+    "@isograph/react-disposable-state": "0.0.0-main-c6a74674",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/src/core/FragmentReference.ts

@@ -24,3 +24,19 @@ export type FragmentReference<
   readonly nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[];
   readonly networkRequest: PromiseWrapper<void, any>;
 };
+
+export function stableIdForFragmentReference(
+  fragmentReference: FragmentReference<any, any>,
+): string {
+  return `${fragmentReference.root}/TODO_FRAGMENT_NAME/${serializeVariables(fragmentReference.variables ?? {})}`;
+}
+
+function serializeVariables(variables: Variables) {
+  let s = '';
+  const keys = Object.keys(variables);
+  keys.sort();
+  for (const key of keys) {
+    s += `${key}:${variables[key]},`;
+  }
+  return s;
+}

package/src/core/read.ts

@@ -338,43 +338,50 @@ function readData<TReadFromStore>(
             nestedReason: refetchReaderParams,
           };
         } else {
-          target[field.alias] = (args: any) => [
-            // Stable id
-            root + '__' + field.name,
-            // Fetcher
-            () => {
-              // TODO we should use the reader AST for this
-              const includeReadOutData = (variables: any, readOutData: any) => {
-                variables.id = readOutData.id;
-                return variables;
-              };
-              const localVariables = includeReadOutData(
-                args ?? {},
-                refetchReaderParams.data,
-              );
-              writeQueryArgsToVariables(
-                localVariables,
-                field.queryArguments,
-                variables,
-              );
-              const [networkRequest, disposeNetworkRequest] =
-                makeNetworkRequest(
-                  environment,
-                  field.entrypoint,
-                  localVariables,
-                );
-              const fragmentReference = {
-                kind: 'FragmentReference',
-                readerArtifact: field.entrypoint.readerArtifact,
-                // TODO localVariables is not guaranteed to have an id field
-                root: localVariables.id,
-                variables: localVariables,
-                nestedRefetchQueries: field.entrypoint.nestedRefetchQueries,
-                networkRequest,
-              } as FragmentReference<any, any>;
-              return [fragmentReference, disposeNetworkRequest];
-            },
-          ];
+          target[field.alias] = (args: any) => {
+            // TODO we should use the reader AST for this
+            const includeReadOutData = (variables: any, readOutData: any) => {
+              variables.id = readOutData.id;
+              return variables;
+            };
+            const localVariables = includeReadOutData(
+              args ?? {},
+              refetchReaderParams.data,
+            );
+            writeQueryArgsToVariables(
+              localVariables,
+              field.queryArguments,
+              variables,
+            );
+
+            return [
+              // Stable id
+              root +
+                '/' +
+                field.name +
+                '/' +
+                stableStringifyArgs(localVariables),
+              // Fetcher
+              () => {
+                const [networkRequest, disposeNetworkRequest] =
+                  makeNetworkRequest(
+                    environment,
+                    field.entrypoint,
+                    localVariables,
+                  );
+                const fragmentReference = {
+                  kind: 'FragmentReference',
+                  readerArtifact: field.entrypoint.readerArtifact,
+                  // TODO localVariables is not guaranteed to have an id field
+                  root: localVariables.id,
+                  variables: localVariables,
+                  nestedRefetchQueries: field.entrypoint.nestedRefetchQueries,
+                  networkRequest,
+                } as FragmentReference<any, any>;
+                return [fragmentReference, disposeNetworkRequest];
+              },
+            ];
+          };
         }
         break;
       }
@@ -464,3 +471,18 @@ export type NetworkRequestReaderOptions = {
   suspendIfInFlight?: boolean;
   throwOnNetworkError?: boolean;
 };
+
+// TODO use a description of the params for this?
+// TODO call stableStringifyArgs on the variable values, as well.
+// This doesn't matter for now, since we are just using primitive values
+// in the demo.
+function stableStringifyArgs(args: Object) {
+  const keys = Object.keys(args);
+  keys.sort();
+  let s = '';
+  for (const key of keys) {
+    // @ts-expect-error
+    s += `${key}=${JSON.stringify(args[key])};`;
+  }
+  return s;
+}

package/src/index.ts

@@ -60,6 +60,7 @@ export {
 export {
   type FragmentReference,
   type Variables,
+  stableIdForFragmentReference,
 } from './core/FragmentReference';
 
 export {

package/src/react/useReadAndSubscribe.ts

@@ -1,15 +1,19 @@
-import { useState } from 'react';
-import { FragmentReference } from '../core/FragmentReference';
+import { useEffect, useState } from 'react';
+import {
+  FragmentReference,
+  stableIdForFragmentReference,
+} from '../core/FragmentReference';
 import {
   NetworkRequestReaderOptions,
   readButDoNotEvaluate,
+  WithEncounteredRecords,
 } from '../core/read';
 import { useRerenderOnChange } from './useRerenderOnChange';
 import { useIsographEnvironment } from './IsographEnvironmentProvider';
+import { subscribe } from '../core/cache';
 
 /**
  * Read the data from a fragment reference and subscribe to updates.
- * Does not pass the data to the fragment reference's resolver function.
  */
 export function useReadAndSubscribe<TReadFromStore extends Object>(
   fragmentReference: FragmentReference<TReadFromStore, any>,
@@ -26,3 +30,37 @@ export function useReadAndSubscribe<TReadFromStore extends Object>(
   );
   return readOutDataAndRecords.item;
 }
+
+export function useSubscribeToMultiple<TReadFromStore extends Object>(
+  items: ReadonlyArray<{
+    records: WithEncounteredRecords<TReadFromStore>;
+    callback: (updatedRecords: WithEncounteredRecords<TReadFromStore>) => void;
+    fragmentReference: FragmentReference<TReadFromStore, any>;
+  }>,
+) {
+  const environment = useIsographEnvironment();
+  useEffect(
+    () => {
+      const cleanupFns = items.map(
+        ({ records, callback, fragmentReference }) => {
+          return subscribe(environment, records, fragmentReference, callback);
+        },
+      );
+      return () => {
+        cleanupFns.forEach((loader) => {
+          loader();
+        });
+      };
+    },
+    // By analogy to useReadAndSubscribe, we can have an empty dependency array?
+    // Maybe callback has to be depended on. I don't know!
+    // TODO find out
+    [
+      items
+        .map(({ fragmentReference }) =>
+          stableIdForFragmentReference(fragmentReference),
+        )
+        .join('.'),
+    ],
+  );
+}