graphql – switching to different api calls in runtime using apollo/angular QueryRef

I never used graphql before, it seems to be intuitive to use but still have difficulties to understand fully. Is there a way to switch query in runtime when using apollo client QueryRef? For example, based on user’s input, I want to call different apis and update data in ui. The following is brief code what I am trying to do.

this.queryRef : QueryRef = (!value) ? this.service.apiA(pagination, search, sorts) : this.service.apiB(pagination, search, sorts); 

this.queryRef.valueChanges(({data, loading}) => {
    this.data = data;
});

handleToggle() {
    this.toggleValue = !this.toggleValue;
    this.queryRef = (toggleValue) ? this.service.apiA(pagination, search, sorts) : this.service.apiB(pagination, search, sorts);
    this.queryRef.refetch();
}

I am trying the code above, it never updates data and even does not go to the valueChanges.

Is there anyone to implement similar logics and has some advices for it?