Can't seem to default TData to TQueryFnData when select not supplied

[scallaway]

Hi there,

I'm trying type my query correctly, whilst also enabling support for a selector function.

What I have currently is the following;

export function useMyResources<T = ReadonlyArray<MyResource>>(
  select?: (queryData: ReadonlyArray<MyResource>) => T,
): UseQueryResult<T, Error> {
  return useQuery<ReadonlyArray<MyResource>, Error, T>({
    queryKey: ["my-resources"],
    queryFn: fetchMyResources,
    staleTime: 60000,
    select,
  });
}

Obviously the details of the query aren't really relevant to the context of the issue, but they're present for clarity.

What I'd love to define is the following;

export function useMyResources<
  QueryData = ReadonlyArray<MyResource>,
  Data = QueryData,
>(
  select?: (queryData: QueryData) => Data,
): UseQueryResult<Data, Error> {
  return useQuery<QueryData, Error, Data>({
    queryKey: ["my-resources"],
    queryFn: fetchMyResources,
    staleTime: 60000,
    select,
  });
}

This means that in the event that the data isn't transformed through select, it defaults back to QueryData.

However, this does not compile and instead throws the following error at me;
Object literal may only specify known properties, and 'queryKey' does not exist in type 'readonly unknown[]'.

I've seen mentions of ensuring that all the generics are covered, but I couldn't get that to work in my case. It seems a little bit odd that useQuery is falling back to unknown[] in this case, even though the types are specified.

Any guidance on this would be greatly appreciated!

[TkDodo]

you'd want:

export function useMyResources<
  Data = ReadonlyArray<MyResource>,
>(
  select?: (queryData: ReadonlyArray<MyResource>) => Data,
) {
  return useQuery({
    queryKey: ["my-resources"],
    queryFn: fetchMyResources,
    staleTime: 60000,
    select,
  });
}

[scallaway]

Are you saying that something like the second scenario isn't possible? Because that's very similar to what I have in the first scenario, just with less explicit typing.

For context, we have @typescript-eslint/explicit-module-boundary-types enabled.

[TkDodo]

it sure works with annotated return types as well: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0cAqhtrngErqrIA28AvnAGZQQhwDkAAjAIYA7VAIDGAawD0UdP1EwAtAEcc+LgFgAUFph4w6OAFkqNCMiiiDAXkRxgAEwBccEVGCCA5nEZatLZILywBCCrOgwogAWxtSoZhY0ABQAlM7U-PYhdHgAglBQ-HgAPDGm5pYAfIhacHAyMOahANpIDs4ARACM7YwAulo+2proAB6QsKwBQSEoGKVx5TRFNXAAIvwCcDbpmYLZeQXF8-GVBFoViSsYdOjyAPzOiSoU6wJpsrv7+YUlJgsJFWSWyqr34Z00qRIZFUf3oMCKoKqCBW9UasywMMSyM0tVqz3wAGl0HhnE12iA8AoZP9LKh2r1wbi4Pi8AAxQTOFjhKLHRaoRm4kT8G4AFVA6GcADYAAyy6UC2rXW4wAWMZIAbgGviGohCIls9g2-G8W3RvISqBSWkkkiZtQAendtbrhPAbp4YJFyPhTWh0ObaYkRsC4CMAHTujye5JaSOe714MOGgTW212pmOoA

[scallaway]

Yeah I guess what I've realised is that the type I was trying to build was unnecessarily complex - your way is much better!