@isograph/react 0.2.0 → 0.3.1

package/src/core/cache.ts

@@ -3,50 +3,53 @@ import {
   ItemCleanupPair,
   ParentCache,
 } from '@isograph/react-disposable-state';
-import {
-  DataId,
-  ROOT_ID,
-  StoreRecord,
-  Link,
-  type IsographEnvironment,
-  DataTypeValue,
-  getLink,
-  FragmentSubscription,
-} from './IsographEnvironment';
 import {
   IsographEntrypoint,
-  NormalizationAst,
   NormalizationInlineFragment,
   NormalizationLinkedField,
   NormalizationScalarField,
   RefetchQueryNormalizationArtifactWrapper,
+  type NormalizationAst,
+  type NormalizationAstLoader,
+  type NormalizationAstNodes,
 } from '../core/entrypoint';
-import { ReaderLinkedField, ReaderScalarField } from './reader';
-import { Argument, ArgumentValue } from './util';
-import { WithEncounteredRecords, readButDoNotEvaluate } from './read';
-import { FragmentReference, Variables } from './FragmentReference';
-import { areEqualObjectsWithDeepComparison } from './areEqualWithDeepComparison';
-import { makeNetworkRequest } from './makeNetworkRequest';
+import { mergeObjectsUsingReaderAst } from './areEqualWithDeepComparison';
+import { FetchOptions } from './check';
+import {
+  ExtractParameters,
+  FragmentReference,
+  Variables,
+  type UnknownTReadFromStore,
+  type VariableValue,
+} from './FragmentReference';
+import {
+  DataId,
+  DataTypeValue,
+  FragmentSubscription,
+  getLink,
+  Link,
+  ROOT_ID,
+  StoreRecord,
+  type IsographEnvironment,
+  type TypeName,
+} from './IsographEnvironment';
+import { logMessage } from './logging';
+import { maybeMakeNetworkRequest } from './makeNetworkRequest';
 import { wrapResolvedValue } from './PromiseWrapper';
+import { readButDoNotEvaluate, WithEncounteredRecords } from './read';
+import { ReaderLinkedField, ReaderScalarField, type ReaderAst } from './reader';
+import { Argument, ArgumentValue } from './util';
 
-const TYPENAME_FIELD_NAME = '__typename';
+export const TYPENAME_FIELD_NAME = '__typename';
 
 export function getOrCreateItemInSuspenseCache<
-  TReadFromStore extends Object,
+  TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
 >(
   environment: IsographEnvironment,
   index: string,
   factory: Factory<FragmentReference<TReadFromStore, TClientFieldValue>>,
 ): ParentCache<FragmentReference<TReadFromStore, TClientFieldValue>> {
-  // @ts-expect-error
-  if (typeof window !== 'undefined' && window.__LOG) {
-    console.log('getting cache for', {
-      index,
-      cache: Object.keys(environment.fragmentCache),
-      found: !!environment.fragmentCache[index],
-    });
-  }
   if (environment.fragmentCache[index] == null) {
     environment.fragmentCache[index] = new ParentCache(factory);
   }
@@ -77,20 +80,30 @@ export function stableCopy<T>(value: T): T {
 }
 
 export function getOrCreateCacheForArtifact<
-  TReadFromStore extends Object,
+  TReadFromStore extends UnknownTReadFromStore,
   TClientFieldValue,
+  TNormalizationAst extends NormalizationAst | NormalizationAstLoader,
 >(
   environment: IsographEnvironment,
-  entrypoint: IsographEntrypoint<TReadFromStore, TClientFieldValue>,
-  variables: Variables,
+  entrypoint: IsographEntrypoint<
+    TReadFromStore,
+    TClientFieldValue,
+    TNormalizationAst
+  >,
+  variables: ExtractParameters<TReadFromStore>,
+  fetchOptions?: FetchOptions<TClientFieldValue>,
 ): ParentCache<FragmentReference<TReadFromStore, TClientFieldValue>> {
-  const cacheKey = entrypoint.queryText + JSON.stringify(stableCopy(variables));
+  const cacheKey =
+    entrypoint.networkRequestInfo.queryText +
+    JSON.stringify(stableCopy(variables));
   const factory = () => {
-    const [networkRequest, disposeNetworkRequest] = makeNetworkRequest(
+    const [networkRequest, disposeNetworkRequest] = maybeMakeNetworkRequest(
       environment,
       entrypoint,
       variables,
+      fetchOptions,
     );
+
     const itemCleanupPair: ItemCleanupPair<
       FragmentReference<TReadFromStore, TClientFieldValue>
     > = [
@@ -102,7 +115,7 @@ export function getOrCreateCacheForArtifact<
           nestedRefetchQueries:
             entrypoint.readerWithRefetchQueries.nestedRefetchQueries,
         }),
-        root: ROOT_ID,
+        root: { __link: ROOT_ID, __typename: entrypoint.concreteType },
         variables,
         networkRequest: networkRequest,
       },
@@ -113,56 +126,59 @@ export function getOrCreateCacheForArtifact<
   return getOrCreateItemInSuspenseCache(environment, cacheKey, factory);
 }
 
-type NetworkResponseScalarValue = string | number | boolean;
-type NetworkResponseValue =
+export type NetworkResponseScalarValue = string | number | boolean;
+export type NetworkResponseValue =
   | NetworkResponseScalarValue
   | null
   | NetworkResponseObject
-  | NetworkResponseObject[]
-  | NetworkResponseScalarValue[];
-type NetworkResponseObject = {
+  | (NetworkResponseObject | null)[]
+  | (NetworkResponseScalarValue | null)[];
+
+export type NetworkResponseObject = {
   // N.B. undefined is here to support optional id's, but
   // undefined should not *actually* be present in the network response.
   [index: string]: undefined | NetworkResponseValue;
   id?: DataId;
+  __typename?: TypeName;
 };
 
 export function normalizeData(
   environment: IsographEnvironment,
-  normalizationAst: NormalizationAst,
+  normalizationAst: NormalizationAstNodes,
   networkResponse: NetworkResponseObject,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
-): Set<DataId> {
-  const encounteredIds = new Set<DataId>();
-
-  // @ts-expect-error
-  if (typeof window !== 'undefined' && window.__LOG) {
-    console.log(
-      'about to normalize',
-      normalizationAst,
-      networkResponse,
-      variables,
-    );
-  }
+  root: Link,
+): EncounteredIds {
+  const encounteredIds: EncounteredIds = new Map();
+
+  logMessage(environment, () => ({
+    kind: 'AboutToNormalize',
+    normalizationAst,
+    networkResponse,
+    variables,
+  }));
+
+  const recordsById = (environment.store[root.__typename] ??= {});
+  const newStoreRecord = (recordsById[root.__link] ??= {});
+
   normalizeDataIntoRecord(
     environment,
     normalizationAst,
     networkResponse,
-    environment.store.__ROOT,
-    ROOT_ID,
-    variables as any,
+    newStoreRecord,
+    root,
+    variables,
     nestedRefetchQueries,
     encounteredIds,
   );
-  // @ts-expect-error
-  if (typeof window !== 'undefined' && window.__LOG) {
-    console.log('after normalization', {
-      store: environment.store,
-      encounteredIds,
-      environment,
-    });
-  }
+
+  logMessage(environment, () => ({
+    kind: 'AfterNormalization',
+    store: environment.store,
+    encounteredIds,
+  }));
+
   callSubscriptions(environment, encounteredIds);
   return encounteredIds;
 }
@@ -179,33 +195,54 @@ export function subscribeToAnyChange(
   return () => environment.subscriptions.delete(subscription);
 }
 
+export function subscribeToAnyChangesToRecord(
+  environment: IsographEnvironment,
+  recordLink: Link,
+  callback: () => void,
+): () => void {
+  const subscription = {
+    kind: 'AnyChangesToRecord',
+    recordLink,
+    callback,
+  } as const;
+  environment.subscriptions.add(subscription);
+  return () => environment.subscriptions.delete(subscription);
+}
+
 // TODO we should re-read and call callback if the value has changed
-export function subscribe<TReadFromStore extends Object>(
+export function subscribe<TReadFromStore extends UnknownTReadFromStore>(
   environment: IsographEnvironment,
   encounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
   fragmentReference: FragmentReference<TReadFromStore, any>,
   callback: (
     newEncounteredDataAndRecords: WithEncounteredRecords<TReadFromStore>,
   ) => void,
+  readerAst: ReaderAst<TReadFromStore>,
 ): () => void {
   const fragmentSubscription: FragmentSubscription<TReadFromStore> = {
     kind: 'FragmentSubscription',
     callback,
     encounteredDataAndRecords,
     fragmentReference,
+    readerAst,
   };
-  // @ts-expect-error
   environment.subscriptions.add(fragmentSubscription);
-  // @ts-expect-error
   return () => environment.subscriptions.delete(fragmentSubscription);
 }
 
-export function onNextChange(environment: IsographEnvironment): Promise<void> {
+export function onNextChangeToRecord(
+  environment: IsographEnvironment,
+  recordLink: Link,
+): Promise<void> {
   return new Promise((resolve) => {
-    const unsubscribe = subscribeToAnyChange(environment, () => {
-      unsubscribe();
-      resolve();
-    });
+    const unsubscribe = subscribeToAnyChangesToRecord(
+      environment,
+      recordLink,
+      () => {
+        unsubscribe();
+        resolve();
+      },
+    );
   });
 }
 
@@ -224,7 +261,7 @@ function withErrorHandling<T>(f: (t: T) => void): (t: T) => void {
 
 function callSubscriptions(
   environment: IsographEnvironment,
-  recordsEncounteredWhenNormalizing: Set<DataId>,
+  recordsEncounteredWhenNormalizing: EncounteredIds,
 ) {
   environment.subscriptions.forEach(
     withErrorHandling((subscription) => {
@@ -260,36 +297,40 @@ function callSubscriptions(
               },
             );
 
-            if (
-              !areEqualObjectsWithDeepComparison(
-                subscription.encounteredDataAndRecords.item,
-                newEncounteredDataAndRecords.item,
-              )
-            ) {
-              // @ts-expect-error
-              if (typeof window !== 'undefined' && window.__LOG) {
-                console.log('Deep equality - No', {
-                  fragmentReference: subscription.fragmentReference,
-                  old: subscription.encounteredDataAndRecords.item,
-                  new: newEncounteredDataAndRecords.item,
-                });
-              }
-              // TODO deep compare values
+            const mergedItem = mergeObjectsUsingReaderAst(
+              subscription.readerAst,
+              subscription.encounteredDataAndRecords.item,
+              newEncounteredDataAndRecords.item,
+            );
+
+            logMessage(environment, () => ({
+              kind: 'DeepEqualityCheck',
+              fragmentReference: subscription.fragmentReference,
+              old: subscription.encounteredDataAndRecords.item,
+              new: newEncounteredDataAndRecords.item,
+              deeplyEqual:
+                mergedItem === subscription.encounteredDataAndRecords.item,
+            }));
+
+            if (mergedItem !== subscription.encounteredDataAndRecords.item) {
               subscription.callback(newEncounteredDataAndRecords);
-            } else {
-              // @ts-expect-error
-              if (typeof window !== 'undefined' && window.__LOG) {
-                console.log('Deep equality - Yes', {
-                  fragmentReference: subscription.fragmentReference,
-                  old: subscription.encounteredDataAndRecords.item,
-                });
-              }
             }
           }
           return;
         }
         case 'AnyRecords': {
-          return subscription.callback();
+          subscription.callback();
+          return;
+        }
+        case 'AnyChangesToRecord': {
+          if (
+            recordsEncounteredWhenNormalizing
+              .get(subscription.recordLink.__typename)
+              ?.has(subscription.recordLink.__link)
+          ) {
+            subscription.callback();
+          }
+          return;
         }
         default: {
           // Ensure we have covered all variants
@@ -302,7 +343,25 @@ function callSubscriptions(
   );
 }
 
-function hasOverlappingIds(set1: Set<DataId>, set2: Set<DataId>): boolean {
+function hasOverlappingIds(
+  ids1: EncounteredIds,
+  ids2: EncounteredIds,
+): boolean {
+  for (const [typeName, set1] of ids1.entries()) {
+    const set2 = ids2.get(typeName);
+    if (set2 === undefined) {
+      continue;
+    }
+
+    if (isNotDisjointFrom(set1, set2)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// TODO use a polyfill library
+function isNotDisjointFrom<T>(set1: Set<T>, set2: Set<T>): boolean {
   for (const id of set1) {
     if (set2.has(id)) {
       return true;
@@ -311,18 +370,19 @@ function hasOverlappingIds(set1: Set<DataId>, set2: Set<DataId>): boolean {
   return false;
 }
 
+export type EncounteredIds = Map<TypeName, Set<DataId>>;
 /**
  * Mutate targetParentRecord according to the normalizationAst and networkResponseParentRecord.
  */
 function normalizeDataIntoRecord(
   environment: IsographEnvironment,
-  normalizationAst: NormalizationAst,
+  normalizationAst: NormalizationAstNodes,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
-  targetParentRecordId: DataId,
+  targetParentRecordLink: Link,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
-  mutableEncounteredIds: Set<DataId>,
+  mutableEncounteredIds: EncounteredIds,
 ): RecordHasBeenUpdated {
   let recordHasBeenUpdated = false;
   for (const normalizationNode of normalizationAst) {
@@ -344,7 +404,7 @@ function normalizeDataIntoRecord(
           normalizationNode,
           networkResponseParentRecord,
           targetParentRecord,
-          targetParentRecordId,
+          targetParentRecordLink,
           variables,
           nestedRefetchQueries,
           mutableEncounteredIds,
@@ -359,7 +419,7 @@ function normalizeDataIntoRecord(
           normalizationNode,
           networkResponseParentRecord,
           targetParentRecord,
-          targetParentRecordId,
+          targetParentRecordLink,
           variables,
           nestedRefetchQueries,
           mutableEncounteredIds,
@@ -377,11 +437,25 @@ function normalizeDataIntoRecord(
     }
   }
   if (recordHasBeenUpdated) {
-    mutableEncounteredIds.add(targetParentRecordId);
+    let encounteredRecordsIds = insertIfNotExists(
+      mutableEncounteredIds,
+      targetParentRecordLink.__typename,
+    );
+
+    encounteredRecordsIds.add(targetParentRecordLink.__link);
   }
   return recordHasBeenUpdated;
 }
 
+export function insertIfNotExists<K, V>(map: Map<K, Set<V>>, key: K) {
+  let result = map.get(key);
+  if (result === undefined) {
+    result = new Set();
+    map.set(key, result);
+  }
+  return result;
+}
+
 type RecordHasBeenUpdated = boolean;
 function normalizeScalarField(
   astNode: NormalizationScalarField,
@@ -413,10 +487,10 @@ function normalizeLinkedField(
   astNode: NormalizationLinkedField,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
-  targetParentRecordId: DataId,
+  targetParentRecordLink: Link,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
-  mutableEncounteredIds: Set<DataId>,
+  mutableEncounteredIds: EncounteredIds,
 ): RecordHasBeenUpdated {
   const networkResponseKey = getNetworkResponseKey(astNode);
   const networkResponseData = networkResponseParentRecord[networkResponseKey];
@@ -428,7 +502,10 @@ function normalizeLinkedField(
     return existingValue !== null;
   }
 
-  if (isScalarButNotEmptyArray(networkResponseData)) {
+  if (
+    isScalarOrEmptyArray(networkResponseData) &&
+    !isNullOrEmptyArray(networkResponseData)
+  ) {
     throw new Error(
       'Unexpected scalar network response when normalizing a linked field',
     );
@@ -436,21 +513,36 @@ function normalizeLinkedField(
 
   if (Array.isArray(networkResponseData)) {
     // TODO check astNode.plural or the like
-    const dataIds: Link[] = [];
+    const dataIds: (Link | null)[] = [];
     for (let i = 0; i < networkResponseData.length; i++) {
       const networkResponseObject = networkResponseData[i];
+      if (networkResponseObject == null) {
+        dataIds.push(null);
+        continue;
+      }
       const newStoreRecordId = normalizeNetworkResponseObject(
         environment,
         astNode,
         networkResponseObject,
-        targetParentRecordId,
+        targetParentRecordLink,
         variables,
         i,
         nestedRefetchQueries,
         mutableEncounteredIds,
       );
 
-      dataIds.push({ __link: newStoreRecordId });
+      const __typename =
+        astNode.concreteType ?? networkResponseObject[TYPENAME_FIELD_NAME];
+      if (__typename == null) {
+        throw new Error(
+          'Unexpected missing __typename in network response when normalizing a linked field. ' +
+            'This is indicative of a bug in Isograph.',
+        );
+      }
+      dataIds.push({
+        __link: newStoreRecordId,
+        __typename,
+      });
     }
     targetParentRecord[parentRecordKey] = dataIds;
     return !dataIdsAreTheSame(existingValue, dataIds);
@@ -459,18 +551,30 @@ function normalizeLinkedField(
       environment,
       astNode,
       networkResponseData,
-      targetParentRecordId,
+      targetParentRecordLink,
       variables,
       null,
       nestedRefetchQueries,
       mutableEncounteredIds,
     );
 
+    let __typename =
+      astNode.concreteType ?? networkResponseData[TYPENAME_FIELD_NAME];
+
+    if (__typename == null) {
+      throw new Error(
+        'Unexpected missing __typename in network response when normalizing a linked field. ' +
+          'This is indicative of a bug in Isograph.',
+      );
+    }
+
     targetParentRecord[parentRecordKey] = {
       __link: newStoreRecordId,
+      __typename,
     };
+
     const link = getLink(existingValue);
-    return link?.__link !== newStoreRecordId;
+    return link?.__link !== newStoreRecordId || link.__typename !== __typename;
   }
 }
 
@@ -482,10 +586,10 @@ function normalizeInlineFragment(
   astNode: NormalizationInlineFragment,
   networkResponseParentRecord: NetworkResponseObject,
   targetParentRecord: StoreRecord,
-  targetParentRecordId: DataId,
+  targetParentRecordLink: Link,
   variables: Variables,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
-  mutableEncounteredIds: Set<DataId>,
+  mutableEncounteredIds: EncounteredIds,
 ): RecordHasBeenUpdated {
   const typeToRefineTo = astNode.type;
   if (networkResponseParentRecord[TYPENAME_FIELD_NAME] === typeToRefineTo) {
@@ -494,7 +598,7 @@ function normalizeInlineFragment(
       astNode.selections,
       networkResponseParentRecord,
       targetParentRecord,
-      targetParentRecordId,
+      targetParentRecordLink,
       variables,
       nestedRefetchQueries,
       mutableEncounteredIds,
@@ -506,7 +610,7 @@ function normalizeInlineFragment(
 
 function dataIdsAreTheSame(
   existingValue: DataTypeValue,
-  newDataIds: Link[],
+  newDataIds: (Link | null)[],
 ): boolean {
   if (Array.isArray(existingValue)) {
     if (newDataIds.length !== existingValue.length) {
@@ -514,10 +618,11 @@ function dataIdsAreTheSame(
     }
     for (let i = 0; i < newDataIds.length; i++) {
       const maybeLink = getLink(existingValue[i]);
-      if (maybeLink !== null) {
-        if (newDataIds[i].__link !== maybeLink.__link) {
-          return false;
-        }
+      if (
+        newDataIds[i]?.__link !== maybeLink?.__link ||
+        newDataIds[i]?.__typename !== maybeLink?.__typename
+      ) {
+        return false;
       }
     }
     return true;
@@ -530,29 +635,38 @@ function normalizeNetworkResponseObject(
   environment: IsographEnvironment,
   astNode: NormalizationLinkedField,
   networkResponseData: NetworkResponseObject,
-  targetParentRecordId: string,
+  targetParentRecordLink: Link,
   variables: Variables,
   index: number | null,
   nestedRefetchQueries: RefetchQueryNormalizationArtifactWrapper[],
-  mutableEncounteredIds: Set<DataId>,
+  mutableEncounteredIds: EncounteredIds,
 ): DataId /* The id of the modified or newly created item */ {
   const newStoreRecordId = getDataIdOfNetworkResponse(
-    targetParentRecordId,
+    targetParentRecordLink,
     networkResponseData,
     astNode,
     variables,
     index,
   );
+  const __typename =
+    astNode.concreteType ?? networkResponseData[TYPENAME_FIELD_NAME];
+
+  if (__typename == null) {
+    throw new Error(
+      'Unexpected missing __typename in network response object. ' +
+        'This is indicative of a bug in Isograph.',
+    );
+  }
 
-  const newStoreRecord = environment.store[newStoreRecordId] ?? {};
-  environment.store[newStoreRecordId] = newStoreRecord;
+  const recordsById = (environment.store[__typename] ??= {});
+  const newStoreRecord = (recordsById[newStoreRecordId] ??= {});
 
   normalizeDataIntoRecord(
     environment,
     astNode.selections,
     networkResponseData,
     newStoreRecord,
-    newStoreRecordId,
+    { __link: newStoreRecordId, __typename: __typename },
     variables,
     nestedRefetchQueries,
     mutableEncounteredIds,
@@ -563,35 +677,29 @@ function normalizeNetworkResponseObject(
 
 function isScalarOrEmptyArray(
   data: NonNullable<NetworkResponseValue>,
-): data is NetworkResponseScalarValue | NetworkResponseScalarValue[] {
+): data is NetworkResponseScalarValue | (NetworkResponseScalarValue | null)[] {
   // N.B. empty arrays count as empty arrays of scalar fields.
   if (Array.isArray(data)) {
     // This is maybe fixed in a new version of Typescript??
     return (data as any).every((x: any) => isScalarOrEmptyArray(x));
   }
   const isScalarValue =
+    data === null ||
     typeof data === 'string' ||
     typeof data === 'number' ||
     typeof data === 'boolean';
   return isScalarValue;
 }
 
-function isScalarButNotEmptyArray(
-  data: NonNullable<NetworkResponseValue>,
-): data is NetworkResponseScalarValue | NetworkResponseScalarValue[] {
-  // N.B. empty arrays count as empty arrays of linked fields.
+function isNullOrEmptyArray(data: unknown): data is never[] | null[] | null {
   if (Array.isArray(data)) {
     if (data.length === 0) {
-      return false;
+      return true;
     }
-    // This is maybe fixed in a new version of Typescript??
-    return (data as any).every((x: any) => isScalarOrEmptyArray(x));
+    return data.every((x) => isNullOrEmptyArray(x));
   }
-  const isScalarValue =
-    typeof data === 'string' ||
-    typeof data === 'number' ||
-    typeof data === 'boolean';
-  return isScalarValue;
+
+  return data === null;
 }
 
 export function getParentRecordKey(
@@ -616,8 +724,19 @@ export function getParentRecordKey(
 function getStoreKeyChunkForArgumentValue(
   argumentValue: ArgumentValue,
   variables: Variables,
-) {
+): VariableValue {
   switch (argumentValue.kind) {
+    case 'Object': {
+      return Object.fromEntries(
+        argumentValue.value.map(([argumentName, argumentValue]) => {
+          return [
+            argumentName,
+            //  substitute variables
+            getStoreKeyChunkForArgumentValue(argumentValue, variables),
+          ];
+        }),
+      );
+    }
     case 'Literal': {
       return argumentValue.value;
     }
@@ -641,7 +760,12 @@ function getStoreKeyChunkForArgumentValue(
 }
 
 function getStoreKeyChunkForArgument(argument: Argument, variables: Variables) {
-  const chunk = getStoreKeyChunkForArgumentValue(argument[1], variables);
+  let chunk = getStoreKeyChunkForArgumentValue(argument[1], variables);
+
+  if (typeof chunk === 'object') {
+    chunk = JSON.stringify(stableCopy(chunk));
+  }
+
   return `${FIRST_SPLIT_KEY}${argument[0]}${SECOND_SPLIT_KEY}${chunk}`;
 }
 
@@ -650,52 +774,75 @@ function getNetworkResponseKey(
 ): string {
   let networkResponseKey = astNode.fieldName;
   const fieldParameters = astNode.arguments;
+
   if (fieldParameters != null) {
-    for (const fieldParameter of fieldParameters) {
-      const [argumentName, argumentValue] = fieldParameter;
-      let argumentValueChunk;
-      switch (argumentValue.kind) {
-        case 'Literal': {
-          argumentValueChunk = 'l_' + argumentValue.value;
-          break;
-        }
-        case 'Variable': {
-          argumentValueChunk = 'v_' + argumentValue.name;
-          break;
-        }
-        case 'String': {
-          argumentValueChunk = 's_' + argumentValue.value;
-          break;
-        }
-        case 'Enum': {
-          argumentValueChunk = 'e_' + argumentValue.value;
-          break;
-        }
-        default: {
-          // Ensure we have covered all variants
-          let _: never = argumentValue;
-          _;
-          throw new Error('Unexpected case');
-        }
-      }
+    for (const [argumentName, argumentValue] of fieldParameters) {
+      let argumentValueChunk = getArgumentValueChunk(argumentValue);
       networkResponseKey += `${FIRST_SPLIT_KEY}${argumentName}${SECOND_SPLIT_KEY}${argumentValueChunk}`;
     }
   }
+
   return networkResponseKey;
 }
 
+function getArgumentValueChunk(argumentValue: ArgumentValue): string {
+  switch (argumentValue.kind) {
+    case 'Object': {
+      return (
+        'o_' +
+        argumentValue.value
+          .map(([argumentName, argumentValue]) => {
+            return (
+              argumentName +
+              THIRD_SPLIT_KEY +
+              getArgumentValueChunk(argumentValue)
+            );
+          })
+          .join('_') +
+        '_c'
+      );
+    }
+    case 'Literal': {
+      return 'l_' + argumentValue.value;
+    }
+    case 'Variable': {
+      return 'v_' + argumentValue.name;
+    }
+    case 'String': {
+      // replace all non-word characters (alphanumeric & underscore) with underscores
+      return 's_' + argumentValue.value.replaceAll(/\W/g, '_');
+    }
+    case 'Enum': {
+      return 'e_' + argumentValue.value;
+    }
+    default: {
+      // Ensure we have covered all variants
+      let _: never = argumentValue;
+      _;
+      throw new Error('Unexpected case');
+    }
+  }
+}
+
 // an alias might be pullRequests____first___first____after___cursor
 export const FIRST_SPLIT_KEY = '____';
 export const SECOND_SPLIT_KEY = '___';
+export const THIRD_SPLIT_KEY = '__';
 
 // Returns a key to look up an item in the store
 function getDataIdOfNetworkResponse(
-  parentRecordId: DataId,
+  parentRecordLink: Link,
   dataToNormalize: NetworkResponseObject,
-  astNode: NormalizationLinkedField | NormalizationScalarField,
+  astNode: NormalizationLinkedField,
   variables: Variables,
   index: number | null,
 ): DataId {
+  // If we are dealing with nested Query, use __ROOT as id
+  // TODO do not hard code this value here
+  if (astNode.concreteType === 'Query') {
+    return ROOT_ID;
+  }
+
   // Check whether the dataToNormalize has an id field. If so, that is the key.
   // If not, we construct an id from the parentRecordId and the field parameters.
 
@@ -704,7 +851,7 @@ function getDataIdOfNetworkResponse(
     return dataId;
   }
 
-  let storeKey = `${parentRecordId}.${astNode.fieldName}`;
+  let storeKey = `${parentRecordLink.__typename}:${parentRecordLink.__link}.${astNode.fieldName}`;
   if (index != null) {
     storeKey += `.${index}`;
   }