apollo.query and apollo.mutate are not rxjs observables

First up, thanks for all your hard work on this repo!

Now my issue.

apollo.mutate and apollo.query seem like they are Observables, but they are not rxjs observables and do not work correctly with pipe operators like flatMap.

apollo.watchQuery is an rxjs compatible observable.

I have samples code for this ready to play with in the apollo branch of this repo if you are interested. https://github.com/vespertilian/wallaby-angular-node-yarn-workspaces/tree/apollo

My issue is I wanted to run a mutation then run another mutation.

Something like this:

  const multiplyMutation = gql`
      mutation Multiply($number: Int!) {
        multiply(number: $number) {
          value
        }
      }
    `;

    this.apollo.mutate({mutation: multiplyMutation, variables: {number: 2}})
      .pipe(
        flatMap(({data}: any) => {
          this.addToResult(data.multiply.value, 'd');

          // this does not work :(
          return this.apollo.mutate({mutation: multiplyMutation, variables: {number: 8}});
        })
      )
      .subscribe(({data}) => {
        // never get here
        this.addToResult(data.multiply.value, 'd');
      });

You can get around the issue by using from(.toPromise)

Like this:

   from(this.apollo.mutate({mutation: multiplyMutation, variables: {number: 6}}).toPromise())
      .pipe(
        flatMap(({data}: any) => {
          this.addToResult(data.multiply.value, 'e');
          return from(this.apollo.mutate({mutation: multiplyMutation, variables: {number: 9}}).toPromise());
        })
      )
      .subscribe(({data}) => {
        this.addToResult(data.multiply.value, 'e');
      });

Full code samples here: https://github.com/vespertilian/wallaby-angular-node-yarn-workspaces/blob/apollo/angular-app/src/app/apollo-test/apollo-test.component.ts

After some digging I am assuming this is because Apollo does not use RxJS. It took me a while to track this issue down and it might be worth mentioning this in the docs that the Observables returned from apollo.mutate and apollo.query are not compatible with all RxJS operators.

It mentioned in the apollo.mutate.valueChanges docs that this function is compatible with RxJS, it’s just not mentioned that apollo.mutate and apollo.query is not compatible.

From the docs on mutation: “As you can see, mutate method returns an Observable that resolves with ApolloQueryResult. It is the same result we get when we fetch queries.” - to me this implied it was an Observable and I assumed it would be compatible with RxJS.

The extra issue with mutations is we currently don’t have a .valueChanges method that emits a valid RxJS observable.

The real fix would be to be able to use RxJS as the Observable library for Apollo, as these different observables are very confusing to work with in Angular.

This issue here seems to do that. https://github.com/apollographql/apollo-link/pull/380

I will bump that issue with this thread, hopefully the sample repo included does a good job of highlighting this issue and why having RxJS as a native (peer) dependency would make Apollo and Angular much better friends.

Is there anything else specific I can do to help you push this issue forward?

[Xample]

apollo.query is not an rxjs observable, it is a ZenObservable.

// This does not work 
this.apollo.watchQuery(aQuery).pipe(...)

Wrapping the ZenObservable into a rxjs observable will do the job

// This works
fromObservableQuery(this.apollo.watchQuery(aQuery)).pipe(...)

[vespertilian]

@kamilkisiela

RxJS was the issue, I assumed incorrectly the Angular Apollo library was the issue, as I had other RxJS mutations working within Angular and this was the new code I had introduced.

6.3.2 broken 6.3.3 fixed

https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md

Thanks for you help. If you are ever in Australia, hit me up and I will buy you a coffee!