Cannot connect to Apollo dev tools from Apollo client 3.9 or 3.11

[mairead]

window.APOLLO_CLIENT is undefined

We can see if we log out the window object that there are references to the Apollo client and the Apollo dev tools but it doesn't seem to have initialised correctly

@apollo/client version

We have tried with both 3.9 and 3.11 which we recently upgraded to
We've also tried the new devtools config in v3.11 and the VSCode extension but it looks like the same problem in all

Apollo Client Devtools version

4.19.5 (Chrome)

Might be related to #1580

in 3.11 I couldn't get it to connect at all, in 3.9 it seemed to connect at first but then dropped the connection

[jerelmiller]

Hey @mairead 👋

Is there any more information you can share about how the client is initiated and such? This has been difficult to reproduce locally so any information you can share would be great. Thanks!

[mairead]

We're running a React 18 app in Vite 6.09 in dev mode, Apollo client is instantiated in a Context Provider. We are working with a monorepo where the GQL client is imported from a Core package. We're using graphql 16.0.0

We're also using the guild codegen (@graphql-codegen/cli v5.0.0) GQL wrapper around our queries

I'm running the dev tools in the Chrome extension in the dev console. I'm running 132.0.6834.111 on a Macbook Pro with Sequoia 15.2

export const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError, operation }) => {
      if (graphQLErrors) {
        graphQLErrors.forEach(({ message, locations, path }) => {
          console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
        })
      }

      if (networkError) {
        console.log(`[Network error]: ${networkError}: ${operation.operationName}`)
      }
    }),
    link,
  ]),
  cache: graphqlClientInMemoryCache,
  defaultOptions: {
    watchQuery: {
      nextFetchPolicy: 'cache-first',
    },
  },
})

We were working under the impression in 3.9 that dev tools is on by default and you don't need to tell it to initialise explicitly if you're running React in Dev mode.

It wasn't clear from the docs if that's also true in 3.11 or if you need to explicitly say devTools: {enabled: true} however setting it explicitly didn't work for us (in either 3.9 or 3.11) We see a flash of connected and then it drops and we see the waiting to connect message which is why I wondered if its related to #1580. Maybe I am missing something in our build? Is there anything else useful I can tell you about our setup? Thanks for responding so quickly

[phryneas]

We were working under the impression in 3.9 that dev tools is on by default and you don't need to tell it to initialise explicitly if you're running React in Dev mode.

We did change the way we detect dev mode in 3.9, and that default would change based on that. Maybe you need an additional setup step? It's not very likely that's the cause here since we're defaulting to "development", but it might be worth a look:

https://www.apollographql.com/docs/react/development-testing/reducing-bundle-size#turning-off-development-mode

[mairead]

I've tried setting the global in Vite config to force it to true and I also tried a vite build to run from production mode as well as dev mode. No dice sadly.

define: {
      'globalThis.__DEV__': JSON.stringify(true),
    },

We also have a NextJs app working with a slightly simpler config and this is set to 3.11, and with the addition of the devtools enables this app can definitely connect which suggests to me that there is something in the setup of our plain React app causing the issue.

We have had some trouble trying to upgrade the apollo-upload-client lib, so we are still running 17.0.0. I don't know if that can interfere with the apollo client and it's connection to dev tools?

this is our working nextjs client config

const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_GRAPHQL_URI,
  cache: new InMemoryCache(),
  devtools: {
    enabled: true
  },
  defaultOptions: {
    query: {
      fetchPolicy: 'no-cache',
    },
  },
})

This is the implementation of our uploadLink from apollo-upload-client

import { createUploadLink } from 'apollo-upload-client'

const uploadLink = createUploadLink({
  uri: '/api/graphql',
  credentials: 'same-origin',
  headers,
})

const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query)
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
  },
  wsLink,
  uploadLink as unknown as ApolloLink
)