search

apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.38k stars 2.66k forks source link

Typeguard for useQuery fails when the queryOptions passed using spread operator #11874

Closed ashishbairwa closed 5 months ago

ashishbairwa commented 5 months ago

Issue Description

When we pass query options in spread operator, it escapes type checking which results in unexpected issues and behaviour

Sample query use which fails typechecking:

const {
  loading: getUserInfoLoading,
  error: getUserInfoError,
  data: getUserInfoData,
} = useQuery(GET_USER_INFO, {
  variables: { uuid: memberId },
  skip: validUrlParams === false,
  errorPolicy: 'all',
  fetchPolicy: 'network-only',
  notifyOnNetworkStatusChange: false,
});

Link to Reproduction

https://stackblitz.com/edit/react-apollo-client-demo-oldapm?file=src%2FCountryDetail.js

Reproduction Steps

  1. Import useQuery
  2. Prepare options and pass them via spread operator
  3. Observe apollo-client working without throwing any error

@apollo/client version

3.6.6

bignimbus commented 5 months ago

Hi @ashishbairwa 👋🏻 I'm a middling TypeScript practitioner at best, but I think you're seeing a default behavior of TypeScript. Here's a TS Playground demonstrating the same behavior without Apollo Client:

https://www.typescriptlang.org/play/?#code/C4TwDgpgBAYg9nKBeKBvAUFKAzBAuKAZWACcBLAOwHMBuTKAIwEMSDjzq6BfddAYzgUAzsBz5YCZGnq44BAOSz5AGnrNWUeepX0AdPtSMmALwXNj8qF1Vc6-QULgAbCLqdwqAClkBKGkA

Screenshot 2024-05-31 at 2 09 27 PM Screenshot 2024-05-31 at 2 08 43 PM

That said, I'll check with the team to see if it's possible/advisable to implement some kind of utility type for this use case and get back to you!

bignimbus commented 5 months ago

Also, I'm not certain your stackblitz or code snippet is entirely illustrative of the issue - the former is in JavaScript and the latter doesn't use a spread operator, so I tried to recreate this in our Spotify Showcase from your description.

bignimbus commented 5 months ago

Hi @ashishbairwa - we've discussed some pros and cons and won't be moving forward with attempting to narrow the types in this way. Doing so could be backwards-incompatible for some users, and we don't see a straightforward way to implement such an abstraction without a considerable amount of work. In the interim I recommend adding the relevant type annotations to the objects that you spread into useQuery. Thanks!

github-actions[bot] commented 5 months ago

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

github-actions[bot] commented 4 months ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.