BA: improve relay mocks

packages/components/.storybook/decorators/withProviders.tsx

@@ -17,21 +17,15 @@ const withProviders = (Story: StoryFn, context: StoryContext) => {
   // TODO: registering a few tailwind classess (used by @baseapp-frontend/design-system components), need to figure out why the @baseapp-frontend/components storybook are not including it correctly
   // pb-3 px-3 w-full rounded-md bg-background-neutral px-2 py-1
   const relayMockEnvironment = createTestEnvironment()
-  const { environment, queueOperationResolver, resolveMostRecentOperation } = relayMockEnvironment
+  const { environment, queueOperationResolver } = relayMockEnvironment
 
   context.parameters.relayMockEnvironment = relayMockEnvironment
 
+  const queryName = context.parameters.queryName || undefined
   const mockResolvers = context.parameters.mockResolvers || undefined
   const mockData = context.parameters.mockData || {}
 
-  useEffect(() => {
-    if (!!mockResolvers) {
-      queueOperationResolver(mockResolvers)
-    }
-    if (mockData) {
-      resolveMostRecentOperation({ mockResolvers, data: mockData })
-    }
-  }, [mockData, resolveMostRecentOperation, queueOperationResolver, mockResolvers])
+  queueOperationResolver({ mockResolvers, data: mockData, queryName })
 
   return (
     <JotaiProvider>

packages/components/CHANGELOG.md

@@ -1,10 +1,18 @@
 # @baseapp-frontend/components
 
+## 0.0.30
+
+### Patch Changes
+
+- Adapt Storybook's withProviders to use only `queueOperationResolver`.
+- Updated dependencies
+  - @baseapp-frontend/graphql@1.1.13
+
 ## 0.0.29
 
 ### Patch Changes
 
-- Fixed RoomListSubscription connection and added connection to CreateChatRoom mutation 
+- Fixed RoomListSubscription connection and added connection to CreateChatRoom mutation
 - Moved useRoomListSubscription hook to ChatRoom on baseapp-frontend-template
 - Removed unused fields on RoomsListFragment and RoomListSubscription
 

packages/components/modules/navigations/Header/AccountMenu/AccountPopover/__storybook__/stories.tsx

@@ -34,7 +34,7 @@ export default {
         typeof createTestEnvironment
       >
 
-      queueOperationResolver(mockResolvers)
+      queueOperationResolver({ mockResolvers })
 
       return <Story />
     },

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/graphql/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/graphql
 
+## 1.1.13
+
+### Patch Changes
+
+- Adapt `queueOperationResolver` to deal with resolvers or data mocks.
+
 ## 1.1.12
 
 ### Patch Changes

packages/graphql/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/graphql",
   "description": "GraphQL configurations and utilities",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/graphql/utils/createTestEnvironment/index.ts

@@ -1,7 +1,6 @@
 import { MockPayloadGenerator, createMockEnvironment } from 'relay-test-utils'
-import { MockResolvers } from 'relay-test-utils/lib/RelayMockPayloadGenerator'
 
-import { ResolveMostRecentOperationParams } from './types'
+import { QueueOperationResolverParams, ResolveMostRecentOperationParams } from './types'
 
 const createTestEnvironment = () => {
   const environment = createMockEnvironment()
@@ -33,12 +32,31 @@
     }
   }
 
-  const queueOperationResolver = (mockResolvers: MockResolvers) => {
+  const queueOperationResolver = ({
+    mockResolvers,
+    data,
+    queryName,
+  }: QueueOperationResolverParams) => {
     try {
-      environment.mock.queueOperationResolver((operation) => {
-        // eslint-disable-next-line no-console
-        console.log(`react-relay mock: ${operation.request.node.operation.name}`)
-        return MockPayloadGenerator.generate(operation, mockResolvers)
+      console.log('queueOperationResolver', mockResolvers, data, queryName)
+      environment.mock.queueOperationResolver((operationToResolve) => {
+        console.log('AOPS', operationToResolve)
+        if (mockResolvers) {
+          console.log('mockResolvers', mockResolvers)
+
+          return MockPayloadGenerator.generate(operationToResolve, mockResolvers)
+        }
+
+        // return the data mock if no queryName is provided
+        if (data && !queryName) return data
+
+        // return the data mock if the queryName is provided and the operation matches
+        if (queryName && operationToResolve.fragment.node.name === queryName) {
+          return data
+        }
+
+        console.warn('The operation was not mocked.')
+        return null
       })
     } catch (e) {
       // eslint-disable-next-line no-console

packages/graphql/utils/createTestEnvironment/types.ts

@@ -3,11 +3,15 @@ import type { MockPayloadGenerator } from 'relay-test-utils'
 type MockResolvers = {
   mockResolvers: MockPayloadGenerator.MockResolvers
   data?: never
+  queryName?: string
 }
 
 type Data = {
   data: any
   mockResolvers?: never
+  queryName?: string
 }
 
 export type ResolveMostRecentOperationParams = MockResolvers | Data
+
+export type QueueOperationResolverParams = MockResolvers | Data

packages/wagtail/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/wagtail
 
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/graphql@1.1.13
+
 ## 1.0.5
 
 ### Patch Changes

packages/wagtail/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/wagtail",
   "description": "BaseApp Wagtail",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,