From 544e8218d9752c33359f6fbb83a9c0f346d25c32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stanis=C5=82aw?= <sjwilczynski@users.noreply.github.com>
Date: Fri, 25 Oct 2024 18:53:26 +0200
Subject: [PATCH] fix(nova-react-test-utils): bump relay, relax generate types
 in relay case, add example and docs for working with client extensions (#127)

* bump relay to 18 and mention client extensions

* add story with extensions

* bump graphitation packages

* fix readme

* rearrange docs

* fix readme again

* fix one story

* Change files

---------

Co-authored-by: Stanislaw Wilczynski <Stanislaw.Wilczynski@microsoft.com>
---
 ...-8a8892ea-2b9e-4bc1-ae16-852559f733f7.json |   7 +
 ...-2428c3ea-ce99-4fe4-aca6-eda0689d53a3.json |   7 +
 ...-78375496-e653-4a6f-ace6-d99ef9abfed1.json |   7 +
 packages/examples/codegen.yml                 |   1 +
 packages/examples/package.json                |  15 ++-
 packages/examples/relay.config.json           |  15 ++-
 .../src/__generated__/schema.all.interface.ts |  18 +++
 .../examples/src/clientExtensions.graphql     |   7 +
 .../FeedbackComponent_LikeMutation.graphql.ts |   4 +-
 .../FeedbackContainerQuery.graphql.ts         |   4 +-
 .../FeedbackStoryQuery.graphql.ts             |   4 +-
 .../Feedback_feedbackFragment.graphql.ts      |   4 +-
 .../src/relay/pure-relay/Feedback.stories.tsx |  44 ++++--
 .../src/relay/pure-relay/Feedback.tsx         |  10 ++
 ...backComponent_RelayLikeMutation.graphql.ts |   4 +-
 .../FeedbackStoryRelayQuery.graphql.ts        |  65 ++++++++-
 .../Feedback_feedbackRelayFragment.graphql.ts |   4 +-
 .../Feedback_viewDataRelayFragment.graphql.ts |  47 +++++++
 packages/nova-react-test-utils/README.md      |  61 ++++++++-
 packages/nova-react-test-utils/package.json   |  23 ++--
 .../relay/storybook-nova-decorator-relay.tsx  |  23 +++-
 .../src/relay/test-utils.tsx                  |   2 +-
 packages/nova-react/package.json              |   4 +-
 scripts/package.json                          |   2 +-
 yarn.lock                                     | 125 +++++++++---------
 25 files changed, 386 insertions(+), 121 deletions(-)
 create mode 100644 change/@nova-examples-8a8892ea-2b9e-4bc1-ae16-852559f733f7.json
 create mode 100644 change/@nova-react-2428c3ea-ce99-4fe4-aca6-eda0689d53a3.json
 create mode 100644 change/@nova-react-test-utils-78375496-e653-4a6f-ace6-d99ef9abfed1.json
 create mode 100644 packages/examples/src/clientExtensions.graphql
 create mode 100644 packages/examples/src/relay/pure-relay/__generated__/Feedback_viewDataRelayFragment.graphql.ts

diff --git a/change/@nova-examples-8a8892ea-2b9e-4bc1-ae16-852559f733f7.json b/change/@nova-examples-8a8892ea-2b9e-4bc1-ae16-852559f733f7.json
new file mode 100644
index 0000000..d62ecb5
--- /dev/null
+++ b/change/@nova-examples-8a8892ea-2b9e-4bc1-ae16-852559f733f7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add example of overriding generate function",
+  "packageName": "@nova/examples",
+  "email": "Stanislaw.Wilczynski@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@nova-react-2428c3ea-ce99-4fe4-aca6-eda0689d53a3.json b/change/@nova-react-2428c3ea-ce99-4fe4-aca6-eda0689d53a3.json
new file mode 100644
index 0000000..1709dc6
--- /dev/null
+++ b/change/@nova-react-2428c3ea-ce99-4fe4-aca6-eda0689d53a3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bump graphitation packages",
+  "packageName": "@nova/react",
+  "email": "Stanislaw.Wilczynski@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@nova-react-test-utils-78375496-e653-4a6f-ace6-d99ef9abfed1.json b/change/@nova-react-test-utils-78375496-e653-4a6f-ace6-d99ef9abfed1.json
new file mode 100644
index 0000000..75608bf
--- /dev/null
+++ b/change/@nova-react-test-utils-78375496-e653-4a6f-ace6-d99ef9abfed1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "relax types for overrding generator",
+  "packageName": "@nova/react-test-utils",
+  "email": "Stanislaw.Wilczynski@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/examples/codegen.yml b/packages/examples/codegen.yml
index e57b605..71b8ef5 100644
--- a/packages/examples/codegen.yml
+++ b/packages/examples/codegen.yml
@@ -1,6 +1,7 @@
 overwrite: true
 schema:
   - "./src/schema.graphql"
+  - "./src/clientExtensions.graphql"
 generates:
   src/__generated__/schema.all.interface.ts:
     plugins:
diff --git a/packages/examples/package.json b/packages/examples/package.json
index 5b27961..b4f1701 100644
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -24,17 +24,17 @@
     "graphql": "^15.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-relay": "^17.0.0",
-    "relay-runtime": "^17.0.0"
+    "react-relay": "^18.0.0",
+    "relay-runtime": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@graphitation/embedded-document-artefact-loader": "^0.8.0",
-    "@graphitation/graphql-codegen-typescript-typemap-plugin": "^0.1.6",
-    "@graphitation/graphql-js-tag": "^0.9.1",
+    "@graphitation/embedded-document-artefact-loader": "^0.8.5",
+    "@graphitation/graphql-codegen-typescript-typemap-plugin": "^0.1.9",
+    "@graphitation/graphql-js-tag": "^0.9.4",
     "@graphql-codegen/add": "^4.0.1",
     "@graphql-codegen/cli": "^3.2.2",
     "@graphql-codegen/typescript": "^3.0.2",
@@ -54,11 +54,12 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/react-relay": "^16.0.0",
-    "@types/relay-runtime": "^17.0.0",
+    "@types/relay-runtime": "^18.0.0",
     "esbuild-loader": "^3.0.1",
     "monorepo-scripts": "*",
     "prop-types": "15.8.1",
-    "relay-compiler": "^17.0.0",
+    "relay-compiler": "^18.0.0",
+    "relay-test-utils": "^18.0.0",
     "storybook": "^7.6.19",
     "typescript": "^5.6.0"
   },
diff --git a/packages/examples/relay.config.json b/packages/examples/relay.config.json
index f81d2a1..e8013d1 100644
--- a/packages/examples/relay.config.json
+++ b/packages/examples/relay.config.json
@@ -1,5 +1,14 @@
 {
-  "src": "./src/relay",
-  "schema": "./src/schema.graphql",
-  "language": "typescript"
+  "sources": {
+    "src/relay": "examples"
+  },
+  "projects": {
+    "examples": {
+      "language": "typescript",
+      "schema": "src/schema.graphql",
+      "schemaExtensions": [
+        "src/clientExtensions.graphql"
+      ]
+    }
+  }
 }
diff --git a/packages/examples/src/__generated__/schema.all.interface.ts b/packages/examples/src/__generated__/schema.all.interface.ts
index 766c9b1..2907794 100644
--- a/packages/examples/src/__generated__/schema.all.interface.ts
+++ b/packages/examples/src/__generated__/schema.all.interface.ts
@@ -49,7 +49,9 @@ export type MutationFeedbackLikeArgs = {
 
 export type Query = {
   __typename?: 'Query';
+  clientExtension: Maybe<Scalars['String']>;
   feedback: Feedback;
+  viewData: Maybe<ViewData>;
 };
 
 
@@ -57,6 +59,11 @@ export type QueryFeedbackArgs = {
   id: Scalars['ID'];
 };
 
+export type ViewData = {
+  __typename?: 'ViewData';
+  viewDataField: Maybe<Scalars['String']>;
+};
+
 
 
 export type ResolverTypeWrapper<T> = Promise<T> | T;
@@ -136,6 +143,7 @@ export type ResolversTypes = {
   Mutation: ResolverTypeWrapper<{}>;
   Query: ResolverTypeWrapper<{}>;
   String: ResolverTypeWrapper<Scalars['String']>;
+  ViewData: ResolverTypeWrapper<ViewData>;
 };
 
 /** Mapping between all available schema types and the resolvers parents */
@@ -149,6 +157,7 @@ export type ResolversParentTypes = {
   Mutation: {};
   Query: {};
   String: Scalars['String'];
+  ViewData: ViewData;
 };
 
 export type FeedbackResolvers<ContextType = any, ParentType = ResolversParentTypes['Feedback']> = {
@@ -173,7 +182,14 @@ export type MutationResolvers<ContextType = any, ParentType = ResolversParentTyp
 };
 
 export type QueryResolvers<ContextType = any, ParentType = ResolversParentTypes['Query']> = {
+  clientExtension: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
   feedback: Resolver<ResolversTypes['Feedback'], ParentType, ContextType, RequireFields<QueryFeedbackArgs, 'id'>>;
+  viewData: Resolver<Maybe<ResolversTypes['ViewData']>, ParentType, ContextType>;
+};
+
+export type ViewDataResolvers<ContextType = any, ParentType = ResolversParentTypes['ViewData']> = {
+  viewDataField: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
 export type Resolvers<ContextType = any> = {
@@ -182,6 +198,7 @@ export type Resolvers<ContextType = any> = {
   Message: MessageResolvers<ContextType>;
   Mutation: MutationResolvers<ContextType>;
   Query: QueryResolvers<ContextType>;
+  ViewData: ViewDataResolvers<ContextType>;
 };
 
 
@@ -195,4 +212,5 @@ export type TypeMap = {
   "Mutation": Mutation;
   "Query": Query;
   "String": Scalars["String"];
+  "ViewData": ViewData;
 };
diff --git a/packages/examples/src/clientExtensions.graphql b/packages/examples/src/clientExtensions.graphql
new file mode 100644
index 0000000..7545002
--- /dev/null
+++ b/packages/examples/src/clientExtensions.graphql
@@ -0,0 +1,7 @@
+extend type Query {
+  clientExtension: String
+  viewData: ViewData
+}
+type ViewData {
+  viewDataField: String
+}
diff --git a/packages/examples/src/relay/Feedback/__generated__/FeedbackComponent_LikeMutation.graphql.ts b/packages/examples/src/relay/Feedback/__generated__/FeedbackComponent_LikeMutation.graphql.ts
index 8555b48..ef7911c 100644
--- a/packages/examples/src/relay/Feedback/__generated__/FeedbackComponent_LikeMutation.graphql.ts
+++ b/packages/examples/src/relay/Feedback/__generated__/FeedbackComponent_LikeMutation.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<9e8cbc821d04a9dc43d1118707b7cece>>
+ * @generated SignedSource<<b34924250968ebaa8d4349b00e40d518>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,7 +8,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { ConcreteRequest, Mutation } from 'relay-runtime';
+import { ConcreteRequest } from 'relay-runtime';
 export type FeedbackLikeInput = {
   doesViewerLike: boolean;
   feedbackId: string;
diff --git a/packages/examples/src/relay/Feedback/__generated__/FeedbackContainerQuery.graphql.ts b/packages/examples/src/relay/Feedback/__generated__/FeedbackContainerQuery.graphql.ts
index ad10e53..f2de9ff 100644
--- a/packages/examples/src/relay/Feedback/__generated__/FeedbackContainerQuery.graphql.ts
+++ b/packages/examples/src/relay/Feedback/__generated__/FeedbackContainerQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<dcfbca01030f36b6904afe3081a9721c>>
+ * @generated SignedSource<<b3c24ad7c14622e7d35240faf8b6918e>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,7 +8,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { ConcreteRequest, Query } from 'relay-runtime';
+import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type FeedbackContainerQuery$variables = {
   id: string;
diff --git a/packages/examples/src/relay/Feedback/__generated__/FeedbackStoryQuery.graphql.ts b/packages/examples/src/relay/Feedback/__generated__/FeedbackStoryQuery.graphql.ts
index 2b336b1..05b4cfd 100644
--- a/packages/examples/src/relay/Feedback/__generated__/FeedbackStoryQuery.graphql.ts
+++ b/packages/examples/src/relay/Feedback/__generated__/FeedbackStoryQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<25ffc163fef147c94d952bb9a33226e3>>
+ * @generated SignedSource<<ecbf088f2f06fab1604b02511fe435f7>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,7 +8,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { ConcreteRequest, Query } from 'relay-runtime';
+import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type FeedbackStoryQuery$variables = {
   id: string;
diff --git a/packages/examples/src/relay/Feedback/__generated__/Feedback_feedbackFragment.graphql.ts b/packages/examples/src/relay/Feedback/__generated__/Feedback_feedbackFragment.graphql.ts
index 871dee5..0f01e21 100644
--- a/packages/examples/src/relay/Feedback/__generated__/Feedback_feedbackFragment.graphql.ts
+++ b/packages/examples/src/relay/Feedback/__generated__/Feedback_feedbackFragment.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<9a9e9576834b9673626fc27f4e27f924>>
+ * @generated SignedSource<<63e21ec3b051b3e4642bf81fc2a9e0e3>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,7 +8,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { Fragment, ReaderFragment } from 'relay-runtime';
+import { ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type Feedback_feedbackFragment$data = {
   readonly doesViewerLike: boolean;
diff --git a/packages/examples/src/relay/pure-relay/Feedback.stories.tsx b/packages/examples/src/relay/pure-relay/Feedback.stories.tsx
index 8ae5880..808549f 100644
--- a/packages/examples/src/relay/pure-relay/Feedback.stories.tsx
+++ b/packages/examples/src/relay/pure-relay/Feedback.stories.tsx
@@ -2,13 +2,13 @@ import { graphql } from "react-relay";
 import {
   getNovaDecorator,
   getNovaEnvironmentForStory,
-  MockPayloadGenerator as PayloadGenerator,
   type WithNovaEnvironment,
   EventingProvider,
   getOperationName,
   getOperationType,
   type StoryObjWithoutFragmentRefs,
 } from "@nova/react-test-utils/relay";
+import { MockPayloadGenerator } from "relay-test-utils";
 import type { Meta } from "@storybook/react";
 import { userEvent, waitFor, within, expect } from "@storybook/test";
 import type { TypeMap } from "../../__generated__/schema.all.interface";
@@ -21,12 +21,23 @@ import { RecordSource, Store } from "relay-runtime";
 
 const schema = getSchema();
 
-const MockPayloadGenerator = new PayloadGenerator(schema);
-
 const novaDecorator = getNovaDecorator(schema, {
   getEnvironmentOptions: () => ({
     store: new Store(new RecordSource()),
   }),
+  // We add this to verify scenario of using relay's MockPayloadGenerator
+  generateFunction: (operation, mockResolvers) => {
+    const result = MockPayloadGenerator.generateWithDefer(
+      operation,
+      mockResolvers ?? null,
+      {
+        mockClientData: true,
+        generateDeferredPayload: true,
+      },
+    );
+
+    return result;
+  },
 });
 
 const meta = {
@@ -39,11 +50,20 @@ const meta = {
           feedback(id: $id) {
             ...Feedback_feedbackRelayFragment
           }
+          viewData {
+            ...Feedback_viewDataRelayFragment
+          }
         }
       `,
       variables: { id: "42" },
       referenceEntries: {
         feedback: (data) => data?.feedback,
+        viewData: (data) => data?.viewData,
+      },
+      resolvers: {
+        ViewData: () => ({
+          viewDataField: "View data field",
+        }),
       },
     },
   } satisfies WithNovaEnvironment<FeedbackStoryRelayQuery, TypeMap>,
@@ -106,7 +126,7 @@ export const Like: Story = {
       const operation = mock.getMostRecentOperation();
       await expect(operation).toBeDefined();
     });
-    await mock.resolveMostRecentOperation((operation) => {
+    mock.resolveMostRecentOperation((operation) => {
       return MockPayloadGenerator.generate(operation, likeResolvers);
     });
   },
@@ -127,7 +147,7 @@ export const ArtificialFailureToShowcaseDecoratorBehaviorInCaseOfADevCausedError
         const operation = mock.getMostRecentOperation();
         await expect(operation).toBeDefined();
       });
-      await mock.rejectMostRecentOperation(new Error("Query failed"));
+      mock.rejectMostRecentOperation(new Error("Query failed"));
     },
   };
 
@@ -152,10 +172,14 @@ export const LikeFailure: Story = {
     const operationType = getOperationType(operation);
     expect(operationName).toEqual("FeedbackStoryRelayQuery");
     expect(operationType).toEqual("query");
-    await mock.resolveMostRecentOperation((operation) => {
-      return MockPayloadGenerator.generate(operation, {
-        Feedback: () => sampleFeedback,
-      });
+    mock.resolveMostRecentOperation((operation) => {
+      return MockPayloadGenerator.generate(
+        operation,
+        {
+          Feedback: () => sampleFeedback,
+        },
+        { mockClientData: true },
+      );
     });
     const likeButton = await container.findByRole("button", { name: "Like" });
     userEvent.click(likeButton);
@@ -168,7 +192,7 @@ export const LikeFailure: Story = {
     const nextOperationType = getOperationType(nextOperation);
     expect(nextOperationName).toEqual("FeedbackComponent_RelayLikeMutation");
     expect(nextOperationType).toEqual("mutation");
-    await mock.rejectMostRecentOperation(new Error("Like failed"));
+    mock.rejectMostRecentOperation(new Error("Like failed"));
     await container.findByText("Something went wrong");
   },
 };
diff --git a/packages/examples/src/relay/pure-relay/Feedback.tsx b/packages/examples/src/relay/pure-relay/Feedback.tsx
index 8113332..5cea7a6 100644
--- a/packages/examples/src/relay/pure-relay/Feedback.tsx
+++ b/packages/examples/src/relay/pure-relay/Feedback.tsx
@@ -6,9 +6,11 @@ import {
   useOnDeleteFeedback,
   useFeedbackTelemetry,
 } from "../../events/helpers";
+import type { Feedback_viewDataRelayFragment$key } from "./__generated__/Feedback_viewDataRelayFragment.graphql";
 
 type Props = {
   feedback: Feedback_feedbackRelayFragment$key;
+  viewData: Feedback_viewDataRelayFragment$key;
 };
 
 export const Feedback_feedbackRelayFragment = graphql`
@@ -21,9 +23,16 @@ export const Feedback_feedbackRelayFragment = graphql`
   }
 `;
 
+export const Feedback_viewDataRelayFragment = graphql`
+  fragment Feedback_viewDataRelayFragment on ViewData {
+    viewDataField
+  }
+`;
+
 export const FeedbackComponent = (props: Props) => {
   const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
   const feedback = useFragment(Feedback_feedbackRelayFragment, props.feedback);
+  const viewData = useFragment(Feedback_viewDataRelayFragment, props.viewData);
   const [like, isPending] = useMutation<FeedbackComponent_RelayLikeMutation>(
     graphql`
       mutation FeedbackComponent_RelayLikeMutation($input: FeedbackLikeInput!) {
@@ -63,6 +72,7 @@ export const FeedbackComponent = (props: Props) => {
         <div style={{ color: "red" }}>{errorMessage}</div>
       )}
       Feedback: {feedback.message.text}
+      <div>{viewData.viewDataField}</div>
       <button
         id="likeButton"
         disabled={isPending}
diff --git a/packages/examples/src/relay/pure-relay/__generated__/FeedbackComponent_RelayLikeMutation.graphql.ts b/packages/examples/src/relay/pure-relay/__generated__/FeedbackComponent_RelayLikeMutation.graphql.ts
index 95a6d97..3a97bf1 100644
--- a/packages/examples/src/relay/pure-relay/__generated__/FeedbackComponent_RelayLikeMutation.graphql.ts
+++ b/packages/examples/src/relay/pure-relay/__generated__/FeedbackComponent_RelayLikeMutation.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<ec9f51ebd08605a5f52af517498c42f9>>
+ * @generated SignedSource<<1c15be7b18f58b4ef9382754b9ba1ad7>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,7 +8,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { ConcreteRequest, Mutation } from 'relay-runtime';
+import { ConcreteRequest } from 'relay-runtime';
 export type FeedbackLikeInput = {
   doesViewerLike: boolean;
   feedbackId: string;
diff --git a/packages/examples/src/relay/pure-relay/__generated__/FeedbackStoryRelayQuery.graphql.ts b/packages/examples/src/relay/pure-relay/__generated__/FeedbackStoryRelayQuery.graphql.ts
index b58b020..3366d9a 100644
--- a/packages/examples/src/relay/pure-relay/__generated__/FeedbackStoryRelayQuery.graphql.ts
+++ b/packages/examples/src/relay/pure-relay/__generated__/FeedbackStoryRelayQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<8ca401641ed05d5f1f3a338005137520>>
+ * @generated SignedSource<<050a0ed2102143b53c8840d20b61987f>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,7 +8,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { ConcreteRequest, Query } from 'relay-runtime';
+import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type FeedbackStoryRelayQuery$variables = {
   id: string;
@@ -17,6 +17,9 @@ export type FeedbackStoryRelayQuery$data = {
   readonly feedback: {
     readonly " $fragmentSpreads": FragmentRefs<"Feedback_feedbackRelayFragment">;
   };
+  readonly viewData: {
+    readonly " $fragmentSpreads": FragmentRefs<"Feedback_viewDataRelayFragment">;
+  } | null | undefined;
 };
 export type FeedbackStoryRelayQuery = {
   response: FeedbackStoryRelayQuery$data;
@@ -60,6 +63,27 @@ return {
           }
         ],
         "storageKey": null
+      },
+      {
+        "kind": "ClientExtension",
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "ViewData",
+            "kind": "LinkedField",
+            "name": "viewData",
+            "plural": false,
+            "selections": [
+              {
+                "args": null,
+                "kind": "FragmentSpread",
+                "name": "Feedback_viewDataRelayFragment"
+              }
+            ],
+            "storageKey": null
+          }
+        ]
       }
     ],
     "type": "Query",
@@ -113,6 +137,29 @@ return {
           }
         ],
         "storageKey": null
+      },
+      {
+        "kind": "ClientExtension",
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "ViewData",
+            "kind": "LinkedField",
+            "name": "viewData",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "viewDataField",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ]
       }
     ]
   },
@@ -150,6 +197,18 @@ return {
           "nullable": false,
           "plural": false,
           "type": "String"
+        },
+        "viewData": {
+          "enumValues": null,
+          "nullable": true,
+          "plural": false,
+          "type": "ViewData"
+        },
+        "viewData.viewDataField": {
+          "enumValues": null,
+          "nullable": true,
+          "plural": false,
+          "type": "String"
         }
       }
     },
@@ -160,6 +219,6 @@ return {
 };
 })();
 
-(node as any).hash = "6089c0fe5f98406204254d9b33a6e061";
+(node as any).hash = "87e89c4f3d23c32eb214ba7503cdd52d";
 
 export default node;
diff --git a/packages/examples/src/relay/pure-relay/__generated__/Feedback_feedbackRelayFragment.graphql.ts b/packages/examples/src/relay/pure-relay/__generated__/Feedback_feedbackRelayFragment.graphql.ts
index b21abd1..9db4616 100644
--- a/packages/examples/src/relay/pure-relay/__generated__/Feedback_feedbackRelayFragment.graphql.ts
+++ b/packages/examples/src/relay/pure-relay/__generated__/Feedback_feedbackRelayFragment.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<857e369af95fed51d17a8de7c72bbc62>>
+ * @generated SignedSource<<c9f752dace03edbf286b7b82e9a301af>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,7 +8,7 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { Fragment, ReaderFragment } from 'relay-runtime';
+import { ReaderFragment } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type Feedback_feedbackRelayFragment$data = {
   readonly doesViewerLike: boolean;
diff --git a/packages/examples/src/relay/pure-relay/__generated__/Feedback_viewDataRelayFragment.graphql.ts b/packages/examples/src/relay/pure-relay/__generated__/Feedback_viewDataRelayFragment.graphql.ts
new file mode 100644
index 0000000..ffa7ba1
--- /dev/null
+++ b/packages/examples/src/relay/pure-relay/__generated__/Feedback_viewDataRelayFragment.graphql.ts
@@ -0,0 +1,47 @@
+/**
+ * @generated SignedSource<<a3830a19184e1923d46ce20a8dd79776>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type Feedback_viewDataRelayFragment$data = {
+  readonly viewDataField: string | null | undefined;
+  readonly " $fragmentType": "Feedback_viewDataRelayFragment";
+};
+export type Feedback_viewDataRelayFragment$key = {
+  readonly " $data"?: Feedback_viewDataRelayFragment$data;
+  readonly " $fragmentSpreads": FragmentRefs<"Feedback_viewDataRelayFragment">;
+};
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "Feedback_viewDataRelayFragment",
+  "selections": [
+    {
+      "kind": "ClientExtension",
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "viewDataField",
+          "storageKey": null
+        }
+      ]
+    }
+  ],
+  "type": "ViewData",
+  "abstractKey": null
+};
+
+(node as any).hash = "d35ae7bb2414a109a9019473f35690c9";
+
+export default node;
diff --git a/packages/nova-react-test-utils/README.md b/packages/nova-react-test-utils/README.md
index c442530..2da54d7 100644
--- a/packages/nova-react-test-utils/README.md
+++ b/packages/nova-react-test-utils/README.md
@@ -277,7 +277,60 @@ const meta = {
 } satisfies Meta<typeof FeedbackContainer>;
 ```
 
-The second parameter of `getNovaDecorator` is an `options` object of type `Partial<EnvironmentConfig>` from `relay-test-utils`.
+The second parameter of `getNovaDecorator` is an `getEnvironmentOptions` callback that should return object of type `Partial<EnvironmentConfig>` from `relay-test-utils`.
+
+#### Can I swap out the graphitation MockPayloadGenerator for something else?
+
+Yes, in `getNovaDecorator` in `options` param you can supply a `generateFunction` which will be used to
+generate data instead of the `MockPayloadGenerator`. Use this if you want to use the
+`MockPayloadGenerator` supplied by `relay-test-utils`.
+
+#### (Pure relay or Nova with Relay) How can I make sure the mock data is generated for client extensions?
+
+The current default generator doesn't support client extensions. However, you can use the `generateFunction` option to provide your own generator. Here is an example of how you can use the `MockPayloadGenerator` from `relay-test-utils` to generate data for client extensions:
+
+```tsx
+import { MockPayloadGenerator } from "relay-test-utils";
+import { getNovaDecorator } from "@nova/react-test-utils/relay";
+
+const novaDecorator = getNovaDecorator(schema, {
+  generateFunction: (operation, mockResolvers) => {
+    const result = MockPayloadGenerator.generate(
+      operation,
+      mockResolvers ?? null,
+      {
+        mockClientData: true, // this makes sure data for client extensions is generated
+      },
+    );
+
+    return result;
+  },
+});
+```
+
+#### (Pure relay or Nova with Relay) How can I make sure the mock data is generated with deferred payloads?
+
+The current default generator doesn't return deferred payloads. However, similarly as in example above you can use the `generateFunction` option to provide your own generator which does.
+
+```tsx
+import { MockPayloadGenerator } from "relay-test-utils";
+import { getNovaDecorator } from "@nova/react-test-utils/relay";
+
+const novaDecorator = getNovaDecorator(schema, {
+  generateFunction: (operation, mockResolvers) => {
+    const result = MockPayloadGenerator.generateWithDefer(
+      operation,
+      mockResolvers ?? null,
+      {
+        mockClientData: true,
+        generateDeferredPayload: true, // this makes sure mock data is array of deferred payloads, not a single response
+      },
+    );
+
+    return result;
+  },
+});
+```
 
 #### How can I mock query/mutation/subscription?
 
@@ -335,9 +388,3 @@ it("should show an error if the like button fails", async () => {
 ```
 
 The `prepareStoryContextForTest` is needed to make sure the context passed to `play` function during unit tests execution contains the `novaEnvironment`.
-
-#### Can I swap out the graphitation MockPayloadGenerator for something else?
-
-Yes, in `getNovaDecorator` in `options` param you can supply a `generateFunction` which will be used to
-generate data instead of the `MockPayloadGenerator`. Use this if you want to use the
-`MockPayloadGenerator` supplied by `relay-test-utils`.
diff --git a/packages/nova-react-test-utils/package.json b/packages/nova-react-test-utils/package.json
index 466834f..425e762 100644
--- a/packages/nova-react-test-utils/package.json
+++ b/packages/nova-react-test-utils/package.json
@@ -17,12 +17,13 @@
     "@storybook/types": ">7.6",
     "react": "^17 || ^18",
     "@apollo/client": "^3.4",
-    "@graphitation/apollo-react-relay-duct-tape": "^1.2.0",
-    "@graphitation/apollo-mock-client": "^0.11.4",
+    "@graphitation/apollo-react-relay-duct-tape": "^1.3.0",
+    "@graphitation/apollo-mock-client": "^0.11.9",
     "react-relay": ">16",
     "relay-runtime": ">16",
     "relay-test-utils": ">16",
-    "@types/react-relay": ">16"
+    "@types/react-relay": ">16",
+    "@types/relay-test-utils": ">16"
   },
   "peerDependenciesMeta": {
     "@apollo/client": {
@@ -59,8 +60,8 @@
     }
   },
   "dependencies": {
-    "@graphitation/graphql-js-operation-payload-generator": "^0.12.5",
-    "@graphitation/graphql-js-tag": "^0.9.1",
+    "@graphitation/graphql-js-operation-payload-generator": "^0.12.9",
+    "@graphitation/graphql-js-tag": "^0.9.4",
     "@jest/types": ">27.0.0",
     "@nova/react": "^2.6.3",
     "@nova/types": "^1.5.1",
@@ -73,8 +74,8 @@
   },
   "devDependencies": {
     "@apollo/client": "^3.4.15",
-    "@graphitation/apollo-react-relay-duct-tape": "^1.2.0",
-    "@graphitation/apollo-mock-client": "^0.11.4",
+    "@graphitation/apollo-react-relay-duct-tape": "^1.3.0",
+    "@graphitation/apollo-mock-client": "^0.11.9",
     "@storybook/addon-actions": "^7.6.19",
     "@storybook/preview-api": "^7.6.19",
     "@storybook/react": "^7.6.19",
@@ -82,13 +83,13 @@
     "@testing-library/react": "^15.0.0",
     "@types/jest": "^29.2.0",
     "@types/react-relay": "^16.0.0",
-    "@types/relay-test-utils": "^17.0.0",
+    "@types/relay-test-utils": "^18.0.0",
     "@types/react-test-renderer": "^18.3.0",
     "monorepo-scripts": "*",
     "react": "^18.3.1",
-    "react-relay": "^17.0.0",
-    "relay-runtime": "^17.0.0",
-    "relay-test-utils": "^17.0.0",
+    "react-relay": "^18.0.0",
+    "relay-runtime": "^18.0.0",
+    "relay-test-utils": "^18.0.0",
     "react-test-renderer": "^18.3.1"
   },
   "repository": {
diff --git a/packages/nova-react-test-utils/src/relay/storybook-nova-decorator-relay.tsx b/packages/nova-react-test-utils/src/relay/storybook-nova-decorator-relay.tsx
index c3b0008..feed96e 100644
--- a/packages/nova-react-test-utils/src/relay/storybook-nova-decorator-relay.tsx
+++ b/packages/nova-react-test-utils/src/relay/storybook-nova-decorator-relay.tsx
@@ -9,15 +9,34 @@ import { novaGraphql } from "./nova-relay-graphql";
 import { RelayMockPayloadGenerator } from "./test-utils";
 import * as React from "react";
 import { RelayEnvironmentProvider } from "react-relay";
-import { createMockEnvironment } from "relay-test-utils";
+import {
+  createMockEnvironment,
+  type MockPayloadGenerator,
+} from "relay-test-utils";
 import type { GraphQLSchema } from "graphql";
 import type { ReactRenderer } from "@storybook/react";
 import type { PlayFunctionContext } from "@storybook/types";
 import type { NovaMockEnvironment } from "./nova-mock-environment";
 import type { EnvironmentConfig } from "relay-runtime";
 
+// We need this as `generateWithDefer` is overloaded and we want to get most relaxed return type
+type OverloadedReturnType<T> = 
+    T extends { (...args: any[]) : infer R; (...args: any[]) : infer R } ? R  :
+    T extends (...args: any[]) => infer R ? R : any
+
+type GraphitationGenerateArgs = Parameters<
+  RelayMockPayloadGenerator["generate"]
+>;
+
+// We put very relaxed constraints on the return type here, because we want users to be able to use
+// Relay's payload generator for example for having returned deferred payloads or mocking client extensions,
+// which doesn't work with graphitation's payload generator.
+type RelayGenerateReturn =
+  | ReturnType<(typeof MockPayloadGenerator)["generate"]>
+  | OverloadedReturnType<(typeof MockPayloadGenerator)["generateWithDefer"]>;
+
 type Options = { getEnvironmentOptions?: () => Partial<EnvironmentConfig> } & {
-  generateFunction?: typeof RelayMockPayloadGenerator.prototype.generate;
+  generateFunction?: (...args: GraphitationGenerateArgs) => RelayGenerateReturn;
 };
 
 export const getNovaRelayDecorator: (
diff --git a/packages/nova-react-test-utils/src/relay/test-utils.tsx b/packages/nova-react-test-utils/src/relay/test-utils.tsx
index a3d70d7..118185f 100644
--- a/packages/nova-react-test-utils/src/relay/test-utils.tsx
+++ b/packages/nova-react-test-utils/src/relay/test-utils.tsx
@@ -19,7 +19,7 @@ export class RelayMockPayloadGenerator {
 
   public generate(
     operation: RelayOperationDescriptor,
-    mockResolvers?: MockResolvers,
+    mockResolvers?: MockResolvers | null,
     generateId?: () => number,
   ): ReturnType<typeof payloadGenerator> {
     if (!operation.request.node.params.text) {
diff --git a/packages/nova-react/package.json b/packages/nova-react/package.json
index 21094f4..2fb680b 100644
--- a/packages/nova-react/package.json
+++ b/packages/nova-react/package.json
@@ -13,7 +13,7 @@
   "peerDependencies": {
     "react": "^17.0.2 || ^18",
     "@types/react": "^17.0.2 || ^18",
-    "@graphitation/graphql-js-tag": "^0.9.1"
+    "@graphitation/graphql-js-tag": "^0.9.4"
   },
   "dependencies": {
     "@nova/types": "^1.5.1",
@@ -21,7 +21,7 @@
     "invariant": "^2.2.4"
   },
   "devDependencies": {
-    "@graphitation/graphql-js-tag": "^0.9.1",
+    "@graphitation/graphql-js-tag": "^0.9.4",
     "@testing-library/react": "^15.0.0",
     "@types/invariant": "^2.2.35",
     "@types/jest": "^29.2.0",
diff --git a/scripts/package.json b/scripts/package.json
index 962ecbc..17d9495 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -8,7 +8,7 @@
     "monorepo-scripts": "bin/monorepo-scripts.js"
   },
   "devDependencies": {
-    "@graphitation/embedded-document-artefact-loader": "^0.8.0",
+    "@graphitation/embedded-document-artefact-loader": "^0.8.5",
     "@graphql-tools/jest-transform": "^1.2.2",
     "@testing-library/react": "^15.0.0",
     "@types/node": "^16.11.6",
diff --git a/yarn.lock b/yarn.lock
index ad3013f..175a2e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1121,10 +1121,10 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
-  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.25.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
+  integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -1475,48 +1475,49 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
   integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
 
-"@graphitation/apollo-mock-client@^0.11.4":
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/@graphitation/apollo-mock-client/-/apollo-mock-client-0.11.4.tgz#0161072e0c2a1530b98e638c75b8965a74123dd7"
-  integrity sha512-Hjm8vdC7osN8ub4FaiqDibubkUIgfirOqEwukJ45v9+IZoNs+1moCFSGOKis9Q7uLRqbPWEEzW0O5qI/dTkB+g==
+"@graphitation/apollo-mock-client@^0.11.9":
+  version "0.11.9"
+  resolved "https://registry.yarnpkg.com/@graphitation/apollo-mock-client/-/apollo-mock-client-0.11.9.tgz#4c4d49312fd39109ac52cf426b64616c8f14e736"
+  integrity sha512-fvTYAhaH+xVcOtP2Ozehqwm2iZoSWBV84ig57OB2n/K8jR1uX7A3q8IHOrVH7D4FvakGqWNX0UC8AZxAzbey/A==
   dependencies:
     invariant "^2.2.4"
 
-"@graphitation/apollo-react-relay-duct-tape@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@graphitation/apollo-react-relay-duct-tape/-/apollo-react-relay-duct-tape-1.2.0.tgz#38835312de42cdab593ad13847a6fd5c73c7bc5a"
-  integrity sha512-FMPd5vG2XIeC3G3MvZU0/LgbnFfWydnRXO5iKIPwp51SuPe4n3UxZLqu2N4OzqsQe0Af7nZw9mgVNbacvZGutQ==
+"@graphitation/apollo-react-relay-duct-tape@^1.3.0":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@graphitation/apollo-react-relay-duct-tape/-/apollo-react-relay-duct-tape-1.3.2.tgz#dfab269cd4de961d72d09b337813493b41b1fdc8"
+  integrity sha512-vElGIdxWziW4C+u7AwsT6u0U3aWEyJxWi76z6lhVrCqLTl8+CmrmHINHUnyC/PSgmpHv2QPjC+U2VxLph/6W4Q==
   dependencies:
     invariant "^2.2.4"
     lodash "^4.17.15"
 
-"@graphitation/embedded-document-artefact-loader@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@graphitation/embedded-document-artefact-loader/-/embedded-document-artefact-loader-0.8.0.tgz#437bbcea273e423625efce47349fdcd7fda245e6"
-  integrity sha512-R1BkXsl8Mm5bCQFcAPna6AQh2KGsWnqc2OwowVb9oObi6HFSooEY15RMXmttOGE/bsYQWgFlV/Lg9bOTPFZPhQ==
+"@graphitation/embedded-document-artefact-loader@^0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@graphitation/embedded-document-artefact-loader/-/embedded-document-artefact-loader-0.8.5.tgz#435f4103c99d2ba7aaf6155b10bfa2bd8adb05e2"
+  integrity sha512-cq55AyXn+gQevSUZVYzMNqMiuFp90dbjOf5EQqx7g56ZthfsjZIW8v/oD8YLB1sJAhjE77gmdEMRfsAcEIJk8Q==
   dependencies:
-    source-map-js "^1.0.2"
+    source-map-js "^1.2.1"
 
-"@graphitation/graphql-codegen-typescript-typemap-plugin@^0.1.6":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@graphitation/graphql-codegen-typescript-typemap-plugin/-/graphql-codegen-typescript-typemap-plugin-0.1.6.tgz#ff71d083943b5f892b05d73de5272f53018b7c75"
-  integrity sha512-FkQq+jdXTxoVUMYiz+ppWf1+nj5SrShpMcf1dM33Uw6WnzmlnquyOLnUUe/xiE5eVRX8kzG5vyOjDOSERey8/A==
+"@graphitation/graphql-codegen-typescript-typemap-plugin@^0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@graphitation/graphql-codegen-typescript-typemap-plugin/-/graphql-codegen-typescript-typemap-plugin-0.1.9.tgz#41e7d7212d5a7847f4149a9c89c614fb4612b26b"
+  integrity sha512-FI8wyg+QbhlKp2lds6LuvYp947pwNdAS9fjCl8CXKJaaFb2UPzuFJigq0VeZceoC8Yyr9QcX9DzHPPBDv0B5Tg==
   dependencies:
     change-case-all "1.0.14"
 
-"@graphitation/graphql-js-operation-payload-generator@^0.12.5":
-  version "0.12.5"
-  resolved "https://registry.yarnpkg.com/@graphitation/graphql-js-operation-payload-generator/-/graphql-js-operation-payload-generator-0.12.5.tgz#784caa384ee090f4b4bbaba0bc615223c0d800d0"
-  integrity sha512-3vGpWS9k9ZOfmpqnurgf+RZPWmKE6n6541TsgWwEgTIv8lKu3OBxQwdWWMziad52vFO55DFr157jn2vnT9/eIA==
+"@graphitation/graphql-js-operation-payload-generator@^0.12.9":
+  version "0.12.9"
+  resolved "https://registry.yarnpkg.com/@graphitation/graphql-js-operation-payload-generator/-/graphql-js-operation-payload-generator-0.12.9.tgz#1f4dbac3a34074646fbfd998889353f30daa1840"
+  integrity sha512-yWONTbNbGPZrChOekADiDw920oNqcnghPHJ/XZhvfgzmxmTX3a9Mfh5Tjr7LIIhrRPtjGwXOgV2DepMdkgTV2w==
   dependencies:
+    "@types/relay-test-utils" ">=17.0.0"
     deepmerge "^4.2.2"
     graphql "^15.0.0"
     invariant "^2.2.4"
 
-"@graphitation/graphql-js-tag@^0.9.1":
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/@graphitation/graphql-js-tag/-/graphql-js-tag-0.9.1.tgz#e40bef3a58ce553f1f40eab262e5ab263d5225bc"
-  integrity sha512-qBV+2JGFRtASwM4Tnsfd6WkMSdvKJjm4IKeyUp7gNCxvl12cumXVbR7QxRY2qLRZHk6Pd2LZGqqS6iJAn19/nQ==
+"@graphitation/graphql-js-tag@^0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@graphitation/graphql-js-tag/-/graphql-js-tag-0.9.4.tgz#f0512c0c6014e652bf9ed0912670bb751fa08b57"
+  integrity sha512-MlAlNZNP1WCKoD2FGeSDULnnBILfn/gdtbITe33fjQNsqgPyfcSaCTdQrWLkVuflwpZEhbb0AP1iudXiN4jG4A==
   dependencies:
     invariant "^2.0.0"
 
@@ -3856,15 +3857,15 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/relay-runtime@*", "@types/relay-runtime@>16", "@types/relay-runtime@^17.0.0":
-  version "17.0.4"
-  resolved "https://registry.yarnpkg.com/@types/relay-runtime/-/relay-runtime-17.0.4.tgz#428526fc3e6dfb6e0a5730c38ad521cb1eea189b"
-  integrity sha512-fB77br4lXlBYM/HpI6VI6KCrj5pw0LiAnkZOkffjirNYso+dzXGWkeIm0G0MGszD8WY1et+r1Uj2TA6rscBXNQ==
+"@types/relay-runtime@*", "@types/relay-runtime@>16", "@types/relay-runtime@^18.0.0":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@types/relay-runtime/-/relay-runtime-18.0.0.tgz#d48dd4552ab480281a679c47d98fc02e304460f6"
+  integrity sha512-LK9NAw/WsdiMtQU+SxnhFd2bA6HfRsjniAENdznA8BKbGGvcMi0K8Gyq/XtoNmCMR9jxzO9rqFTksKkiXgsGYg==
 
-"@types/relay-test-utils@^17.0.0":
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/@types/relay-test-utils/-/relay-test-utils-17.0.0.tgz#a427470f26f808b4962c8d0a66c2d9af25db156e"
-  integrity sha512-q+Nq3RpJ4fKcRfJQTK/IvKg4cmrJkbboR8V4hxlEW5MkMTNqGCOJ4xlKagSTsLycovw3Eea6fNmmBSaMlKRwCw==
+"@types/relay-test-utils@>=17.0.0", "@types/relay-test-utils@^18.0.0":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@types/relay-test-utils/-/relay-test-utils-18.0.0.tgz#a3d86503bc6d27c039e721514c78259541658f23"
+  integrity sha512-sg++buiunZkj0MkL1/Q6w4p19ut3USC5BQnWJ1D4Bp4pNOrck4nhVDIyklm/ilVyM0wCbvROa5wL+nsYVo4Frw==
   dependencies:
     "@types/react" "*"
     "@types/react-relay" "*"
@@ -9682,16 +9683,16 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
   integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
 
-react-relay@^17.0.0:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/react-relay/-/react-relay-17.0.0.tgz#1f8b6aefaa73b8af8378300d419289a57a6f94c9"
-  integrity sha512-Kn0CMiKZtWc+EisFPmzuZ53RtDeLlJO+EUVJwqxNkOs5g1jDjVi1v+k48kHeTyim2X43Rr0S2aeailllci5SgQ==
+react-relay@^18.0.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-relay/-/react-relay-18.1.0.tgz#fd19a6b786c251f4005423403d67cc3d5cc42c42"
+  integrity sha512-kqRbWid1A+B5HyvS05zwQacBhgWbIAlclTOO4CEWTwq0Sz00rZP1S9Bfcrl0ViImNKZHNa8+2I27409v9Sw1bQ==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.25.0"
     fbjs "^3.0.2"
     invariant "^2.2.4"
     nullthrows "^1.1.1"
-    relay-runtime "17.0.0"
+    relay-runtime "18.1.0"
 
 react-remove-scroll-bar@^2.3.3:
   version "2.3.6"
@@ -9907,10 +9908,10 @@ relay-compiler@^12.0.0:
     signedsource "^1.0.0"
     yargs "^15.3.1"
 
-relay-compiler@^17.0.0:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/relay-compiler/-/relay-compiler-17.0.0.tgz#5013e83267f45d78e24232ae7da90ed5ad3c1116"
-  integrity sha512-U2e/R0o40HJOQ13pwkvToqWqk6J3ASMyHmcxixVMZKfcwcpsTTOiKob215ZRh+4bqPwkNy97+V9CuzJ5hJmGtw==
+relay-compiler@^18.0.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/relay-compiler/-/relay-compiler-18.1.0.tgz#ae6f82a3c967d6e2bb35c4e7971acae0b6a36e47"
+  integrity sha512-DGWIORIij0TIys/Xd5W/iToqTv7UcN6fqCPDqwYhLnfU7ukdK8rpk7f6RCYvhyZG71e7a1b3TLGOQY8A3XE3yg==
 
 relay-runtime@12.0.0:
   version "12.0.0"
@@ -9921,24 +9922,24 @@ relay-runtime@12.0.0:
     fbjs "^3.0.0"
     invariant "^2.2.4"
 
-relay-runtime@17.0.0, relay-runtime@^17.0.0:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/relay-runtime/-/relay-runtime-17.0.0.tgz#771084ea3b44f2f1eb578da861511a5558c4e07b"
-  integrity sha512-7b2R3G3DP7VHq7/1ltwQfYn3KkTHIB2NNt3KijIZoNQ73avwpOXBEL0MelSXwq8L+K8lcgAW5VAT7o0LUhnJPQ==
+relay-runtime@18.1.0, relay-runtime@^18.0.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/relay-runtime/-/relay-runtime-18.1.0.tgz#62f03669e70d499b6b7d688fa61780b312843bf9"
+  integrity sha512-C3Ct6mty9ZD93KnzHLP4mFw9T3zqPL5VwFaNPRvVgdJYSwQT2dfzWz1336fWwMgAXIQGZIqIjedeamjy6P4ZkA==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.25.0"
     fbjs "^3.0.2"
     invariant "^2.2.4"
 
-relay-test-utils@^17.0.0:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/relay-test-utils/-/relay-test-utils-17.0.0.tgz#898a9bae9614a8b641eff04e597e4637322bd94f"
-  integrity sha512-u6mv7P1bmMP1Ex5uxSaUu0pJMXEs/0c8Y3LPHyfPTQ9LghMd6OtPP/45C2Z8vczMxhDIZivQM+8KwrjC25CwEg==
+relay-test-utils@^18.0.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/relay-test-utils/-/relay-test-utils-18.1.0.tgz#3fcfcc3af13ffc9dc854d373934e32a30f0212b4"
+  integrity sha512-gm0mnVsZq5vyRerGI0DQJDKAVBjuQJUPCHAtc1DQDjmUG/9xxadmCidCCqzjPBFyhYqj3kPKC86yJIMNpnpt0g==
   dependencies:
-    "@babel/runtime" "^7.0.0"
+    "@babel/runtime" "^7.25.0"
     fbjs "^3.0.2"
     invariant "^2.2.4"
-    relay-runtime "17.0.0"
+    relay-runtime "18.1.0"
 
 remark-external-links@^8.0.0:
   version "8.0.0"
@@ -10351,10 +10352,10 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+source-map-js@^1.0.2, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 source-map-support@0.5.13:
   version "0.5.13"