fix: Fixes support for Mocking GraphQL Queries in Storybook when using GraphQL Fragments

[dthyresson]

Fixes #10807

If one used GraphQL fragments, when mocking the GraphQL query for use in Storybook, the typename for the data object must be included otherwise Apollo client cannot properly map the data.

This PR

• adds the typename to the cell generator templates
• updates the testing and graphql mock and fragments documentation to show how properly defines mock data

---

From issue #10807

What's not working?

When mocking a graphql query inside a component to be able to render Cell children, it breaks when using fragments inside the Cell Query.

My query in ChatMessagesCell.tsx:

export const QUERY: TypedDocumentNode<
  ChatMessagesQuery,
  ChatMessagesQueryVariables
> = gql`
  query ChatMessagesQuery($chatRoomId: String!) {
    chatMessages(chatRoomId: $chatRoomId) {
      id
      body
      createdAt
      user {
        id
        displayName
      }
    }
  }
`

Then I mock this query inside a parent component Chatbox.stories.tsx:

    mockGraphQLQuery<ChatMessagesQuery, ChatMessagesQueryVariables>(
      'ChatMessagesQuery',
      (_variables) => {
        console.log('standard().chatMessages', standard().chatMessages)
        return {
          chatMessages: standard().chatMessages,
        }
      }
    )

This works as it should, mocks the list using the standard values

BUT THEN:

My query with fragments in ChatMessagesCell.tsx:

registerFragment(gql`
  fragment ChatMessageFragment on ChatMessage {
    id
    body
    createdAt
    user {
      id
      displayName
    }
  }
`)

export const QUERY: TypedDocumentNode<
  ChatMessagesQuery,
  ChatMessagesQueryVariables
> = gql`
  query ChatMessagesQuery($chatRoomId: String!) {
    chatMessages(chatRoomId: $chatRoomId) {
      ...ChatMessageFragment
    }
  }
`

With the same mock. The list is created from the standard() function but the inner objects are empty

[dthyresson]

Am running into some type issues having added __typename to mocks when yarn rw type-check:

Error: 25hsrc/components/AuthorCell/AuthorCell.test.tsx(39,23): error TS2322: Type '{ __typename: string; id: number; email: string; fullName: string; }' is not assignable to type '{ __typename?: "User"; email: string; fullName: string; }'.
  Types of property '__typename' are incompatible.
    Type 'string' is not assignable to type '"User"'.

Perhaps due to

/**
 * @params TData = Type of data based on your graphql query. This can be imported from 'types/graphql'
 * @example
 * import type { FindPosts } from 'types/graphql'
 *
 * const { post }: CellSuccessData<FindPosts> = props
 */
export type CellSuccessData<TData = any> = ConditionallyGuaranteed<
  Omit<TData, '__typename'>
>

Investigating.

[Josh-Walker-GM]

Just a couple minor comments but otherwise looks good. We paired on this and I seen how this change fixed the issue.

[Josh-Walker-GM]

Don't know if this just needs a comma somewhere but I can't wrap my head around this sentence sorry.

Will re-review docs for clarity.