Thanks in advance for your help! My app is currently fully functional using apollo server and apollo client, and I’m starting to make some passes for optimization, learning the dev tools, and deeper understanding in general.
1. Why are all my queries run twice?
In the Apollo Client DevTools (FF), I can see that every query runs twice. Once as I’ve written it, and once again with __typename added to every object. I suspect it’s that the first query is run against the cache, which starts empty, so the second is run against the server.
2. Why is the “Cached Data” tab in DevTools empty for every Active Query?
I’m talking about on the top right, next to “Variables”. Every query has no Cached Data, but I do have a lot of entries in the Cache tab on the top left. The “Variables” section is populated appropriately.
3. What are “Active” Queries, and how come I get repeated entries for the same query/component?
I recall reading somewhere (I can’t find where) that “Active” means any query that is “watching” the cache. My current app is pretty vanilla in terms of Apollo usage: I have a variety of function components with useQuery(<TypedDocumentNode>). Most of these components are conditionally rendered.
For example, I have a modal dialog whose data is populated by a query. If I open and close the modal over and over again, I end up blowing up the “Active Queries”. At first I thought this may have to do with some queries that have a pollInterval, but it occurs for queries without it as well. Do I need to explicitly destroy the query somehow when the component is unmounted? Or am I not meant to run useQuery() on components that are not always rendered? (The docs said keep your queries close to where they’re used, so in my app they’re distributed among components)
4. Why aren’t my arrays getting cached?
I’ve gone through the documents on caching, and I think this is a configuration/schema issue, but it’s still not clear to me how to address it. I have a few fields in my schema which are arrays of strings, and a couple that are arrays of objects (which do have a typename, but no ID). Everything else in my queries get cached except for these.
I wonder if it’s an issue with merging. My main object schema looks something like this (please pardon this condensed/incorrect syntax)
Job {
id: Int!
processes: [Process!]! {
name: String!
path: String!
includes: [String!]!
env: [StringRecord!]! {
name: String!
value: String!
}
}
The first query grabs Job.id, and Job.processes { name, path }. The subsequent query in the modal then grabs Job.processes { includes, env }. The former gets cached just fine, but the latter doesn’t I wonder if for whatever reason it’s not able to associate the second query’s Process object with the first since there’s no id?
Thank you for reading!