订阅未定义的错误处理 - Apollo 和 Angular 2

Question

我在使用 Apollo 查询 GraphQL 端点的 Angular 2 中有以下代码：

getStudentPersonalDetails(studentId?: number) {
    console.log(studentId)
    this.apollo.watchQuery<QueryResponse>({
        query: StudentPersonalDetailsQ,
        variables: {
            studentId: studentId
        }
    }).subscribe(({ data }) => {
        if (typeof data.allStudentDetails != 'undefined') {
            console.log(data)
            this.loading = data.loading;
            this.personalDetails.studentId = data.allStudentDetails.nodes[0].studentPk;
            this.personalDetails.firstName = data.allStudentDetails.nodes[0].firstName;
            this.personalDetails.middleName = data.allStudentDetails.nodes[0].middleName;
            this.personalDetails.lastName = data.allStudentDetails.nodes[0].lastName;
            this.personalDetails.preferredName = data.allStudentDetails.nodes[0].preferredName;
            this.personalDetails.onlyOneName = data.allStudentDetails.nodes[0].onlyOneName;
            this.personalDetails.dob = data.allStudentDetails.nodes[0].dob;
            this.personalDetails.sex = data.allStudentDetails.nodes[0].sex;
            this.personalDetails.birthCountry = data.allStudentDetails.nodes[0].metaCountryByBirthCountryId.countryName;
            this.personalDetails.passportCountry = data.allStudentDetails.nodes[0].metaCountryByPassportCountryId.countryName;
            this.personalDetails.passportNumber = data.allStudentDetails.nodes[0].passportNumber;
            this.personalDetails.contactCountry = data.allStudentDetails.nodes[0].metaCountryByContactCountryId.countryName;
            this.personalDetails.personalEmail = data.allStudentDetails.nodes[0].personalEmail;
            console.log(data.allStudentDetails);
        }
    }, (error) => {
        console.log('there was an error sending the query', error);
    });

我正在通过故意传递一个不存在的学生 ID 并因此返回 Cannot read property 'studentPk' of undefined 来测试该方法。但是，我试图通过检测 allStudentDetails 是否未定义并转到错误捕获来避免此错误。

如何添加错误处理来处理undefined 数据，然后将其从服务适当地提供给将使用烤面包机显示用户友好错误的组件？

Answer 1

如果我理解这个问题，您可以先通过map 运行响应并在该级别抛出错误。类似的东西（当然，这是未经测试的）：

getStudentPersonalDetails(studentId?: number) {
    console.log(studentId)
    this.apollo.watchQuery<QueryResponse>({
        query: StudentPersonalDetailsQ,
        variables: {
            studentId: studentId
        }
    }).map((data) => {
        console.log(data.allStudentDetails);
        if (typeof data.allStudentDetails.nodes[0] === 'undefined') {
            // Could also check if array length is 0
            // data.allStudentDetails.nodes.length <= 0
            throw new Error('This student does not exist!');
        }
        return data;
    }).subscribe((data) => {
        console.log(data)
        this.loading = data.loading;
        this.personalDetails.studentId = data.allStudentDetails.nodes[0].studentPk;
        this.personalDetails.firstName = data.allStudentDetails.nodes[0].firstName;
        this.personalDetails.middleName = data.allStudentDetails.nodes[0].middleName;
        this.personalDetails.lastName = data.allStudentDetails.nodes[0].lastName;
        this.personalDetails.preferredName = data.allStudentDetails.nodes[0].preferredName;
        this.personalDetails.onlyOneName = data.allStudentDetails.nodes[0].onlyOneName;
        this.personalDetails.dob = data.allStudentDetails.nodes[0].dob;
        this.personalDetails.sex = data.allStudentDetails.nodes[0].sex;
        this.personalDetails.birthCountry = data.allStudentDetails.nodes[0].metaCountryByBirthCountryId.countryName;
        this.personalDetails.passportCountry = data.allStudentDetails.nodes[0].metaCountryByPassportCountryId.countryName;
        this.personalDetails.passportNumber = data.allStudentDetails.nodes[0].passportNumber;
        this.personalDetails.contactCountry = data.allStudentDetails.nodes[0].metaCountryByContactCountryId.countryName;
        this.personalDetails.personalEmail = data.allStudentDetails.nodes[0].personalEmail;
    }, (error) => {
        console.log(error.message);
    });