Typescript for useQuery hook that can take a select or uses the default one if its undefined.

[matzxrr]

I'm trying to write a simple wrapper hook for useQuery that lets the user define their own select. If they don't define a select, the default implementation is used.

I'm trying to figure out why this typing wont work.

interface Params {
  session: string;
  types: number[];
  select?: <TResult>(data: AxiosResponse<Alerts>) => TResult;
}

const useAlerts = ({ session, types, select }: Params) => {
  return useQuery({
    queryKey: [ALERTS, session, types],
    queryFn: getAlerts(session, types),
    select: select !== undefined ? select : ({ data }) => data
  });
};

export default useAlerts;

const { data } = useAlerts({
  session: 'abc',
  types: [123, 1234, 12],
  select: ({ data: innerData }) => innerData[0] // TS Error Here
});

console.dir(data);

The error I'm getting is...

Type 'Alert' is not assignable to type 'TResult'.
'TResult' could be instantiated with an arbitrary type which could be unrelated to 'Alert'.

Anyone know how to do this?

[TkDodo]

just always pass select and give it a default type parameter:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgQQB7AgZwEoFNOQB2mucAvnAGZQQhwDkAhulvQFCiSyJwCuJARV64oAT3JUadegAEYjYvIDGAawD0UXIyUwAtAEdhY9mxiiwpZABsRMTHAC8iNnFdxGN2AC4GH2+zIAbQBdNg5CGBFKbVIABUYoRhBMAB4AFTxMXit4JzQMHHwiEhTrW0wAPgrnVxJMTAxCH0wYKGBCAHMAbhc4MwtMH0JeEAAjERCe2twbHQB+HwAKABNGeR98rEzi3FLPOwqASkdqjPxsmB6yMOXcJSsE0kpeQh1GuA7cGDLYTEW6hoQJpwFptToAGj65nwQxG4ygIUOPliUmAJU2hQIQPR+0qFTCSmx8H4uB+dkccHSmQuFIx22xuzJeMWSABjUh-XwkJIs3gZGRCSSqTOWRyRxONTgmhgvCghD4giMohZvVchhEogA0rhRD5AgAiZAAGQAotg0gBlfXc-CAwgc6GYYLg1VwdViABiwMWxwc1U+31x-1t7KhA0OLrcIJmdxgvTIhyuPTYuFQXHgt2iNJJTOThMUPFW8gkThzQYQvTZQJ8TFGSnokbDMLggQAjAAmADMkI7nYALD3287KzGdEskEXGD52oQRAARNaMci+6oz+eLwIABmCcDUajglrgJqgNCgcAAEiJcGwE3nsRAbAA6ZbAKArReJoA

the data unwrapping of axios should happen in the queryFn because otherwise, you are storing too much information (axios metadata, which is non-serializable) in the cache