feat: Type Definition for the data property of QueryResult

[sshanzel]

First, thank you for this wonderful library. Second, I'd love to contribute just let me know where I can start 🎉

Describe the bug feature request
Currently, the type for the getQueryData can only be defined by a generic parameter. I think we can also use a generic type that extends the typeof of a custom hook where we originally used the key which will infer the TResult of the QueryResult. So that we can also pass the typeof of a custom hook and the type will automatically be what is desired.

I am fairly new with the library so please kindly inform me if I misunderstood the correct implementation.

To Reproduce
Steps to reproduce the behavior - this is how I use react-query:

Then whenever I want to fetch the cached data which the SAMPLE key was used. I do this:

In my humble opinion, I do feel that there is a greater margin for mistyping the actual definition of the desired custom hook when type inference is being utilized (like the example above with useSample hook. I am actually a victim of this problem as I didn't realize the getQueryData returns the data property already so I defined my getQueryData execution with the ReturnType<typeof useSample> without even checking the documentation of the actual return type).

Expected behavior
I defined a type that infers the generic parameter which resulted to this:

Instead of returning the type QueryResult it inferred the type of the data property which I think is appropriate with the current case for getQueryData.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [Windows]
• Browser: [Chrome]
• Version: [86.0.4240.183]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser: [e.g. stock browser, safari]
• Version: [e.g. 22]

Additional context
I can immediately request a PR if this is deemed appropriate 💯

Related Issue

[TkDodo]

Not sure what you would want to add to the library. I think the types are technically correct because react-query cannot know what is in the cache, thus the type is unknown. I can put an arbitrary value into the cache at any time. We are also not forced to use custom hooks, so I don't quite get it. Can you elaborate a bit on what you would want to do to improve the types please?

[sshanzel]

I guess I was just wanting it to be how Redux infers the actions once the type property is defined which is if we're talking about react-query it would be when you define the key that it will be able to infer the type on where it was used (like on custom hooks).

No worries, I have just created a wrapper on my project for the getQuery and getQueryData to achieve the screenshots I have attached above.

[tannerlinsley]

Seeing how this is not a bug per se, going to convert to a discussion.

[eddietex]

I just had the same thought while using getQueryData: "Why is this not inferring the type based on the key I'm providing?"

Not sure how easy to accomplish this is though. I'd require a setup up-front to tell the library what are the types for each key.

Maybe the best solution for this is to just create a helper function that knows of that type, like @sshanzel mentioned.

Curious if others also had the same thought, and what their solution for this was.

[roblabat]

Hi @eddietex,

I have the same thought about getQueryData. I implemented a solution on my project based on types override of the lib typings and I think it could be implemented in the lib easily. I opened a discussion on my suggestion, feel free to comment. #6105
Does this would solve your type inference issue ?