select option for queries

[brenoliradev]

Hey! Just a feature request for: https://tanstack.com/query/latest/docs/framework/react/guides/render-optimizations#select

I'm on my way to building features to use pinia-colada on my project on the future instead of vue-query so I'll work in this. Just creating the issue so we can discuss it here too.

[posva]

I'm actually not a big fan of select, I don't think it's needed for Vue because the

This is useful for highly optimized data transformations or to avoid unnecessary re-renders.

doesn't apply.

I would personally just write that logic within the query function. I'm open to changing my mind of course.

[murningstar]

It's useful for example for teams who use openapi generated clients and from time to time it's some weird data structure is returned from some method so that just would be faster to transform it than fix the backend code and regenerate the client.

I'm not that experienced to have full vision on this topic and so i just wanted to provide an example of a case similar to mine that made me choose vue-query. Sometimes i just want that select (or transform or whatever it can be called)

[posva]

Can’t you adapt the generated query in that case?

It’s still possible to implement a select feature with a plugin. Maybe a Vue query migration plugin would be nice

[brenoliradev]

I'm coming from a React background, so maybe I’m biased, lol.

I use select in TanStack Query as a way to derive state directly from the query itself without needing to wrap it in a computed. Personally, I like grouping transformations using select. For example:

If I needed to do some key mapping at the API level but couldn’t modify the API directly, I’d likely use select to handle it. It feels clean to me to keep this logic within the query, and it avoids the need for additional computed properties. While Vue’s fine-grained reactivity handles this well, using select feels more natural to me, especially since it allows easy access to the unmodified data if needed - just call the query without the select option. For example, this test.

I understand that select might not always be strictly necessary, and I could use computed instead, but if it doesn't introduce complexity or issues, I think it’s a cool and convenient feature to have.

[brenoliradev]

no problems though. I got your point and this prob would work as good documentation about this case

If pinia colada somehow lean to a more "react" abstraction or maybe select start being demanded for people that are migrating from tanstack I would love to work on this

cheers

[posva]

Oh, it can be built as a plugin. Similar to the delay plugin
A migration plugin that groups these features could maybe be helpful but it does sound like a lot to maintain and build. Feel free to build it if you like though, I would be very happy about it 😄

[brenoliradev]

Yeah. It works for compatibility and also for maintaning the vue aspect of it. 😄

But probably would be better to break the plugins per functionality. I think it would make the plugins as demand and easier to maintain/adopt/tree-shaking since we wouldn't have to worry about it as a collection.

[posva]

Yeah, that way one can progressively opt-out of them and that would remove types and other things.

[posva]

I forgot to say this was added to the migration docs