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

Question

我正在测试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 和中继的新手。所以需要了解测试这个的最佳方法。

Answer 1

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

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