useQuery typings fails to require required variables from TypedDocumentNode, causing runtime error

[irond13]

Issue Description

Hi!

The current typings for useQuery are as follows:

export declare function useQuery<TData = any, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: QueryHookOptions<TData, TVariables>): QueryResult<TData, TVariables>;

Note that options is always optional. This means it is possible to pass a TypedDocumentNode which defines non-optional variables to useQuery without actually passing any of the required variables.

This will result in runtime error, thrown by the GraphQL evaluator, which would expect said variables.

Link to Reproduction

https://codesandbox.io/p/sandbox/dazzling-borg-o6fr3u?welcome=true

Reproduction Steps

See file useQueryTest.tsx in the linked sandbox. The expectation is that the uncommented useQuery should fail to compile, which it doesn't.

[jerelmiller]

Hey @irond13 that is a great catch! We will see if we can take a look at this. I can't guarantee on timeline on this fix at the moment, but if you have a fix in mind, feel free to submit a PR and we will take a look!

[nandin-borjigin]

Please also correct the typing on options.variables. It's optional as well so even if the options was required, we can still incorrectly call it as

useQuery(
  someTypedQueryDocument, 
  {} // type checker doesn't detect missing variables property
)

[chipcop106]

I have the same problem. How do I fix it?

[phryneas]

This requires a bunch of bigger changes (as it would apply to all hooks).
You can follow the process over in #11241

[tannerbaum]

Forgive me if I am mistaken, is this the same thing I am experiencing with my generated types through graphql-codegen and @apollo/client which worked fine until a round of dependency updates?

Argument of type 'QueryHookOptions<PageContentQuery, Exact<{ slug: string; locale: Gcms_Locale; }>>' is not assignable to parameter of type 'QueryHookOptions<any, OperationVariables>'.

[phryneas]

@tannerbaum no, that's a different issue. I'd be grateful if you could open a new issue and provide a small reproduction that shows the issue so we can investigate it.

[jigar-riyalto]

Do you have any update on this issue?
I am getting the following error, please correct me if it's related to a different issue.
Apollo client version: 3.8.7

  Type '{ loadMore: (mergeFunc: (previousResults: TData, fetchMoreResult: TData) => TData, extraVariables: RequireAtLeastOne<TVariables, keyof TVariables>) => Promise<...>; ... 15 more ...; fetchMore: <TFetchData = any, TFetchVars extends OperationVariables = OperationVariables>(fetchMoreOptions: FetchMoreQueryOptions<...> ...' is not assignable to type 'QueryResult<TData, TVariables>'.
    The types of 'observable.options' are incompatible between these types.
      Type 'WatchQueryOptions<OperationVariables, any>' is not assignable to type 'WatchQueryOptions<TVariables, TData>'.
        Type 'OperationVariables' is not assignable to type 'TVariables'.
          'TVariables' could be instantiated with an arbitrary type which could be unrelated to 'OperationVariables'.ts(2322)

[phryneas]

@jigar-riyalto it's an unrelated issue - could you please open a new issue and also show the code that is causing this type error?