diff --git a/.changeset/nine-balloons-compete.md b/.changeset/nine-balloons-compete.md new file mode 100644 index 00000000000..e8dbc5137ac --- /dev/null +++ b/.changeset/nine-balloons-compete.md @@ -0,0 +1,6 @@ +--- +"@apollo/client": patch +--- + +Adds a new devtools registration mechanism and tweaks the mechanism behind the +"devtools not found" mechanic. diff --git a/.size-limit.cjs b/.size-limit.cjs index 6b6dae27a9b..7f35b271baf 100644 --- a/.size-limit.cjs +++ b/.size-limit.cjs @@ -1,7 +1,7 @@ const checks = [ { path: "dist/apollo-client.min.cjs", - limit: "38074", + limit: "38107", }, { path: "dist/main.cjs", diff --git a/src/core/ApolloClient.ts b/src/core/ApolloClient.ts index e449572faaf..c77b9b1b2a3 100644 --- a/src/core/ApolloClient.ts +++ b/src/core/ApolloClient.ts @@ -187,7 +187,19 @@ export class ApolloClient implements DataProxy { this.reFetchObservableQueries = this.reFetchObservableQueries.bind(this); if (connectToDevTools && typeof window === "object") { - (window as any).__APOLLO_CLIENT__ = this; + type DevToolsConnector = { + push(client: ApolloClient): void; + }; + const windowWithDevTools = window as Window & { + [devtoolsSymbol]?: DevToolsConnector; + __APOLLO_CLIENT__?: ApolloClient; + }; + const devtoolsSymbol = Symbol.for("apollo.devtools"); + (windowWithDevTools[devtoolsSymbol] = + windowWithDevTools[devtoolsSymbol] || ([] as DevToolsConnector)).push( + this + ); + windowWithDevTools.__APOLLO_CLIENT__ = this; } /** @@ -195,33 +207,35 @@ export class ApolloClient implements DataProxy { */ if (!hasSuggestedDevtools && connectToDevTools && __DEV__) { hasSuggestedDevtools = true; - if ( - typeof window !== "undefined" && - window.document && - window.top === window.self && - !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__ - ) { - const nav = window.navigator; - const ua = nav && nav.userAgent; - let url: string | undefined; - if (typeof ua === "string") { - if (ua.indexOf("Chrome/") > -1) { - url = - "https://chrome.google.com/webstore/detail/" + - "apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm"; - } else if (ua.indexOf("Firefox/") > -1) { - url = - "https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/"; + setTimeout(() => { + if ( + typeof window !== "undefined" && + window.document && + window.top === window.self && + !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__ + ) { + const nav = window.navigator; + const ua = nav && nav.userAgent; + let url: string | undefined; + if (typeof ua === "string") { + if (ua.indexOf("Chrome/") > -1) { + url = + "https://chrome.google.com/webstore/detail/" + + "apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm"; + } else if (ua.indexOf("Firefox/") > -1) { + url = + "https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/"; + } + } + if (url) { + invariant.log( + "Download the Apollo DevTools for a better development " + + "experience: %s", + url + ); } } - if (url) { - invariant.log( - "Download the Apollo DevTools for a better development " + - "experience: %s", - url - ); - } - } + }, 10000); } this.version = version;