useLazyQuery is not working on next js 14.2.19

[iambharathpadhu]

Issue Description

Hello all,
I am trying to use useLazyQuery for one of my query , and it is not even triggering in my network tab, but when running yarn dev , and from code, changing the fetch option or adding fetch option triggers the query automatically and before I do a refresh manually the query is triggering when clicking button.

const httpLink = new HttpLink({
  uri: process.env.NEXT_PUBLIC_GRAPHQL_URL
})

export const client = new ApolloClient({
  cache: new InMemoryCache(),
  connectToDevTools: true,
  link: from([errorLink, httpLink])
})

This is my client config, and this is how I am using it

'use client'

import { useLazyQuery, useQuery } from '@apollo/client'
import { Button } from '@chaine/chaine-ui'
import React from 'react'

import { GET_SIGNED_URL } from '../../../../../data/queries'

const InboxPage = () => {

  const [getSignedURL] = useLazyQuery(GET_SIGNED_URL, {
    onCompleted: async (data) => {
      console.log('data', data)
    }
  })

  if (loading) return <div>Loading...</div>
  return (
    <div>
      <Button
        onClick={() => {
          getSignedURL({ variables: { imageType: 'image/jpg' } })
        }}
      >
        dummy
      </Button>
    </div>
  )
}

export default InboxPage

and this is how I am using the apollo provider

'use client'

import { ApolloProvider } from '@apollo/client'
import type { ReactNode } from 'react'
import React, { Suspense } from 'react'

export const Providers: React.FC<{ children: ReactNode }> = ({ children }) => {
  return (
    <Suspense>
      <ApolloProvider client={client}>
              {children}
      </ApolloProvider>
    </Suspense>
  )
}

I am then calling this Providers at my layout.tsx file

I am using Next js version - 14.2.19
"@apollo/client": "3.11.8",

Link to Reproduction

Reproduction Steps

No response

@apollo/client version

3.11.8

[phryneas]

That code looks correct so far.

Generally, you should be using https://github.com/apollographql/apollo-client-nextjs as we can't support the Next.js App Router without that, but this specific case should not be affected by that.

I'm sorry, but we will really need a reproduction of the issue where we can click ourselves and analyze the problem from there - with just these code snippets, there's not much we can do.

[tanuj-g]

@iambharathpadhu

I faced a similar issue in the past, and after some debugging, I realized that useLazyQuery doesn't work with SSR (Server-Side Rendering) in a Next.js app. By default, Apollo Client tries to run the query on the server during SSR, but useLazyQuery is meant to be executed dynamically (like on user actions) and not during the initial render.

Solution:
You can disable SSR for your app or set the SSR option to false in the useLazyQuery configuration. Here’s how you can update your code:

const [getSignedURL] = useLazyQuery(GET_SIGNED_URL, {
   ssr: false,
   onCompleted: async (data) => {
      console.log('data', data)
   }
})

Why this works:
By passing ssr: false, you ensure that the query doesn't attempt to run during the server-side rendering process, and it only executes on the client side when explicitly triggered (e.g., by a button click).

Let me know if this resolves your issue!

[iambharathpadhu]

@tanuj-g I tried this and it is also not fixing my issue, to share a repo with @phryneas , I created a dummy repo with same next js and apollo client version and used same code, and in that the useLazyQuery is working as expected, but in my repo which is a monorepo built using yarn workspaces, only during HMR if in my code I change any of the options of the useLazyquery liek fetch-policy or ssr, it starts to work until I do a hard refersh on browser ! Feels weird ! But when the app loads it does nto work, if i change fetch policy or ssr in code, it starts working, and after refresh it does not work !

[phryneas]

Generally, yes, useLazyQuery works only after user interaction, and since users cannot "interact" on the server and also because there is only a single render on the server, and never a rerender, useLazyQuery will never be able to give you a result on the server.

It seemed that @iambharathpadhu was having this problem after user interaction in the browser, though?

[phryneas]

PS: I'm going back and forth about that ssr option.

I think you should not be using that with useLazyQuery - that would give you a loading: true status, and then once your component hydrates, it would likely hydrate in the browser with loading: false, because you didn't start the query yet (the user didn't have a chance to interact with the page yet), giving you a hydration error.

[iambharathpadhu]

@phryneas Actually I think it is some configuration issue with my current application, when I try with same library version next js 14.2.19, and apollo/client 3.11.8, in a new app, the useLazyQuery is triggering the call, but only on my app, it is not working. Also, I am wondering how it works on HMR, when I change something on my code, and before I do a refresh the query is working.

[phryneas]

@iambharathpadhu I fear in that case we cannot really do a lot from our side :/

I would suggest we close the issue here as we can't really do anything, but if you find a way to reproduce this outside your app, please comment, and we reopen it.

Please also leave a comment if you found out how to fix it in your app - that might help someone else running into the same situation in the future.