Dev tools cannot connect to my project with Apollo client and Next.js #1687
Description
When refreshing the Next.js page, Apollo client dev tools cannot connect to my Apollo client. I have connectToDevTools enabled in the client.
Link to Reproduction
import { ApolloClient, InMemoryCache } from '@apollo/client'
export const client = new ApolloClient({
uri: 'https://graphqlplaceholder.vercel.app/graphql',
cache: new InMemoryCache(),
connectToDevTools: true,
name: 'apollo-client-dev',
version: '1.3',
queryDeduplication: false,
defaultOptions: {
watchQuery: {
fetchPolicy: 'cache-and-network',
},
},
})'use client'
import { Button } from '@/components/ui/button'
import { gql, useMutation, useQuery } from '@apollo/client'
const CREATE_POST = gql`
mutation CreatePost {
createPost(post: { userId: 1, title: "title", body: "body" }) {
id
title
body
}
}
`
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
body
}
}
`
type Post = {
id: number
title: string
}
const Home = () => {
const { loading, error, data } = useQuery(GET_POSTS)
const [addPost, { data: mutationData }] = useMutation(CREATE_POST, {
update(cache, { data: { addPost } }) {
cache.modify({
fields: {
posts(existingPosts = []) {
const newPostRef = cache.writeFragment({
data: addPost,
fragment: gql`
fragment NewPost on Post {
id
text
completed
}
`,
})
return [...existingPosts, newPostRef]
},
},
})
},
})
if (loading) return 'Loading...'
if (error) return `Error! ${error.message}`
return (
<div>
<Button
onClick={() => {
addPost()
console.log(mutationData)
}}
>
addPost
</Button>
{data.posts.map((post: Post) => (
<p key={post.id}>
{post.id}: {post.title}
</p>
))}
</div>
)
}
export default Home@apollo/client version
^3.13.8
Apollo Client Devtools version
4.18.15 (Firefox)