are generated types for unions/interfaces correct?

[PiotrFidurski]

Hello, I'm using interfaces/unions in my schema, and everytime I use generated types I'm checking __typename field to pick the correct type from interface.

packages

    "@graphql-codegen/cli": "^1.6.0",
    "@graphql-codegen/fragment-matcher": "^2.0.0",
    "@graphql-codegen/typescript-operations": "^1.17.16",
    "@graphql-codegen/typescript-react-apollo": "^1.17.7"

Here's the query and types.

union PostByIdResult = PostByIdSuccess | PostByIdInvalidInputError
  type PostByIdSuccess {
    node: Post!
  }
  type PostByIdInvalidInputError implements Error {
    message: String!
    id: ID!
  }

 query post($postId: ID!) {
  post(postId: $postId) {
    ... on PostByIdSuccess {
      node {
        ... on Post {
          id
          body
          conversationId
          inReplyToId
          ...postLikesFields
          ...postConversationFields
          owner {
            id
            username
            name
            email
            ...userAvatarFields
          }
        }
      }
    }
    ... on PostByIdInvalidInputError {
      message
      id
    }
  }
}

what gets generated:

export type PostQuery = (
  { __typename?: 'Query' }
  & { post: (
    { __typename?: 'PostByIdSuccess' }
    & { node: (
      { __typename?: 'Post' }
      & Pick<Post, 'id' | 'body' | 'conversationId' | 'inReplyToId'>
      & { owner?: Maybe<(
        { __typename?: 'User' }
        & Pick<User, 'id' | 'username' | 'name' | 'email'>
        & UserAvatarFieldsFragment
      )> }
      & PostLikesFieldsFragment
      & PostConversationFieldsFragment
    ) }
  ) | (
    { __typename?: 'PostByIdInvalidInputError' }
    & Pick<PostByIdInvalidInputError, 'message' | 'id'>
  ) }
);

how i use generated types:

{data && data!.post && data!.post!.__typename === "PostByIdSuccess" ? (
     <Conversation post={data!.post!.node!} user={user} />
 ) : null}

when i dont check for __typename I get this error

 {data && data!.post ? (
       <Conversation post={data!.post!.node!} user={user} />
 ) : null}
Property 'node' does not exist on type '({ __typename?: "PostByIdSuccess" | undefined; } & { node: { __typename?: "Post" | undefined; } & Pick<Post, "body" | "id" | "conversationId" | "inReplyToId"> & ... 5 more ... & { ...; }; }) | ({ ...; } & Pick<...>)'.
  Property 'node' does not exist on type '{ __typename?: "PostByIdInvalidInputError" | undefined; } & Pick<PostByIdInvalidInputError, "id" | "message">'.ts(2339)

if its just node interface e.g:

query node($id: ID!) {
  node(id: $id) {
    ... on Post {
      id
      body
      conversationId
      inReplyToId
      ...postLikesFields
      ...postConversationFields
      owner {
        id
        username
        name
        email
        ...userAvatarFields
      }
    }
  }
}

 {data && data!.node?.__typename === "Post" ? (
    <Conversation post={data!.node!} user={user} />
 ) : null}

Is it intented behaviour, having to check __typename field whenever u need to use whats returned from query, or is something wrong with my schema which looks to me like a regular interface/union

[JeffBeltran]

@PiotrFidurski did you ever figure this out? while not a big deal to type narrow like this i just wonder if there is a way to have this configured to do this for us.

[bentron2000]

I'm also interested to know if there is a way to configure this.
In my case - I have a node interface and a large number of types that implement it.
Each node query contains a union of ALL implementing types.
I would have thought there may be some way to narrow the types automatically?