CODEWITHSUNDEEP
javascripttypescriptreduxreact-reduxrtk-query
Dave
Dave

Reputation: 11

Define type for createSelector from useQuery result

I try to get the correct typings for the createSelector res parameter, but I can't seem to find the correct one from redux-js as there is no example or explanation regarding this usage in TypeScript, only in JS.

const selectFacts = React.useMemo(() => {
    return createSelector(
        (res) => res.data,
        (data) => (data ? pick(data, facts_keys) : undefined)
    );
}, []);

const { facts } = useGetProfileQuery(user?.email ?? skipToken, {
    selectFromResult: (result) => ({
        ...result,
        facts: selectFacts(result),
    }),
});

As can be seen here: https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#selecting-values-from-results

No example showing how this should be done in TypeScript, has anyone else already faced this?

I eventually ended doing type assertion so i won't get stuck on a type definition error.. But this is not ideal at all so any alternatives would be welcomed.

Upvotes: 1

Views: 517

Answers (2)

Alexander Prus
Alexander Prus

Reputation: 31

I had the same problem and managed to fit the types for selector the following way (adapted my code to your example):

return createSelector(
        [(res: UseQueryStateResult<any, any>) => res.data],
        (data : Profile) => data ? pick(data, facts_keys) : undefined
)

However, I'm not actually sure that it's correct.

Upvotes: 1

phry
phry

Reputation: 44086

You don't need the "full type" of something like that. Just specify what you need.

Your selector only accesses data, and on another point in your app you defined that endpoint so you have an interface for that flying around already.

So you can just do

const selectFacts = React.useMemo(() => { 
  return createSelector(
    (res: { data: YourDataInterfaceOrType }) => res.data, 
    (data) => (data ? pick(data, facts_keys) : undefined) 
  ); 
}, []);

Upvotes: 1

Related Questions