From cc40595dd04cdc267ff236349a4a9c1cb359a376 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Tue, 23 Jul 2024 08:35:43 -0600 Subject: [PATCH 1/4] Return early when window is undefined when connecting to devtools --- src/core/ApolloClient.ts | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/core/ApolloClient.ts b/src/core/ApolloClient.ts index 6070591ffd9..52d7cde360a 100644 --- a/src/core/ApolloClient.ts +++ b/src/core/ApolloClient.ts @@ -319,22 +319,24 @@ export class ApolloClient implements DataProxy { } private connectToDevTools() { - if (typeof window === "object") { - 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; + if (typeof window === "undefined") { + return; } + 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; + /** * Suggest installing the devtools for developers who don't have them */ @@ -342,7 +344,6 @@ export class ApolloClient implements DataProxy { hasSuggestedDevtools = true; setTimeout(() => { if ( - typeof window !== "undefined" && window.document && window.top === window.self && !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__ && From cef8ebb31f5383b2d352b104036c7f62b77c2e61 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Tue, 23 Jul 2024 08:38:05 -0600 Subject: [PATCH 2/4] Add changeset --- .changeset/famous-berries-remember.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/famous-berries-remember.md diff --git a/.changeset/famous-berries-remember.md b/.changeset/famous-berries-remember.md new file mode 100644 index 00000000000..0204827b570 --- /dev/null +++ b/.changeset/famous-berries-remember.md @@ -0,0 +1,5 @@ +--- +"@apollo/client": patch +--- + +Prevent the `setTimeout` for suggesting devtools from running in non-browser environments. From 6a52c58a1a6f912ceaa12e8cf8d28446d4643b6b Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Tue, 23 Jul 2024 08:44:52 -0600 Subject: [PATCH 3/4] Move the if inside the setTimeout to outside of it --- src/core/ApolloClient.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/core/ApolloClient.ts b/src/core/ApolloClient.ts index 52d7cde360a..9f1f56da74e 100644 --- a/src/core/ApolloClient.ts +++ b/src/core/ApolloClient.ts @@ -342,13 +342,13 @@ export class ApolloClient implements DataProxy { */ if (!hasSuggestedDevtools && __DEV__) { hasSuggestedDevtools = true; - setTimeout(() => { - if ( - window.document && - window.top === window.self && - !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__ && - /^(https?|file):$/.test(window.location.protocol) - ) { + if ( + window.document && + window.top === window.self && + !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__ && + /^(https?|file):$/.test(window.location.protocol) + ) { + setTimeout(() => { const nav = window.navigator; const ua = nav && nav.userAgent; let url: string | undefined; @@ -369,8 +369,8 @@ export class ApolloClient implements DataProxy { url ); } - } - }, 10000); + }, 10000); + } } } From 272000f1c8da41a63e977d8e6209582b7e1ce605 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Tue, 23 Jul 2024 08:47:53 -0600 Subject: [PATCH 4/4] Add back check for devtools hook inside setTimeout --- src/core/ApolloClient.ts | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/core/ApolloClient.ts b/src/core/ApolloClient.ts index 9f1f56da74e..7dce981b88d 100644 --- a/src/core/ApolloClient.ts +++ b/src/core/ApolloClient.ts @@ -345,29 +345,30 @@ export class ApolloClient implements DataProxy { if ( window.document && window.top === window.self && - !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__ && /^(https?|file):$/.test(window.location.protocol) ) { setTimeout(() => { - 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 (!(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); }