Changing queries while a request is in-flight causes the new query to never be requested

[emmatown]

Intended outcome:

When changing the query passed to useQuery before the previous query has loaded, the new query is requested and doesn't stay in a loading state forever.

const queries = {
  one: gql`
    query AllPeopleWithoutName {
      people {
        id
      }
    }
  `,
  two: gql`
    query AllPeopleWithName {
      people {
        id
        name
      }
    }
  `
};

function App() {
  const [query, setQuery] = useState("one");
  const { data, error, loading } = useQuery(queries[query]);
  return (
    <div>
      <button
        disabled={query === "two"}
        onClick={() => {
          setQuery("two");
        }}
      >
        Change Query
      </button>
      <pre>{JSON.stringify({ data, error, loading }, null, 2)}</pre>
    </div>
  );
}

Actual outcome:

When changing the query passed to useQuery before the previous query has loaded, the new query is never requested and stays in a loading state forever.

How to reproduce the issue:

If you click the button in the sandbox below before the first query finishes, the second query is never requested and it stays in the loading state forever.

If you wait until the first query loads and then click the button to change the query, the second one loads fine.

https://codesandbox.io/s/musing-forest-z0crg?file=/src/index.js

Versions

  System:
    OS: macOS 11.4
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Firefox: 90.0.2
    Safari: 14.1.1
  npmPackages:
    @apollo/client: 3.4.4 => 3.4.4

This issue didn't occur in 3.3.21 and started occurring in 3.4.0

[benjamn]

@mitchellhamilton Thanks very much for the reproduction!

This appears to be a regression introduced in @apollo/[email protected].

Still investigating.

[benjamn]

If I add back this line (removed by #8414 in @apollo/[email protected]):

diff --git a/src/react/data/QueryData.ts b/src/react/data/QueryData.ts
index 30560457f..d4e580025 100644
--- a/src/react/data/QueryData.ts
+++ b/src/react/data/QueryData.ts
@@ -65,24 +65,26 @@ export class QueryData<TData, TVariables> extends OperationData<
   public execute(): QueryResult<TData, TVariables> {
     this.refreshClient();
 
     const { skip, query } = this.getOptions();
     if (skip || query !== this.previous.query) {
       this.removeQuerySubscription();
       this.removeObservable(!skip);
       this.previous.query = query;
     }
 
     this.updateObservableQuery();
 
+    if (this.isMounted) this.startQuerySubscription();
+
     return this.getExecuteSsrResult() || this.getExecuteResult();
   }

then the reproduction shows the desired behavior. Definitely not suggesting we add that line back exactly, but it's a clue.

[brainkim]

@mitchellhamilton This is fixed in 3.4.5. Sorry about the regression, and thanks for taking the time to create a reproduction.