Wrong data type when use with Query Key Factory
Hi everyone,
I'm using React Query (React v5) + Query Key Factory + Typescript
I have created query keys with
queryFn already, which's returning a promise of array, but when I try to get data (query.data) it's giving me an object, so my linter is complaining about it.
Codesandbox example: https://codesandbox.io/s/priceless-sara-ieo874?file=/src/App.tsx
In the example above, you can see the <List items={query.data} /> having lint error
Is there a way to get the type correctly without define it in useQuery, like: useQuery<MyDataType>(queries.foo()) ?CodeSandbox
priceless-sara-ieo874 - CodeSandbox
priceless-sara-ieo874 using @lukemorales/query-key-factory, loader-utils, react, react-dom, react-query, react-scripts
4 Replies
deep-jade•3y ago
The issue seems to be that
query.data is of type unknown. I see that your sandbox imports react-query v3 though and it seems to be fixed if I import @tanstack/react-query (v4) instead.national-goldOP•3y ago
Ohh! Indeed! I changed it to the new version of React-Query and it worked
But it seems ignoring
select return type, I added select to useQuery, and passing the query.data to my <List items={query.data} /> component (items: number[]), but it still seem as a list of object
(I updated my codesandbox)conscious-sapphire•3y ago
I thought this package was for managing queryKeys, not "full" query objects. but then again, I don't know it that well
if you have questions about the 3rd party lib, please ask the author @Luke Morales
national-goldOP•3y ago
right, make sense hehe, sorry for mixing things, let me ask him
and thank you for clearify 😉
Oh God, I think it only support
queryKey and queryFn, doesn't support select, I'm so sorry