what's the difference between the TData and TQueryFnData

[NewFuture]

I found that there are two types for data TData and TQueryFnData .

useQuery<TData = unknown, TError = unknown, TQueryFnData = TData>;
QueryOptions<TData = unknown, TError = unknown, TQueryFnData = TData>;

And when will the two types be different?

[boschni]

They have actually been switched in the latest release. But TQueryFnData is the data returned from your query function, and TData is the eventual data. The eventual data can be different from the query function data when using select for example.

[jedwards1211]

QueryObserverOptions<..., TQueryData, ...> gets forwarded to QueryOptions<..., TData, ...> so that adds to the confusion

[jedwards1211]

And in QueryObserverOptions we have

  select?: (data: TQueryData) => TData

Would have expected TQueryFnData according to your answer here. So it's hard to tell what the difference between TQueryFnData and TQueryData is supposed to be

[TkDodo]

I agree, it's pretty confusing right now. One of them is only for infinite queries 😅 . If you understand it, please file a PR to refactor it 😆

[braden-w]

Hey everyone, I think I've finally wrapped my head around these generic types, and wanted to share in case it helps others!

The main confusion seems to stem from three key generic types you'll see in QueryObserverOptions (from packages/query-core/src/types.ts around line 311):

• TQueryFnData: This is simply the type of data your queryFn returns.
• TQueryData: This represents the type of data that's actually stored in the query cache.
• TData: This is the type of the data after the select function has been applied. It's what your component or hook ultimately receives.

So, a good way to think about TData is that it's the final, transformed data you work with in your application.

Now, for most standard queries, TQueryFnData (what your function returns) and TQueryData (what's in the cache) are usually the exact same. You fetch something, and that exact thing is stored.

The tricky part comes with infinite queries. If you look at InfiniteQueryObserverOptions (in packages/query-core/src/types.ts), you'll see something like this:

// ...
extends QueryObserverOptions<
      TQueryFnData,
      TError,
      TData,
      InfiniteData<TQueryData, TPageParam>, // <--- The key!
      TQueryKey,
      TPageParam
    >
// ...

• For infinite queries, TQueryFnData is the type of data for fetched data.
• However, what's actually stored in the cache isn't just TQueryData directly; it's InfiniteData<TQueryData, TPageParam>. This InfiniteData type is a wrapper that holds all your pages and page params.

So, TQueryData acts as an intermediate step for infinite queries. It defines the shape of fetched data before it gets bundled into the InfiniteData structure for caching.

I did spend a lot of time exploring if TQueryData could be removed to simplify things. While it might be theoretically possible to refactor the types to use only two main data generics, it was an extremely complex undertaking with a lot of cascading changes. Plus, the current setup offers flexibility if the internal structure of how infinite query data is stored ever needs to evolve.

For now, it works as is! The main takeaway that helped me was understanding that TQueryData is essentially "the type of the data that goes into the cache," which is usually the same as TQueryFnData unless it's an infinite query, where it's the type of a single page within the InfiniteData wrapper.

Hope this helps clear things up for anyone else who was scratching their head over this!

[TkDodo]

yes, this is a very good summary