Error in the queries tab in apollo dev tools [Vue Application]

[mhelmydiab]

Error on Queries tab:

ApolloError: Failed to execute 'postMessage' on 'Window': #<Object> could not be cloned.

ApolloError
    at new t (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:336837)
    at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:374825
    at i (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:344588)
    at chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:344502
    at new Promise (<anonymous>)
    at Object.then (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:344468)
    at Object.next (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:344598)
    at st (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:256763)
    at lt (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:257276)
    at t.next (chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/panel.js:1:257816)

Additional details

Im running a vue application

@apollo/client version

3.11.4

Apollo Client Devtools version

4.18.1

[phryneas]

Thank you for the report!

It looks like this might be a regression from #1268, and we might need to also wrap getQueries and getMutations like we wrap getCache - what do you think @jerelmiller ?

https://github.com/apollographql/apollo-client-devtools/blob/65ef982176fae638d2a3d1ff53151f7c6fd9ac38/src/extension/tab/hook.ts#L132-L152

@mhelmydiab For better understanding: do you have any values in your cache that are not plain objects? Something like Date instances for example - either introduced in a link or type policy.

[jerelmiller]

Good catch! This is probably from https://github.com/apollographql/apollo-client-devtools/pull/1418 which optimized data transfer between the devtools and content scripts for only the tab you're looking at. We do run a cache diff for getQueries which I believe is likely the source of this issue: https://github.com/apollographql/apollo-client-devtools/blob/ba6cefdc9b508f0cca4a1013aa775f8d008def50/src/extension/tab/helpers.ts#L73

Applying the json parse/serialize fix we did for the cache tab should work here as well.

I don't think we need it for mutations since that doesn't transfer any cache data so we can leave that one alone.

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[jerelmiller]

@mhelmydiab I just published the fix in 4.8.2 which should go live in the extension stores within the next couple hours. Please let me know if you're still seeing issues after your extension has been updated and I'd be happy to reopen. Thanks for the report!

[mhelmydiab]

Unfortunately its still happening with me.

[mhelmydiab]

the cache is showing fine but the queries and mutations tabs are showing that error:

ApolloError: Failed to execute 'postMessage' on 'Window': #

[phryneas]

mhelmydiab Is there any chance you could provide us with a minimal reproduction of an application that causes this problem?

Right now, all we could do would be keep guessing :/

[jerelmiller]

Hey @mhelmydiab 👋

I've got another PR open (https://github.com/apollographql/apollo-client-devtools/pull/1488) that should fix this. This instead will serialize everything sent from the client rather than hand-picking only a few values. We will try and get this out ASAP!

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[phryneas]

@mhelmydiab we've shipped that other fix - could you please give it a try and report back? :)