无法获取属性，因为在 null 或 undefined [1] 中缺少声明预期键/值类型的索引签名答案

【问题标题】：Cannot get property because an index signature declaring the expected key / value type is missing in null or undefined [1]无法获取属性，因为在 null 或 undefined [1] 中缺少声明预期键/值类型的索引签名
【发布时间】：2021-10-11 01:21:48
【问题描述】：

我正在测试PermissionDetail 组件，它有graphql 片段，即PermissionTable 组件节点的数据。从查询 const permissionDetail = data.viewPermissionScheme?.grantGroups[0].grantHolders?.edges[0].node.permission; 获取模拟数据时，我在这一行中遇到流类型错误。

组件层次结构：

App -> PermissionTable（分页组件片段）-> PermissionDetail（片段）

    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;
    };

测试此类组件的正确方法是什么？我是 flow 和 graphql 和中继的新手。所以需要了解测试这个的最佳方法。

【问题讨论】：

标签： graphql flowtype relayjs relay react-relay

【解决方案1】：

我认为错误只是data.viewPermission?.groups 可以是null 或undefined。因此，您不能访问此属性的 (y) 索引。解决此问题的一种方法是使用 data.viewPermission?.groups?[0] 访问该属性。

您还可以在 GraphQL 架构中使 groups 不可为空。有些人喜欢很多可为空的字段，因为这允许服务器在发生错误时返回尽可能多的部分数据。但是对于开发人员来说，这意味着必须检查每个字段是否有 null。

【讨论】：