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

Question

I have the following code in Angular 2 querying a GraphQL endpoint using Apollo:

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

I am testing the method by deliberately passing a student ID that doesn't exist and therefore getting back Cannot read property 'studentPk' of undefined . However, I am trying to avoid this error by detecting if allStudentDetails is undefined and moving onto the error catch.

How do I add error handling to deal with undefined data and then appropriately feed that up from the service to a component that will use a toaster to display a user friendly error?

Answer 1

If I'm understanding the question, you could first run the response through map and throw an error at that level. Something like (this is untested, of course):

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