[v3.4rc19] Query ancellation appears broken in 3.4

[sebastienbarre]

Intended outcome:

Previous GraphQL query is cancelled automatically when repeated.

Actual outcome:

Previous GraphQL query is cancelled... but new one is not triggered.

How to reproduce the issue:

I'll try to get a repo up and running, but I wanted to mention it quick, since it seems we are getting close to the official 3.4.

Essentially I have a classic, debounced "search" input field, where our user will type a few letters and the UI will perform a search query every X milliseconds once the field has debounced. This used to work nicely in 3.3; if a GraphQL query was still in flight by the time the UI next debounced, the new query would cancel the old one before the new one would take over.

See Network tab below, where 2 queries were cancelled, and the last one succeeded (since the user stopped typing):

This is no longer the case for me in 3.4rc19, the old one is cancelled... but the new one never goes through. See below, the old one is cancelled, but no new one in sight.

Versions

 System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 16.4.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.18.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.0.3

[benjamn]

@sebastienbarre Can you tell which beta/RC version introduced the regression? Was it @apollo/client@3.4.0-rc.19 specifically?

[sebastienbarre]

@benjamn Indeed rc19. I'm trying to hunt down the reproduction repo that was used the last time cancellation was broken, see if it can show the same issue. Thx.

[sebastienbarre]

That was #4955 back then, but now that I re-read it, it was cancelling not working when a component was unmounted, so it's a different case it seems.

[sebastienbarre]

@benjamn Do you guys have a reproduction repo that performs actual network requests, client<->server?
https://github.com/apollographql/react-apollo-error-template doesn't perform network requests, unless I missed something, so one can't see if they get cancelled...
Thx

[dylanwulf]

@sebastienbarre You can return a cleanup function from an Observable, which would allow you to log request cancellations. See here for the Observable API

const link = new ApolloLink(operation => {
- return new Observable(async observer => {
+ return new Observable(observer => {
    const { query, operationName, variables } = operation;
-   await delay(300);
+   let completed = false;
+   delay(300).then(async () => {
      try {
        const result = await graphql(
          schema,
          print(query),
          null,
          null,
          variables,
          operationName,
        );
+       completed = true;
        observer.next(result);
        observer.complete();
      } catch (err) {
+       completed = true;
        observer.error(err);
      }
+   });

+   return () => {
+     console.log(completed ? 'request completed!' : 'request cancelled!', operationName, variables.searchTerm);
+   };
  });
});

[rossm6]

I've just un-installed "3.4.0-rc.6" and installed "3.4.0-rc.18" to see if it helps with the problems I've been having but a useLazyQuery which has "fetchPolicy" of "network-only" and "nextFetchPolicy" of "cache-first" now gets cancelled and another IS NOT triggered.

My problem is #8514 (actually two problems).

[brainkim]

@sebastienbarre Can you check 3.4.5? That might have fixed this.

[sebastienbarre]

@brainkim I tried with 3.4.4, it was still broken. I just tried with 3.4.5, and that indeed fixed it, thanks :)
Maybe I'll try to live dangerously and finally push 3.4 to production :) Thanks again.