apollo-client: Loading stuck always true after sending request when using useQuery hook and React 18 StrictMode

Intended outcome:

The useQuery hook should work with React 18 with StrictMode enabled between multiple component re-renders (Note similarity to #9602) and also update the resulting data and loading state when changing the variables (or other options) passed to the hook.

Actual outcome:

When using the useQuery hook in a component with React StrictMode on, the first time the hook is used (i.e., passing the initial options to the hook) the loading state is properly set to true and then to false after the request has finished loading. However, after changing the variables option passed to the hook, the loading state is set to true, and stays like that forever.

How to reproduce the issue:

Create a simple React app like the one below and keep switching back and forth between the Exchange rates USD and Exchange rates EUR links which changes the variables parameter currency passed to the useQuery hook. You should see that the first time the hook is used with the passed variable (with either USD or EUR as the chosen currency), the loading state is correctly set to false after the request finishes. However, after switching the currency the loading state is stuck as true.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Route, BrowserRouter as Router, Routes, Link, useParams } from 'react-router-dom';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client";

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});

const EXCHANGE_RATES = gql`
  query GetExchangeRates($currency: String!) {
    rates(currency: $currency) {
      currency
      rate
    }
  }
`;

function ExchangeRates() {
  const { currency } = useParams();
  const { loading, error, data } = useQuery(EXCHANGE_RATES, {
    variables: { currency },
    fetchPolicy: 'no-cache',
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

function App() {
  return (
    <div>
      <Router>
        <nav>
          <ul>
            <li>
            <Link to="/">Home</Link>
            </li>
            <li>
            <Link to="/exchangerates/USD">Exchange rates USD</Link>
            </li>
            <li>
            <Link to="/exchangerates/EUR">Exchange rates EUR</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/exchangerates/:currency" element={<ExchangeRates />} />
          <Route path="/" element={<div>Home</div>} />
        </Routes>
      </Router>
    </div>
  );
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </StrictMode>
);

Versions

System: OS: Windows 10 10.0.19044 Binaries: Node: 16.14.2 - ~\AppData\Local\Volta\tools\image\node\16.14.2\node.EXE npm: 8.5.0 - ~\AppData\Local\Volta\tools\image\node\16.14.2\npm.CMD
Browsers: Chrome: 100.0.4896.127 Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.39) npmPackages: @apollo/client: ^3.6.0 => 3.6.0 graphql: 16.4.0 react: 18.0.0 react-dom: 18.0.0 react-router-dom: 6.3.0