Two queries in apollo object on component. Make the second dependant on the first

[benjam-es]

In an inherited codebase - I have a component which has two queries on the apollo: object

As the first loads, the second needs part of the first queries' result. This currently works by loading the first, skipping the second, and then reloading the second on the client side as far as I can tell.

Is there a way, using this component object syntax, to enforce both to load on the server side, with the second dependant on the first.

I did seem to get it working by removing the skip method of the second query - but this introduces new errors around the client dom not matching the server side dom

[benjam-es]

    apollo: {
        building: {
            prefetch: true,
            manual: true,
            query: Building,
            variables() {
              return {
                id: parseInt(this.$route.params.id)
              };
            },
            result({ data }) {
                this.building = data.building;
                if (data.building && data.building.apartmentId) {
                    this.apartmentId = data.building.apartmentId;
                }
            }
        },
        apartment: {
            prefetch: true,
            manual: true,
            query: Apartment,
            variables() {
              return {
                siteId: process.env.siteId,
                id: this.apartmentId
              };
            },
            result({ data }) {
                if (!data) return;
                
                this.apartment = data.apartment;
            },
            skip() {
                return !this.apartmentId;
            }
        }
    },