apollographql / apollographql/apollo-client-devtools
Extension causes query response handling to fail. Uncaught TypeError: Cannot convert object to primitive value
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 172
- Avg merge
- 10m
- Merged PRs (30d)
- 8
Description
**Intended outcome:**
Open a page that runs a query that loads a list of projects.
**Actual outcome:**
I see the following error in the Developer Tools Console. It only occurs on the page load. Subsequent app navigation to run the same query works fine.
Uncaught TypeError: Cannot convert object to primitive value
at String ()
at console.warn ()
at console.r [as warn] (fs.js:4:15190)
at invariant.ts:42:21
at Function.warn (invariantWrappers.ts:17:7)
at writeToStore.ts:851:5
at writeToStore.ts:216:15
at Array.forEach ()
at writeToStore.ts:207:36
at Map.forEach ()
r @ fs.js:4
(anonymous) @ invariant.ts:42
(anonymous) @ invariantWrappers.ts:17
(anonymous) @ writeToStore.ts:851
(anonymous) @ writeToStore.ts:216
(anonymous) @ writeToStore.ts:207
e.writeToStore @ writeToStore.ts:167
t.write @ inMemoryCache.ts:205
e.writeQuery @ cache.ts:166
(anonymous) @ QueryInfo.ts:399
l @ inMemoryCache.ts:420
t.batch @ inMemoryCache.ts:464
t.performTransaction @ inMemoryCache.ts:507
e.markResult @ QueryInfo.ts:397
(anonymous) @ QueryManager.ts:1172
i @ asyncMap.ts:32
(anonymous) @ asyncMap.ts:17
f @ projects:1
Promise @ projects:1
then @ asyncMap.ts:17
(anonymous) @ asyncMap.ts:34
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
(anonymous) @ iteration.ts:13
li @ iteration.ts:13
next @ Concast.ts:168
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
onNext @ retryLink.ts:130
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
next @ index.ts:55
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
next @ module.js:310
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
f @ projects:1
setTimeout (async)
f @ projects:1
Zn @ module.js:61
Ln @ module.js:146
Fn @ module.js:176
t.error @ module.js:229
(anonymous) @ iteration.ts:13
li @ iteration.ts:13
t.reportError @ ObservableQuery.ts:1006
error @ ObservableQuery.ts:911
(anonymous) @ iteration.ts:13
li @ iteration.ts:13
error @ Concast.ts:183
Ln @ module.js:137
Fn @ module.js:176
t.error @ module.js:229
(anonymous) @ asyncMap.ts:36
f @ projects:1
Promise.then (async)
a.then @ projects:1
(anonymous) @ asyncMap.ts:34
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
(anonymous) @ iteration.ts:13
li @ iteration.ts:13
next @ Concast.ts:168
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
onNext @ retryLink.ts:130
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
next @ index.ts:55
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
next @ module.js:310
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
Ln @ module.js:132
Fn @ module.js:176
t.next @ module.js:225
f @ projects:1
Promise.then (async)
a.then @ projects:1
(anonymous) @ createHttpLink.ts:196
f @ projects:1
Promise.then (async)
a.then @ projects:1
(anonymous) @ createHttpLink.ts:189
e @ module.js:190
t.subscribe @ module.js:264
(anonymous) @ index.ts:25
f @ projects:1
Promise.then (async)
a.then @ projects:1
(anonymous) @ index.ts:22
e @ module.js:190
t.subscribe @ module.js:264
(anonymous) @ module.js:302
e @ module.js:190
t.subscribe @ module.js:264
(anonymous) @ index.ts:36
e @ module.js:190
t.subscribe @ module.js:264
e.try @ retryLink.ts:119
e.start @ retryLink.ts:102
t.request @ retryLink.ts:198
(anonymous) @ ApolloLink.ts:102
(anonymous) @ ApolloLink.ts:102
(anonymous) @ ApolloLink.ts:102
(anonymous) @ ApolloLink.ts:94
e.execute @ ApolloLink.ts:68
e.getObservableFromLink @ QueryManager.ts:1100
e.getResultsFromLink @ QueryManager.ts:1139
g @ QueryManager.ts:1573
e.fetchQueryByPolicy @ QueryManager.ts:1619
w @ QueryManager.ts:1246
e.fetchConcastWithInfo @ QueryManager.ts:1312
t.fetch @ ObservableQuery.ts:748
t.reobserveAsConcast @ ObservableQuery.ts:900
t.reobserve @ ObservableQuery.ts:941
(anonymous) @ ObservableQuery.ts:144
e @ module.js:190
t.subscribe @ module.js:264
(anonymous) @ useQuery.ts:235
Da @ react-dom.production.min.js:174
ol @ react-dom.production.min.js:244
Cc @ react-dom.production.min.js:286
(anonymous) @ react-dom.production.min.js:283
Sc @ react-dom.production.min.js:281
cc @ react-dom.production.min.js:273
Ho @ react-dom.production.min.js:127
(anonymous) @ react-dom.production.min.js:267
Show 125 more frames
Show less
**How to reproduce the issue:**
My app is unfortunately not public, and I don't know how to reproduce this. It doesn't occur on all of my pages, just certain ones.
When I disable the extension, everything works fine. When I reenable it, I see the error again. It occurs on every full page reload.
It looks like this is happening to others as well as I discovered that it might be the extension from this review:
https://chromewebstore.google.com/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm?pli=1
Thanks for looking into it. Let me know if I can provider further information.
**Desktop (please complete the following information):**
- OS: Mac
- Browser: Chrome
- Browser version 123.0.6312.107 (Official Build) (arm64)
- Extension version 4.11.2
Contributor guide
Research direction
Start by reproducing the failure with Apollo Client DevTools 4.11.2 in Chrome on a page that loads a project list during its initial query. Trace the reported path through invariant.ts, writeToStore.ts, inMemoryCache.ts, and QueryInfo.ts, comparing behavior with the extension disabled. Done means the initial page load no longer raises the TypeError while the extension is enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, typescript
- Domain
- devtools
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100