fix(nova-react-test-utils): bump relay, relax generate types in relay case, add example and docs for working with client extensions

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@nova-react-2428c3ea-ce99-4fe4-aca6-eda0689d53a3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bump graphitation packages",
+  "packageName": "@nova/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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:

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"
   },

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"
+      ]
+    }
+  }
 }

packages/examples/src/clientExtensions.graphql

@@ -0,0 +1,7 @@
+extend type Query {
+  clientExtension: String
+  viewData: ViewData
+}
+type ViewData {
+  viewDataField: String
+}

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");
   },
 };

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}