Typing query result in createSelector

[taochu]

In the Selecting Values from Results example, what is the proper way to type the res argument of res => res.data in createSelector?

[phryneas]

If you write that inline it should already have the correct type without you writing anything.

[taochu]

@phryneas

Thanks for the swift response! What about if I want to define the selector in my apiSlice.ts so that multiple components can use the same selector instead of having to define the same selector in each component.

So basically

// apiSlice.ts

export selectPostsByUserId = createSelector(
  res => res.data,
  (res, userId) => userId,
  (data, userId) => data?.filter(post => post.user === userId) ?? emptyArray
)

// ComponentOne.tsx
const { userPosts } = useGetPostsQuery(undefined, {
  selectFromResult: res => ({
    userPosts: selectPostsByUserId(res, userId),
  }),
});

// ComponentTwo.tsx
const { userPosts } = useGetPostsQuery(undefined, {
  selectFromResult: res => ({
    userPosts: selectPostsByUserId(res, userId),
  }),
});

Or is ☝️ not a good pattern to follow?

[phryneas]

Just hovering res in that case doesn't give you the type you need? Apart from that, I'd personally type it just like the data I need in my selector - so something like { data?: Array<MyUserData> }

[taochu]

Actually it's data that's giving the ts warning that reads Property 'data' does not exist on type 'CombinedState<{... since I guess it expects res to be the whole redux state instead of just the response from this query 🤔

But your suggestion makes sense => typing res to be {data?: Array<MyUserData>} could work