How to avoid error Cannot read property of undefined using two LWC Wired properties

Question

How to avoid error Cannot read property of undefined using LWC Wired properties but to display two properties? afterRender threw an error in 'c:tryc' [Cannot read property 'x' of undefined]

HTML file of tryc.html

<template>
    x.data {x.data}<br/>
    y.data {y.data}<br/>
    x.data.x {x.data.x}<br/>
    y.data.y {y.data.y}<br/>
</template>

Listing of Tryc.js

import { LightningElement, wire, api } from 'lwc';
import getX from '@salesforce/apex/TryCont.getX'; 
import getY from '@salesforce/apex/TryCont.getY'; 

export default class Tryc extends LightningElement {
    @wire(getX)
    x
    @wire(getY)
    y
}

Apex Controller

public with sharing class TryCont {

    @AuraEnabled(Cacheable=true)
    public static Map<String, Object> getX() {
        return new Map<String, Object>{'x'=>'y'};
    }
    @AuraEnabled(Cacheable=true)
    public static Map<String, Object> getY() {
        return new Map<String, Object>{'y'=>'x'};
    }

}

Answer 1

To avoid this problems, it is needed to surround the code with <template if:true tag, usually it is clear and obvious when we rely on load of one parameter. However, when the code depends on two parameters, it is needed to add additional property which would track if both properties has been loaded

@api
get loaded() {
    return !!this.x.data && !!this.y.data;
}

Modified template

<template>

    <template if:true={loaded}>
        loaded!<br/>
        x.data {x.data}<br/>
        y.data {y.data}<br/>
        x.data.x {x.data.x}<br/>
        y.data.y {y.data.y}<br/>
    </template>

</template>

And final version of Lightning Javascript Web Module

import { LightningElement, wire, api } from 'lwc';
import getX from '@salesforce/apex/TryCont.getX'; 
import getY from '@salesforce/apex/TryCont.getY'; 

export default class Tryc extends LightningElement {
    @wire(getX)
    x
    @wire(getY)
    y
    @api
    get loaded() {
        return !!this.x.data && !!this.y.data;
    }
}