React Query, Select not showing up in devtools
In an example like the one from TKDodo's blog as shown below:
export const useTodosQuery = (select) =>
useQuery(['todos'], fetchTodos, { select })
export const useTodosCount = () => useTodosQuery((data) => data.length)
export const useTodo = (id) =>
useTodosQuery((data) => data.find((todo) => todo.id === id))
Is it intented that the select is not shown in the DevTools? Would it not be beneficial to see the return data from the select function?
5 Replies
environmental-roseOP•4y ago
I was thinking is it an advisable pattern to do an extra useQuery where the queryFn is one of these hooks. For example adding
const useTodosCountQuery = () => useQuery(['todo-length'], useTodosCount)
Then that would make it a "new" query thats essentially just selecting from another useQuery?
Idk maybe this is just not an advisable pattern for a certain reason? Im just brainstorming
fair-rose•4y ago
the devtools only show what's in the cache, plus the number of observers (at the beginning). every observer can have different selects
environmental-roseOP•4y ago
I see
But then is my approach to wrapping a select hook with a useQuery, effective or is it redundant and will run into issues in the future
fair-rose•4y ago
it's a feature for fine grained subscriptions. i think its nice for type inference, and it's quite render optimized. not sure what "issues in the future" has to do with devtools 😅
environmental-roseOP•4y ago
Oh well i meant just in general that it would cause some unexpected issues. But seems like it should be fine! Thanks