Cannot get property because an index signature declaring the expected key / value type is missing in null or undefined [1]

Question

I am testing PermissionDetail component which has graphql fragment, that is the data of node of PermissionTable component. I am getting a flow type error in this line when getting mock data from query const permissionDetail = data.viewPermissionScheme?.grantGroups[0].grantHolders?.edges[0].node.permission;.

Component hierarchy:

App -> PermissionTable (Paginated component fragment) -> PermissionDetail (fragment)

    const TestRenderer = () => {
        const data = useLazyLoadQuery<examplesPermissionQuery>(
            graphql`
                query examplesPermissionQuery @relay_test_operation {
                    viewPermission(id: "test-scheme-id") {
                        ... on PermissionView {
                            groups {
                                holders(first: 10) {
                                    edges {
                                        node {
                                            permission {
                                                ...permissionDetailsFragment
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            `,
            {},
        );

// Getting Flowtype Error here: Cannot get `data.viewPermission?.groups[0]` because an index signature declaring the expected key / value type is missing in  null or undefined [1]
    
        const permissionDetail =
         data.viewPermissionScheme?.grantGroups[0].grantHolders?.edges[0].node.permission; 
    
        return permissionDetail ? (<PermissionDetails permissionDetail={permissionDetail}/>) : null;
    };

What is the correct way to test such components? I am new to flow and graphql and relay. So need to understand the best way to test this.

score 0 · Answer 1 · answered Aug 12 '21 at 14:27

I think the error is simply that data.viewPermission?.groups can be null or undefined. Therefore you are not allowed to access an(y) index on this property. One way to fix this is by using data.viewPermission?.groups?[0] to access the property.

You could also make groups non-nullable in your GraphQL schema. Some people like a lot of nullable fields because that allows the server to return as much partial data as possible in the case of an error. But for the developer this means that every field has to be checked for null.

Cannot get property because an index signature declaring the expected key / value type is missing in null or undefined [1]

1 Answers1