Select option with getQueryData, getQueryState

[dongqui]

Even if I set a select option on useQuery, getQueryData still gets the data from the queryFn, not from the selectFn.

The cached data is definitely what the selectFn returns. So, isn't it more intuitive that getQueryData returns the selected one?

[TkDodo]

no, that's not how it works. There is the cache that holds one entry per key. That is determined by what the queryFn returns, and this is what you'll get with getQueryData, and it's also what you'll see in the devtools.

select can be customized on top of that to create fine-grained subscriptions per observer. So you can do:

const useTodos = (select) => useQuery(['todos'], fetchTodos, { select })

and then use that like:

const useTodoCount = () => useTodos(data => data.length) // will return a number
const useFirstTodo = () => useTodos(data => data[0]) // will return the first todo or undefined

so the bottom line is: every usage of useQuery (= every observer) can have their own select, and only subscribe to a part of the result.

For example, if you refetch and there is a new todo, useTodoCount will re-render with the new count, but useFirstTodo will not because the first todo didn't change.

On the other hand, if you change the first todo, the count stays the same so it will not re-render because it's only subscribed to the length of the array.

[dongqui]

Ah, that makes sense. Thank you!