Question

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

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

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

1 个答案: