useLazyQuery throws typescript error

[Epshiba]

Issue Description

Hi Team,

I am using apollo/client v3.12.7 in my application. I am getting typescript error of "Uncaught TypeError: observable.maskResult is not a function" when I lazily loaded the components using useLazyQuery. When I checked the code, it goes to complete method of executeQuery function.

Link to Reproduction

//test

code:

import { useLazyQuery } from '@apollo/client';
import { GET_PROFILE } from '../get-profile';

export const Test = () => {
const [loadGreeting, { data, loading, called }] = useLazyQuery(GET_PROFILE,{});
if (called && loading) return {console.log('loading')};

if (!called) {
return {console.log('loading button')};
}
return

Hello I am in

;
};

Reproduction Steps

No response

@apollo/client version

3.12.7 onwards

[phryneas]

Could you please verify that you don't have two versions of Apollo Client installed side-by-side by chance?

If you use npm, run npm why @apollo/client or npm ls @apollo/client, in yarn use yarn why @apollo/client.

[Epshiba]

When i tried, I use internal shared package which has this package as dependency.
so I got below, when tried yarn why @apollo/client.
info Has been hoisted to "@apollo/client"
info Reasons this module exists

• Specified in "dependencies"
• Hoisted from "@internal-shared#@apollo#client"
• Hoisted from "@internal-shared#apollo-client-react#@apollo#client"

[phryneas]

It's more about the version numbers - to me this looks like you have a mix of Apollo Client 3.12 and an older version going on - your ApolloClient instance is probably older (does that get created by your shared package?) while your hooks are from >=3.12

[Epshiba]

yes, i tried with both created by my shared package as well direct Apollo client package. When I remove direct one, the hooks are getting triggered from my shared package and when I use direct one, its triggered from direct Apollo client hooks. Both time I am getting this typescript error.

In my shared package, it was mentioned that @apollo/client : ^3.10.8 as dependency and when I did yarn install, it installed @apollo/client version "3.12.8"

[phryneas]

Both time I am getting this typescript error.

Not really relevant, but I want to point this out - a TypeError is actually not a "TypeScript error", but a JavaScript runtime error - not really relevant here, but might be good to know ;)

---

Back on topic: Could you please share the full output of yarn why @apollo/client?

maskResultwas added in 3.12.x, so the only explanation that you're getting this error is really an outdated ApolloClient instance that creates an outdated observable with new hooks - we have to investigate this route a bit more.

Also, just to make sure: did you clean all your caches, maybe nuke your node_modules folder and reinstall everything?

[Epshiba]

Thanks @phryneas for the reply, let me delete node_modules and try it out once. Meanwhile, this the o/p I got when I ran why @apollo/client

1/4] 🤔 Why do we have the module "@apollo/client"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "@apollo/[email protected]"
info Has been hoisted to "@apollo/client"
info Reasons this module exists

• Specified in "dependencies"
• Hoisted from "@shared-package#@apollo#client"
• Hoisted from "@shared-package-react#@apollo#client"
  info Disk size without dependencies: "9.83MB"
  info Disk size with unique dependencies: "12.05MB"
  info Disk size with transitive dependencies: "13.07MB"
  info Number of shared dependencies: 24
  ✨ Done in 0.43s.