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 ?

apollo-client-devtools/src/extension/tab/hook.ts

Lines 132 to 152 in 65ef982

	handleRpc("getQueries", (clientId) =>
	getQueriesForClient(getClientById(clientId))
	);
	handleRpc("getMutations", (clientId) =>
	getMutationsForClient(getClientById(clientId))
	);
	handleRpc("getCache", (clientId) => {
	// We need to JSON stringify the data here in case the cache contains
	// references to irregular data such as `URL` instances which are not
	// cloneable via `structuredClone` (which `window.postMessage` uses to
	// send messages). `JSON.stringify` does however serialize `URL`s into
	// strings properly, so this should ensure that the cache data will be
	// sent without errors.
	//
	// https://github.com/apollographql/apollo-client-devtools/issues/1258
	return JSON.parse(
	JSON.stringify(getClientById(clientId)?.cache.extract(true) ?? {})
	) as JSONObject;
	});

@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 #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:

apollo-client-devtools/src/extension/tab/helpers.ts

Line 73 in ba6cefd

const diff = observableQuery.queryInfo.getDiff();

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]

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': # 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 ()
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)

[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 (#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]

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? :)