GraphQL-Express instead of Apollo Client to make requests cancelable again

Problem

I was working on a web app that is built on Angular on the front-end side. It uses GraphQL to communicate with the server. For building GraphQL requests it uses Apollo and ones are handled by RxJs. This is the necessary precondition for the “quest”. Then we have a data table on the UI and multiple filters. A user is able to interact with filters quickly and it makes multiple parallel requests. It means we can not guaranty the order of receiving responses. And one day I was noticed about a bug, the usual situation;) The user value of the problem was that the wrong data was presented to the user.

Investigation

At first, in browser developer console I've seen no canceled requests, while I was interacting with the filters. I was wondered because of Angular service call which makes requests, is wrapped by ‘switchMap’ operator. I could see that requests sent immediately, and two or more requests could run in parallel. It worked like it was wrapped by ‘mergeMap’ operator. Of course, maybe I did something wrong, but I’m not alone with my problem;) I found an opened issue on GitHub, and to make sure that the problem is in Apollo I created an Angular+Apollo playground with a simple example that demonstrates it. Before playing with the example, set throttling and watch on network console, during you are interacting with input.

Solution

The request cancelation is implemented for the native method fetch. RxJs library v.6.5 has the wrapper of it fromFetch which can be handled by many other RxJs operators. To make GraphQL requests a little bit easier I created an NPM package with a smart wrapper of fromFetch RxJs function. And it had 15 downloads during the day after the first version was published;) Here is the playground with my package with a simple example that demonstrates a solution to the problem.

P.S.

From the perspective of developing my NPM package, I’m going to implement GraphQL query builder which will allow separating GraphQL client configuration and requests sending.

Links

NPM: https://www.npmjs.com/package/graphql-express
Graphql-express example: https://stackblitz.com/edit/rxjs-j5yshn
Angular+Apollo example: https://stackblitz.com/edit/simple-apollo-angular-example-qebxsp
GitHub: https://github.com/NikitaDev14/graphql-express