Question: Type 'null' is not assignable to type 'T' Error

[BenSaus]

I have a couple of React components setup and I can't figure out how to get rid of the following TS error:

TypeScript error in Z:/Dropbox/WD/ClientFolders/LFG/front_react_proto2/src/containers/OpenGroups/OpenGroups.tsx(23,25):  
Type 'Maybe<{ __typename?: "Group" | undefined; } & Pick<Group, "id" | "name" | "open_slots" | "max_age" | "min_age" | "booking_status" | "description">>[]' is not assignable to type 'Group[]'.
  Type 'Maybe<{ __typename?: "Group" | undefined; } & Pick<Group, "id" | "name" | "open_slots" | "max_age" | "min_age" | 
"booking_status" | "description">>' is not assignable to type 'Group'.
    Type 'null' is not assignable to type 'Group'.  TS2322

    21 |             <div>
    22 |                 <h1>Open Groups</h1>
  > 23 |                 <Groups groups={data.groups} clickedGroup={onGroupClick} />
       |                         ^
    24 |                 {/* <ReduxExample /> */}
    25 |             </div>
    26 |         )

OpenGroups.tsx

import React from "react"
import Groups from "../../components/Groups/Groups"
import { RouteComponentProps } from "react-router"
import { useGetOpenGroupsQuery } from "../../generated/graphql"
// import ReduxExample from "../../components/ReduxExample/ReduxExample"

interface OpenGroupsProps extends RouteComponentProps {}

const OpenGroups: React.FC<OpenGroupsProps> = (props) => {
    const { loading, data, error } = useGetOpenGroupsQuery()

    if (loading) return <p>Loading...</p>
    if (error) return <p>Error :(</p>

    const onGroupClick = (groupId: string) => {
        props.history.push("/group/" + groupId)
    }

    if (data?.groups) {
        return (
            <div>
                <h1>Open Groups</h1>
                <Groups groups={data.groups} clickedGroup={onGroupClick} />   //   <=== The offending line
                {/* <ReduxExample /> */}
            </div>
        )
    }

    return (
        <div>
            <h2>No open groups found</h2>
        </div>
    )
}

export default OpenGroups

Groups.tsx

import React from "react"
import { Group } from "../../generated/graphql"
import GroupComponent from "../../components/Groups/Group/Group"
import styles from "./Groups.module.css"

interface GroupsProps {
    groups: Group[]
    clickedGroup: (groupId: string) => void
}

const Groups: React.FC<GroupsProps> = (props) => {
    let groupsJsx
    if (props.groups) {
        groupsJsx = props.groups.map((group: Group) => {
            return (
                <GroupComponent
                    group={group}
                    clicked={props.clickedGroup}
                    key={group.id}
                />
            )
        })
    }

    return <div className={styles.Groups}>{groupsJsx}</div>
}

export default Groups

I'm on TS 4.0.3
I'd really like to figure this out and use the generated React hooks. Thanks

[dotansimha]

@BenSaus please provide a live reproduction of that issue

[BenSaus]

Here are some specific files and the repo in case it's something obvious:

Graphql Schema
GetOpenGroups.graphql
codegen.yml
OpenGroups.tsx

OS: Win10 Version 10.0.18363 Build 18363
@graphql-codegen/cli: 1.19.0
NodeJS: v14.15.0

I'll need to come back to get things setup in codesandbox, hopefully soon.

[dotansimha]

Hi, sorry, we can't dive into your project and run it locally. That's why we ask for a reproduction in clean environment. Thank you!