RefetchQueries not executed using BatchHttpLink with Apollo Client 3.6.x

[skrivle]

Hi Folks 👋,

We've run into an issue where refetch queries are no longer executed when upgrading to react 3.6.x.

It seems like this is caused by combining BatchHttpLink with Apollo Client 3.6.x. If we configure the BatchHttpLink with batchMax: 1 the issue goes away.

Please note that this could be similar to #9690 but I wasn't sure.

Thanks for all the hard work on Apollo Client 🙏

Intended outcome:
Refetch queries get executed.

Actual outcome:
Refetch queries are not executed

How to reproduce the issue:
I was able to reproduce this issue in a test case using msw.

This is regular CRA project so running npm install and npm test should do the trick.

I have two branches, one with passing tests and one with failing tests where the client is upgraded to 3.6.x:

Passing test using Apollo Client 3.5.10 => https://github.com/skrivle/apollo-refetch-repro/tree/master
Failing test using Apollo Client 3.6.x => https://github.com/skrivle/apollo-refetch-repro/tree/apollo-3.6.x (passes with batchMax set to 1)

Versions

This started happening as of version 3.6.0

System:
    OS: macOS 11.6.5
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0.2
    Safari: 15.5
  npmPackages:
    @apollo/client: 3.6.0 => 3.6.0

[natterstefan]

I can confirm that this happens for us as well as soon as we update to 3.6.x also with the BatchHttpLink enabled.

[simplecommerce]

I also experienced this issue on my current project when updating to latest 3.6.6 version of the client.

The reason I can see is because we are using useMutation with refetchQueries and awaitRefetchQueries set to true.
If you remove awaitRefetchQueries, it will work.
But in my case, I need the refetchQueries to execute and complete before actually running the rest of my code/logic.

I noticed this case because I was doing the following:

const [mutate] = useMutation(LOGOUT,{ 
  awaitRefetchQueries: true,
  refetchQueries: ["CurrentUser"]
});

// in my code

<button onClick={mutate().then(() => {
  // this never gets called if `awaitRefetchQueries` is `true`
  
  client.resetStore();
}}>logout</button>

I am only mentioning this because I noticed this when looking at your code.
I couldn't understand how onQueryUpdated worked or how to adapt to it to use it.

Instead I did something like this:

const [mutate] = useMutation(LOGOUT);

// in my code

<button onClick={mutate().then(() => {
  // this never gets called if `awaitRefetchQueries` is `true`
  
  client.refetchQueries({
     include: ["CurrentUser"]
  }).then(() => client.resetStore());
}}>logout</button>

I don't know why this changed, but I couldn't find proper documentation or example on how to achieve this outcome without the awaitRefetchQueries other than the example I just provided.

NOTE

I want to also confirm that I am using BatchHttpLink.
I was curious so I tested it using the HttpLink with my old code which wasn't working, and it works now.
So it seems to be related.

[benjamn]

@skrivle @simplecommerce @natterstefan Please try running npm i @apollo/client@beta to get version 3.7.0-beta.3, which contains my PR #9793, which includes a version of the test @skrivle provided in this PR.

If that doesn't work, please try npm i @apollo/client@3.7.0-beta.2 (note: 2 not 3) to see if the full reversion of PR #9248 (described in #9793) makes any difference for you. If you see any differences in behavior between these two versions, please describe in detail, since I'm hoping the simpler changes in @apollo/client@3.7.0-beta.3 are enough to fix the regression, without completely undoing #9248.

[simplecommerce]

@benjamn I did a few tests on my end with my project with refetchQueries and awaitRefetchQueries set to true and it seems to work as usual, I did not notice any issues with 3.7.0-beta.3. In my project I only use awaitRefetchQueries in 2 locations, so its not that big of a deal to refactor it to use client.refetchQueries, if this is the recommended approach vs awaitRefetchQueries.

Appreciate the fix, thanks!

[benjamn]

This should be fixed if you run npm i @apollo/client@latest to get version 3.6.7 (or later). 🎉

[skrivle]

@benjamn Sorry for the delay. I can indeed confirm 3.7.0-beta.3 solved it for us. Thanks!