Scalability when many `useQuery` are used

Intended outcome: Using the same useQuery throughout many components should have relatively low performance impact.

Actual outcome: Long task is created when rendering components with many useQuerys.

How to reproduce the issue: Reproduction Repo

Versions

  System:
    OS: macOS 12.6
  Binaries:
    Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.3/bin/yarn
    npm: 8.10.0 - ~/.nvm/versions/node/v14.18.3/bin/npm
  Browsers:
    Chrome: 107.0.5304.121
    Firefox: 99.0.1
    Safari: 16.0
  npmPackages:
    @apollo/client: ^3.7.1 => 3.7.1

[jerelmiller]

(sorry to interject)

My guess is it’s probably interacting with the cache often. #10270 mentions the cache as a bottleneck with useQuery and I suspect this is in the same ballpark.

[dkempner]

@jpvajda it’s not network latency it’s 300ms of CPU time (mosly from Apollo’s cache), since in the template repo all data is local to the Apollo cache.

I use chrome devtools “Performance” tab

Hit “record” button and then click the “Click Me” button in my reproduction app, then hit stop recording.