apollographql / apollographql/apollo-client-devtools

Extension causes query response handling to fail. Uncaught TypeError: Cannot convert object to primitive value

Open
#1,328 6 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.