Apollo Dev Tools Chrome extension will not detect the apollo client

[pranay-deloitte]

I am using apollo client in a react app with next.js

Here is the client code, no matter what I do, my app that is running in localhost will not be able to connect to the extension. Please help

// import * as React from 'react';
// import Container from '@mui/material/Container';
// import Typography from '@mui/material/Typography';
// import Box from '@mui/material/Box';
// import Button from '@mui/material/Button';
// import NextLink from 'next/link';
// import ProTip from '@/components/ProTip';
// import Copyright from '@/components/Copyright';

// export default function About() {
//   return (
//     <Container maxWidth="lg">
//       <Box
//         sx={{
//           my: 4,
//           display: 'flex',
//           flexDirection: 'column',
//           justifyContent: 'center',
//           alignItems: 'center',
//         }}
//       >
//         <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
//           Material UI - Next.js example in TypeScript
//         </Typography>
//         <Box sx={{ maxWidth: 'sm' }}>
//           <Button variant="contained" component={NextLink} href="/">
//             Go to the home page
//           </Button>
//         </Box>
//         <ProTip />
//         <Copyright />
//       </Box>
//     </Container>
//   );
// }
import * as React from 'react';
// import { fetchGraphQL } from '@/lib/apollo-client';
import fetch from 'cross-fetch';
import Typography from '@mui/material/Typography';
import { ApolloClient, HttpLink, InMemoryCache, gql } from '@apollo/client';

// Extend the Window interface to include __APOLLO_CLIENT__
declare global {
  interface Window {
    __APOLLO_CLIENT__?: ApolloClient<any>;
  }
}
 

// HELLO_QUERY will be constructed inside the HomePage function

type PageProps = {
    params: { username: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

function getApolloClient() {
  return new ApolloClient({
    ssrMode: true,
    link: new HttpLink({
      uri: 'http://localhost:4001', // Replace with your endpoint
      fetch,
    }),
    cache: new InMemoryCache(),
    defaultOptions: {
     watchQuery: {
       fetchPolicy: 'cache-and-network',
     },
   },
   connectToDevTools: true, // Enable Apollo Client DevTools
  });
}

export default async function HomePage({ params, searchParams }: PageProps) {
   const { id } = await searchParams;
   const { username } = await params;
  
  const graphqlQuery = gql`
  query($objectId: String!) {
    object(id: $objectId) {
      id
      name
      data
    }
  }`;
  const client = getApolloClient();
  
    if (typeof window !== 'undefined') {
      window.__APOLLO_CLIENT__ = client;
    }
    
  const { data } = await client.query({
    query: graphqlQuery,
    variables: { objectId: id }
  });

  return (
    <div>
      <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
        API Response {data.object.name}
      </Typography>
        <Typography variant="h4">
          sample from URL: {id}
        </Typography>
        <Typography variant="h4">
          Username from URL: {username}
        </Typography>
        <p>
          Color: {data.object.data.color}, Capacity: {data.object.data.capacity}
        </p>
      </div>      
    );
}

@apollo/client version

latest

Apollo Client Devtools version

4.18.15 (Chrome)

[pranay-deloitte]

I am making the apollo client call at server side, is there still a way to connect to Apollo Dev Tools or how do I basically debug and troubleshoot what's happening on the Apollo Server. I want to know if the API is served from cache or is making a new API call via the RESTDatasource for every request.

[phryneas]

No, it's not possible to debug the server side (apart from e.g. using a logging ApolloLink).

That said, yes, on the server side, it's making a new API call on each request. You create a new ApolloClient instance for each incoming request, and you need to do that, because on the server you have no way of distinguishing users from each others, and if you didn't you'd leak sensitive information from one to the other.

This is using the old pages router, correct?