15

My Setup

  • Typescript React App
  • Backend GraphQL API
  • Apollo Client
  • Inspecting with Apollo Client Devtools Extension

My question

  • What are active queries? The Apollo Docs talks about active queries a lot but I am struggling to get an actual definition.
  • I understood that an active query is basically a link from your component state to the overall global state of the Apollo Client cache. Is this correct?
  • Why do I see 2 queries being listed when I only have one query in my react component (see screen recording). For example in my events pages I call on query listEvents but then I see that query appear twice in my active queries when I load the page. Is seems to be the same for any new query.
  • Why do my active queries keep increasing when I am just navigating back and forth between the same pages and fetching the same data. Based on my understanding, I would expect the number of active queries not to increase in this case as I am not introducing and new queries.
  • I am worried that there is some issue in my setup leading to new active queries being created instead of 'recycling' existing ones. Am I right? And if so how can I debug/fix this?

Active Queries Screen Recording

Thanks,

Simon Verhoeven
  • 347
  • 4
  • 16

2 Answers2

3

Active queries are queries running in mounted components so Apollo knows what query result to update when cache is updated. If you're sure you're not running those queries at the same time, you can check your routing library to see if they don't keep your last page in cache.

Emmanuel Tabard
  • 696
  • 5
  • 14
0

I recently came across this issue and in my instance (react 18.2.0 & apollo-client 3.8.6) it was due to react StrictMode.

Somebody has opened a ticket for it on GitHub. Fortunately, it does not affect production builds as StrictMode is development only.

nulliel
  • 1